Skip to content

fix(a11y): use <button> with aria-expanded for the version toggle#14835

Merged
skjnldsv merged 3 commits into
masterfrom
fix/bitv-9747-aria-expanded
May 12, 2026
Merged

fix(a11y): use <button> with aria-expanded for the version toggle#14835
skjnldsv merged 3 commits into
masterfrom
fix/bitv-9747-aria-expanded

Conversation

@skjnldsv
Copy link
Copy Markdown
Member

@skjnldsv skjnldsv commented May 12, 2026

☑️ Resolves

🖼️ Screenshots

Before After
image image

Explanations

The version selector used a <span> as an interactive control. Spans have no implicit ARIA role, no native keyboard focus semantics, and cannot carry an aria-expanded state — failing WCAG 4.1.2 / BITV 9.4.1.2.

Changes in all three manual version templates (user_manual, developer_manual, admin_manual):

  • <span class="rst-current-version"> replaced with <button type="button">. The RTD theme JS uses [data-toggle] attribute selectors, so the element type change does not break the toggle.
  • aria-expanded="false" added to the button; a small inline script mirrors the RTD toggle-class event to keep the attribute in sync.
  • aria-controls links the button to its dropdown panel.
  • Decorative caret <span> icons get aria-hidden="true".
  • CSS reset added to custom.css so the button looks identical to the previous span.

cc @nextcloud/a11y

✅ Checklist

  • I have built the documentation locally and reviewed the output
  • Screenshots are included for visual changes
  • I have not moved or renamed pages (or added a redirect if I did)
  • I have run codespell or similar and addressed any spelling issues

The version selector used a <span> as an interactive toggle, which
has no native keyboard role or state indication (WCAG 4.1.2 /
BITV 9.4.1.2). Screen readers could not announce whether the panel
was expanded or collapsed.

Changes across all three manual version templates:
- Replace the <span> with a <button type="button"> so the element
  has native keyboard focus, click-on-Enter, and an implicit role.
- Add aria-expanded="false" (updated to "true" on click via a small
  inline script that mirrors the RTD theme toggle).
- Add aria-controls pointing to the versioned dropdown container.
- Mark decorative caret icons with aria-hidden="true".

Add CSS to reset default <button> styles so the visual appearance
is unchanged.

Fixes #9747

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 12, 2026

📖 Documentation Preview

🔍 Open preview →

No RST documentation pages changed in this PR.

Last updated: Tue, 12 May 2026 20:19:21 GMT

skjnldsv added 2 commits May 12, 2026 22:09
Signed-off-by: John Molakvoæ <skjnldsv@users.noreply.github.com>
Signed-off-by: John Molakvoæ <skjnldsv@users.noreply.github.com>
@skjnldsv skjnldsv merged commit d66e26f into master May 12, 2026
24 checks passed
@skjnldsv skjnldsv deleted the fix/bitv-9747-aria-expanded branch May 12, 2026 21:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BITV] 9.4.1.2/9.5 - The button to display a version number should be implemented as a button element with an aria-expanded attribute. (1)

2 participants