Skip to content

fix accessibility bug 2605237 a11y aria required children#3598

Merged
navya9singh merged 2 commits into
v2from
navya9singh/fix-2605237-a11y-aria-required-children
Jul 1, 2026
Merged

fix accessibility bug 2605237 a11y aria required children#3598
navya9singh merged 2 commits into
v2from
navya9singh/fix-2605237-a11y-aria-required-children

Conversation

@navya9singh

Copy link
Copy Markdown
Member

@navya9singh navya9singh added the deploy-preview Enables automatic deployments to preview environments on a PR label Jun 30, 2026
navya9singh and others added 2 commits July 1, 2026 15:20
Bug: 2605237 - aria-required-children violation on ul[role=tablist]

Root cause: TopNav.tsx used role='tablist' on the <ul>, role='none
presentation' on each <li>, and aria-owns to reference inner <a role='tab'>
elements. This pattern is broken because:
  - role='none' is not honored when a descendant is focusable (<a href>)
  - axe-core 4.10.2 flags li[tabindex] as 'children not allowed' in tablist
  - aria-owns is redundant when elements are already DOM descendants
  - The IDs (tab1-tab6) are not referenced by any JavaScript

Fix: Remove role='tablist', aria-owns, aria-busy, role='none presentation',
and role='tab'. The <nav aria-label='top menu'> wrapper already provides
correct semantics. Gatsby's Link sets aria-current='page' on the active item.

Affects ALL pages (homepage, playground, docs, etc.) since TopNav is global.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Same broken pattern as TopNav: ul.editor-tabs used role='tablist' with
li[role='none presentation'] wrappers around a[role='tab'] elements.
role='none' is ignored by axe when descendants are focusable (<a href>),
so the li children were flagged as not allowed in a tablist.

Fix: give <li> elements role='tab' + aria-selected + tabIndex directly,
removing the inner <a> wrappers and the redundant aria-owns/aria-busy.
Update CSS to apply color/cursor directly to li instead of li > a.

This clears the aria-required-children axe violation on the homepage,
confirmed by axe-core 4.x programmatic FastPass check.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@navya9singh navya9singh force-pushed the navya9singh/fix-2605237-a11y-aria-required-children branch from b6e92e5 to 9fb9d7e Compare July 1, 2026 22:20
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3598.centralus.5.azurestaticapps.net

@navya9singh navya9singh requested a review from jakebailey July 1, 2026 23:00
@navya9singh navya9singh merged commit 0994ee7 into v2 Jul 1, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

deploy-preview Enables automatic deployments to preview environments on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants