Skip to content

a11y: add aria-label to Sidebar nav - #101

Open
luke-ward88 wants to merge 1 commit into
OpenNSWM-Lab:mainfrom
luke-ward88:fix/sidebar-nav-aria-label
Open

a11y: add aria-label to Sidebar nav#101
luke-ward88 wants to merge 1 commit into
OpenNSWM-Lab:mainfrom
luke-ward88:fix/sidebar-nav-aria-label

Conversation

@luke-ward88

Copy link
Copy Markdown

Background

Screen reader users rely on aria-label (or aria-labelledby) to distinguish between multiple <nav> landmarks on a page. The sidebar's <nav> in frontend/src/components/layout/Sidebar.tsx had no label, so it was announced as a generic "navigation" region -- indistinguishable from any other nav on the page.

Changes

Added aria-label to the sidebar's <nav> element, using the existing isChinese flag from useReviewLocale to provide a localized label:

<nav
  aria-label={isChinese ? '主导航' : 'Main navigation'}
  className="flex flex-col gap-1 p-2 sm:p-4"
>

Before

Screen reader announces: "navigation landmark" (no way to tell which nav).

After

Screen reader announces: "Main navigation landmark" (or "主导航" in Chinese).

Notes

  • No other files touched.
  • The isChinese flag is already destructured in the component, so no new hook calls needed.
  • Follows the same pattern used by PublicLayout's header nav which already has an aria-label.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant