Announce outline sidebar navigation state to screen readers - #2058
jacobo-dominguez-wgu wants to merge 1 commit into
Conversation
|
Thanks for the pull request, @jacobo-dominguez-wgu! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2058 +/- ##
=======================================
Coverage 93.59% 93.60%
=======================================
Files 368 368
Lines 6015 6017 +2
Branches 1420 1418 -2
=======================================
+ Hits 5630 5632 +2
+ Misses 369 368 -1
- Partials 16 17 +1 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Description
Problem
The course outline sidebar's navigation controls did not expose their state to assistive technology, failing WCAG 4.1.2 Name, Role, Value (Level A).
Approach
Added the missing ARIA state attributes to the existing controls, keeping the markup and Paragon components otherwise unchanged.
CourseOutlineTrigger.jsxaria-expanded={currentSidebar === ID}+aria-controls="outline-sidebar-outline"components/CourseOutlineHeading.tsxaria-expanded(the tray only mounts when open, so the control is always in the expanded state) +aria-controlscomponents/UnitLinkWrapper.tsxaria-current="page"when the unit is the active unitTesting
Test case 1
Test case 2
Inspect the outline sidebar trigger and outline sidebar active item using the browsers developer tools and verify:
aria-expandedstate (true/false) to assistive tech.aria-current="page"where appropriate.AI usage notice
Used Kiro to assist on this creation of this pr.