Skip to content

fix(a11y): add aria-label to generic-dropper arrow button (link-name WCAG 2.4.4) - #13029

Merged
lokesh merged 4 commits into
masterfrom
a11y/link-name-dropper-aria-label
Jul 3, 2026
Merged

fix(a11y): add aria-label to generic-dropper arrow button (link-name WCAG 2.4.4)#13029
lokesh merged 4 commits into
masterfrom
a11y/link-name-dropper-aria-label

Conversation

@mekarpeles

Copy link
Copy Markdown
Member

Summary

  • <a class="generic-dropper__dropclick"> (the arrow to open the reading-list dropdown) had only a <div class="arrow"> child — no accessible text, violating WCAG 2.4.4 (Link Purpose).
  • Adds an optional dropdown_label parameter to lib/dropper.html with a default of _('More options').
  • my_books/dropper.html passes a book-title-contextual label: _('More reading options for %(title)s', title=title) (or _('More reading options') when no title is available).
  • Fixes ~20 axe link-name violations on /search and ~21 on /authors/*.

Test plan

  • Visit /search?q=the+great+gatsby — inspect arrow button; confirm aria-label="More reading options for <title>" on each card.
  • Playwright regression test added in the 12885/playwright-e2e-tests worktree (see PR test(e2e): add Playwright smoke test suite for core OL pages #12998).
  • Screen reader: tabbing to the arrow button should announce the label.

Part of WCAG 2.1 AA a11y remediation — tracked in #13009

…ame WCAG 2.4.4)

The arrow button that opens the reading-list dropdown had no discernible
text, causing axe link-name violations (~20 nodes on /search, ~21 on
/authors). lib/dropper.html now accepts an optional dropdown_label; the
my_books dropper passes a book-title-contextual label so screen readers
announce "More reading options for <title>" per each card.

Fixes #13009 (WCAG 2.4.4 link-name)
mekarpeles added a commit that referenced this pull request Jun 24, 2026
Regression guard for PR #13029: the generic-dropper arrow anchor
(my-books reading-list dropdown trigger on search + author pages)
must have an accessible label per WCAG 2.4.4.

Tests will fail until #13029 merges and deploys.
@mekarpeles mekarpeles added the Theme: Accessibility Work related to disability accessibility. [managed] label Jun 24, 2026
@lokesh

lokesh commented Jul 3, 2026

Copy link
Copy Markdown
Collaborator

Resolved the messages.pot merge conflict against master (kept both the new More options string and master's browse_popover additions) and pushed. Happy with this one — narrow scope, low risk: it only adds an optional dropdown_label param with a safe default and a title-contextual aria-label, with no behavior change for existing callers. Just waiting on CI to go green.

@lokesh
lokesh merged commit 7570c52 into master Jul 3, 2026
5 of 7 checks passed
@lokesh
lokesh deleted the a11y/link-name-dropper-aria-label branch August 11, 2026 21:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Theme: Accessibility Work related to disability accessibility. [managed]

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants