-
Notifications
You must be signed in to change notification settings - Fork 8
[A11y] Add aria-expanded and aria-controls to Navigation Menu Triggers #88
Copy link
Copy link
Open
Labels
accessibilityAccessibility / a11y improvements (ARIA attributes, keyboard navigation, contrast)Accessibility / a11y improvements (ARIA attributes, keyboard navigation, contrast)area:coreCore domain logic, shared arithmetic helpers, security, and utility servicesCore domain logic, shared arithmetic helpers, security, and utility servicesbeginner friendlyAccessible task suitable for developers new to open sourceAccessible task suitable for developers new to open sourcebugConfirmed defect, malfunctioning behavior, or validation errorConfirmed defect, malfunctioning behavior, or validation errorcommunityCommunity-driven enhancement, UX feedback, or resource sharingCommunity-driven enhancement, UX feedback, or resource sharingcontributions-welcomeCommunity contributions are explicitly encouraged for this issueCommunity contributions are explicitly encouraged for this issuedifficulty:beginnerBeginner-friendly task with single-file scope and clear acceptance criteriaBeginner-friendly task with single-file scope and clear acceptance criteriadifficulty:easyStraightforward task requiring basic familiarity with React/TypeScriptStraightforward task requiring basic familiarity with React/TypeScriptenhancementSmall improvement, refinement, or feature expansionSmall improvement, refinement, or feature expansiongood first issueCurated, self-contained task suitable for first-time contributorsCurated, self-contained task suitable for first-time contributorshacktoberfestEligible high-quality task for open-source community eventsEligible high-quality task for open-source community eventshelp wantedMaintainer is actively welcoming community contributions on this issueMaintainer is actively welcoming community contributions on this issuetestingUnit tests, test matrix expansion, validation fixtures, and regression coverageUnit tests, test matrix expansion, validation fixtures, and regression coveragetime:<15mQuick fix, typo correction, or minor tweak (< 15 minutes)Quick fix, typo correction, or minor tweak (< 15 minutes)up-for-grabsUnassigned issue that is available for any contributorUnassigned issue that is available for any contributor
Description
Activity
Metadata
Metadata
Assignees
Labels
accessibilityAccessibility / a11y improvements (ARIA attributes, keyboard navigation, contrast)Accessibility / a11y improvements (ARIA attributes, keyboard navigation, contrast)area:coreCore domain logic, shared arithmetic helpers, security, and utility servicesCore domain logic, shared arithmetic helpers, security, and utility servicesbeginner friendlyAccessible task suitable for developers new to open sourceAccessible task suitable for developers new to open sourcebugConfirmed defect, malfunctioning behavior, or validation errorConfirmed defect, malfunctioning behavior, or validation errorcommunityCommunity-driven enhancement, UX feedback, or resource sharingCommunity-driven enhancement, UX feedback, or resource sharingcontributions-welcomeCommunity contributions are explicitly encouraged for this issueCommunity contributions are explicitly encouraged for this issuedifficulty:beginnerBeginner-friendly task with single-file scope and clear acceptance criteriaBeginner-friendly task with single-file scope and clear acceptance criteriadifficulty:easyStraightforward task requiring basic familiarity with React/TypeScriptStraightforward task requiring basic familiarity with React/TypeScriptenhancementSmall improvement, refinement, or feature expansionSmall improvement, refinement, or feature expansiongood first issueCurated, self-contained task suitable for first-time contributorsCurated, self-contained task suitable for first-time contributorshacktoberfestEligible high-quality task for open-source community eventsEligible high-quality task for open-source community eventshelp wantedMaintainer is actively welcoming community contributions on this issueMaintainer is actively welcoming community contributions on this issuetestingUnit tests, test matrix expansion, validation fixtures, and regression coverageUnit tests, test matrix expansion, validation fixtures, and regression coveragetime:<15mQuick fix, typo correction, or minor tweak (< 15 minutes)Quick fix, typo correction, or minor tweak (< 15 minutes)up-for-grabsUnassigned issue that is available for any contributorUnassigned issue that is available for any contributor
good first issue,accessibility,difficulty:beginner,area:coresrc/components/settings/settings-nav.tsxWhy This Matters
Collapsible navigation components require clear state indicators so screen reader users understand whether navigation panels are expanded or collapsed.
Current Behavior
Navigation triggers in
src/components/settings/settings-nav.tsxtoggle sub-menus but do not declarearia-expandedoraria-controlsattributes.Requested Change
Add
aria-expanded={isExpanded}andaria-controls="nav-section-id"to collapsible navigation buttons insrc/components/settings/settings-nav.tsx.Acceptance Criteria
aria-expandeddynamic state attribute added.aria-controlstarget ID attribute added.npm run test:file -- tests/settings-domain-validation.test.ts.Verification
Contributor Notes
Accessibility improvement.
🚀 How to Claim and Implement an Issue
mainreferencing this issue number!