The sozluk term breadcrumb is a plain paragraph, with no nav landmark or aria-current

[usirin]

Summary

The kamp.us crumb rows are not exposed as breadcrumbs to assistive tech. A screen reader gets an
unlabelled run of text with links in it, the literal / separators are read aloud, and nothing marks
which crumb is the current page.

Where it is, read at origin/main (2026-09-22)

• Sözlük term page, existing term: apps/web/src/components/sozluk/SozlukTermHeader.tsx renders
  <p className="kp-sozluk-term__crumbs"> with <Link> crumbs and / text nodes between them. No
  landmark, no list, no aria-current on the trailing title.
• Sözlük term page, new-term composer branch: apps/web/src/pages/SozlukTermPage.tsx renders the
  same <p> shape a second time.
• Pano site-filter crumb: apps/web/src/components/pano/PanoCrumb.tsx (used by
  apps/web/src/pages/PanoFeed.tsx) is a <div className="kp-pano-crumb"> with <span className="sep">/</span>
  separators, and the host as a plain span.
• Sözlük letter page: apps/web/src/pages/SozlukLetter.tsx already wraps its crumb in
  <nav aria-label=…>, but the crumb is a single root link with no list.

Triage note: the original report said the letter page has the same shape as the term page. At main
it already has a nav landmark, so that part is narrower than reported. Its accessible name is the
crumb text itself (sozluk.letter.crumbRoot), not a breadcrumb label.

Triage note: PR #9628 (open, closes #9602) moves the term page's crumb markup into a new
apps/web/src/components/sozluk/SozlukTermCrumbs.tsx shared by both term-page branches. When it
lands, the term-page half of this fix is one file. Build against whichever component renders the term
crumbs at build time.

What done looks like

The WAI-ARIA Authoring Practices breadcrumb pattern: a nav with an accessible name, an ordered list
of crumbs, separators hidden from assistive tech, and aria-current="page" on the last item.
aria-current is already used in this app (apps/web/src/admin/AdminConsole.tsx,
apps/web/src/components/layout/Subnav.css).

This is semantics only. How crumb links look at rest (underline, hover, focus cue) is #9608's ruled
change on the same three components. The two can ride one PR, but neither needs the other.

Attachment

Searched the board for the crumb surface. #9608 owns the same rows but is a different defect (visual
link cue, not semantics), is already stamped ready for a builder with its own criteria, and folding
this into it would widen a ruled contract. #9602 is the composer crumb's link target. Nothing absorbs
this, so it stays standalone.

Acceptance criteria

• On a sözlük term page, for both an existing term and the new-term composer branch, the crumb row is a nav element with a non-empty accessible name from the i18n catalog (both tr and en), containing an ol with one li per crumb.
• The trailing term-title crumb carries aria-current="page", and no other crumb does.
• The / separators are not in the accessibility tree (for example aria-hidden="true" or CSS-generated), so the accessible text of the row is the crumb labels only.
• The pano site-filter crumb in apps/web/src/components/pano/PanoCrumb.tsx gets the same structure, with the host crumb as the aria-current="page" item and the clear link kept outside the ordered list.
• The sözlük letter page crumb in apps/web/src/pages/SozlukLetter.tsx uses the same structure, and its nav accessible name is the breadcrumb label, not the crumb's own text.
• The crumb rows look the same as before at 1280px and 390px wide: list markers and default list spacing are reset, and the existing crumb classes still style the row. [evidence: rendered captures at 1280x800 and 390x844 in the review-ui verdict on the PR]
• Component tests assert, for the term page and the pano crumb, the navigation role with its name, the aria-current="page" item, and that the separators are hidden from the accessible text. Existing tests in apps/web/src/components/sozluk/SozlukTermHeader.test.tsx that read the row's textContent still pass or are updated to the new structure.

---

Original report (verbatim)

Summary

The sözlük term page's breadcrumb renders as a <p> with literal / characters between the
crumbs. There is no nav landmark, no accessible name on it, and no aria-current on the
trailing term title. A screen reader reaches it as an unlabelled run of text with two links in it,
and it does not appear in the page's landmark list.

What I was doing

Reviewing PR #9628 (lane 9602) in the review-code namespace. That PR extracts the term page's
crumb markup verbatim into a new shared component, so the markup passed under review without being
changed.

What I observed

At head d767a0ad1e4c05cda08010f95cdc7f297f96658e,
apps/web/src/components/sozluk/SozlukTermCrumbs.tsx renders:

<p className="kp-sozluk-term__crumbs">
	<Link to="/sozluk">{t("sozluk.term.crumbRoot")}</Link> /{" "}
	{letter ? (<><Link to={sozlukLetterHref(letter, false)}>{letter}</Link> /{" "}</>) : null}
	{title}
</p>

The separators are text nodes, so a screen reader announces "sözlük slash ı slash ışık" as one
run. The breadcrumb pattern in the WAI-ARIA Authoring Practices asks for a nav with an
accessible name wrapping an ordered list, with aria-current="page" on the final item; none of
the three is present. The same shape appears on apps/web/src/pages/SozlukLetter.css's
.kp-sozluk-letter__crumb row and apps/web/src/components/pano/PanoCrumb.css's crumb row.

This is pre-existing — it predates the PR that surfaced it, which only moved the markup.

Why it matters

Breadcrumbs are the term page's only upward navigation, and the sözlük is a browse-heavy surface
reached from search. Without the landmark a keyboard or screen-reader user cannot jump to it, and
without aria-current nothing says which crumb is the page they are on. The cost of leaving it is
small per page and paid on every term page and every letter page.

The fix is cheaper now than it was a week ago: since PR #9628 one component owns the term page's
crumb markup for both of that page's branches, so the term-page half is a single-file change.

Pointers

• apps/web/src/components/sozluk/SozlukTermCrumbs.tsx — the extracted crumb markup
• apps/web/src/components/sozluk/SozlukTermHeader.tsx and apps/web/src/pages/SozlukTermPage.tsx — its two callers
• apps/web/src/components/pano/PanoCrumb.css and apps/web/src/pages/SozlukLetter.css — the other two crumb rows, same shape
• Sozluk term crumbs read as plain text, letter-page crumbs as links #9608 — the crumb link-affordance ruling, a different question about the same rows (paint, not semantics); the two may want to land together
• Noticed in the review-code verdict on PR fix: The new-term composer's breadcrumb still folds the letter off the slug and links it home #9628, where it is recorded as an out-of-scope note

Suggested next step (non-binding)

Guess only: if #9608 already pulls the three crumb rows onto one shared treatment, the semantic
markup could ride the same change rather than opening a second pass over the same files.

---

_{Filed by an agent · session 56fedc1c-913a-4bc4-baa5-2b748ea48b9b · 2026-09-21T04:50:28Z}

[usirin]

[usirin]

Built on PR #9704 (head c551522). All three crumb rows now go through the shared Breadcrumbs component, and component tests cover the nav name (tr/en), aria-current and the hidden separators.

No fabrika ui render evidence is attached. Both sets exited 11 because the web app never came up: alchemy dev hits a Cloudflare Flagship Unauthorized, already tracked in #8115 and #8025. A scratch-desk hand-check with the real CSS found old and new markup pixel-identical at 1280x800 and 390x844, light and dark. The PR's Deviations has the details. The review-ui gate owns the rendered captures.

The zoned Subnav site crumb is filed as #9705.

[usirin]

[
{
"task": "issue",
"event": "ISSUE.WIP",
"at": "2026-09-23T07:15:57.770Z",
"classes": [
"ui"
]
},
{
"task": "issue",
"event": "ISSUE.DONE",
"at": "2026-09-23T07:34:18.890Z",
"classes": [
"code",
"ui"
]
},
{
"task": "issue",
"event": "ISSUE.PASS",
"at": "2026-09-23T07:39:09.391Z",
"pr": "https://github.com//pull/9704",
"classes": [
"code",
"ui"
],
"deferred": [
"review-ui"
]
},
{
"task": "issue",
"event": "ISSUE.PASS",
"at": "2026-09-23T07:48:47.900Z",
"classes": [
"code",
"ui"
]
},
{
"task": "issue",
"event": "ISSUE.WIP",
"at": "2026-09-23T08:00:05.574Z",
"pr": "https://github.com//pull/9704"
},
{
"task": "issue",
"event": "ISSUE.DONE",
"at": "2026-09-23T08:03:36.085Z",
"pr": "https://github.com//pull/9704",
"partial": false,
"landed": [
9704
]
}
]

[usirin]

Lane 9629 terminal: complete (LANE-TERMINAL). PR #9704 landed via the merge queue; transcript above.