Render psalm verses as plain divs instead of an <ol>/<li> list
Deploy / deploy (push) Successful in 1m24s
Deploy / deploy (push) Successful in 1m24s
Screen readers announced "list, N items" for continuous liturgical text that isn't conceptually a list; styling is class-based so no CSS changes were needed.
This commit is contained in:
@@ -50,14 +50,13 @@ across every hour and content type in this app.
|
|||||||
from the list was the whole fix; no new suppress-mechanism needed. `st-hermes.yml` and
|
from the list was the whole fix; no new suppress-mechanism needed. `st-hermes.yml` and
|
||||||
`st-hermes-collect.yml` are untouched by this — deliberately left in place, restorable
|
`st-hermes-collect.yml` are untouched by this — deliberately left in place, restorable
|
||||||
by re-adding the one list entry if ever wanted back.
|
by re-adding the one list entry if ever wanted back.
|
||||||
- Accessibility: psalm verses render as a real `<ol>/<li>` list
|
- ~~Accessibility: psalm verses render as a real `<ol>/<li>` list~~ — done (2026-08-28).
|
||||||
(`src/ui/hour-view.ts`'s `'psalm'` case, `.psalm-verses`/`.psalm-verse`) — a screen
|
`src/ui/hour-view.ts`'s `'psalm'` case (`.psalm-verses`/`.psalm-verse`) now renders
|
||||||
reader announces "list, N items" per verse, which is disruptive for continuous
|
plain `<div>`s instead of `<ol>/<li>`, so a screen reader no longer announces "list,
|
||||||
liturgical text that isn't conceptually a list. Needs to render as plain markup that
|
N items" for continuous liturgical text. Styling is entirely class-based, so
|
||||||
preserves line breaks (e.g. paragraphs/divs per verse, or `white-space: pre-line`)
|
`styles.css` needed no changes. Audited the rest of `src/ui/**` for the same pattern —
|
||||||
instead of `<ol>/<li>`. Audited the rest of `src/ui/**` for the same pattern — the only
|
the only other list markup is `hour-list.ts`'s `<ul class="hour-list">`, which is a
|
||||||
other list markup is `hour-list.ts`'s `<ul class="hour-list">`, which is a real
|
real navigational list of hours and correctly stays a list.
|
||||||
navigational list of hours and should stay a list. Not started.
|
|
||||||
- ~~Matins: "Te decet laus"~~ — done (2026-08-23). Added as a new common text
|
- ~~Matins: "Te decet laus"~~ — done (2026-08-23). Added as a new common text
|
||||||
(`data/propers/common/te-decet-laus.yml`, sourced from `Psalterium/Common/Prayers.txt`'s
|
(`data/propers/common/te-decet-laus.yml`, sourced from `Psalterium/Common/Prayers.txt`'s
|
||||||
`[Te decet]` block) rendered as a `versicle` part immediately after the Te Deum on every
|
`[Te decet]` block) rendered as a `versicle` part immediately after the Te Deum on every
|
||||||
|
|||||||
+3
-3
@@ -113,9 +113,9 @@ function renderPart(part: ResolvedPart, languages: readonly string[]): string {
|
|||||||
<section class="ordo-part ordo-part-psalm">
|
<section class="ordo-part ordo-part-psalm">
|
||||||
${part.antiphon ? renderColumns(part.antiphon, languages) : ''}
|
${part.antiphon ? renderColumns(part.antiphon, languages) : ''}
|
||||||
<h3 class="ordo-part-label">${citation}</h3>
|
<h3 class="ordo-part-label">${citation}</h3>
|
||||||
<ol class="psalm-verses">
|
<div class="psalm-verses">
|
||||||
${part.verses.map((v) => `<li class="psalm-verse">${renderColumns(v, languages)}</li>`).join('')}
|
${part.verses.map((v) => `<div class="psalm-verse">${renderColumns(v, languages)}</div>`).join('')}
|
||||||
</ol>
|
</div>
|
||||||
${part.gloriaPatri ? `<div class="ordo-part-gloria-patri">${renderColumns(part.gloriaPatri, languages)}</div>` : ''}
|
${part.gloriaPatri ? `<div class="ordo-part-gloria-patri">${renderColumns(part.gloriaPatri, languages)}</div>` : ''}
|
||||||
</section>
|
</section>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user