feat: accessibility HTML attributes for Course Navigation top bar #1820

filippovskii09 · 2025-11-05T20:26:34Z

Note

This PR will be added to the product proposal to improve accessibility.

Description

This PR introduces accessibility (a11y) improvements to the Course Top Navigation Bar (Sequence Navigation).
This ensures the navigation is fully perceivable and operable for screen reader and keyboard-only users.

Key Changes

The container for the sequence navigation tabs now explicitly uses role="tablist", creating a proper context for assistive technologies.
A descriptive label (aria-label="course sequence tabs") has been added to the main navigation element, allowing screen readers to identify this specific navigation region.
Tab Role: Each button within the navigation bar now correctly uses role="tab".
Selected State: Implemented dynamic management of the aria-selected state. The active unit button is explicitly announced as selected="true", while inactive buttons are selected="false".
Relationship: Added the aria-controls property to establish a programmatic link between the tab button and the content it controls.

Steps to Test

Note: These steps focus on verifying keyboard navigation behavior (Tab / Shift+Tab).

Open Course: Navigate to any course unit within the Learning MFE.
Navigate to Sequence Bar: From the top of the page, press the Tab key repeatedly until the visual focus indicator lands on the Course Sequence Navigation
Forward Navigation: Continue pressing Tab. Verify that focus moves logically from left to right, landing on each unit icon in the sequence.
Backward Navigation: Press Shift + Tab. Verify that focus moves logically backwards (right to left) through the sequence without getting trapped or skipping elements.
Activation: Navigate to an inactive unit using the keyboard and press Enter. Verify that the unit is selected and the content updates accordingly.

2025-12-01.11.28.48.mov

openedx-webhooks · 2025-11-05T20:26:39Z

Thanks for the pull request, @filippovskii09!

This repository is currently maintained by @openedx/committers-frontend-app-learning.

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 approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To 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:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

Where 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:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2025-11-05T20:31:06Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.88%. Comparing base (d0a8778) to head (f6408fd).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1820      +/-   ##
==========================================
+ Coverage   90.86%   90.88%   +0.01%     
==========================================
  Files         348      348              
  Lines        5814     5815       +1     
  Branches     1341     1383      +42     
==========================================
+ Hits         5283     5285       +2     
+ Misses        514      511       -3     
- Partials       17       19       +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

open-craft-grove · 2025-11-05T21:35:57Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-11-06T06:20:08Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-11-06T06:39:25Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-11-06T06:41:39Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

PKulkoRaccoonGang · 2025-11-06T14:54:32Z

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

+      data-testid="courseware-sequence-navigation"
+      className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}
+      style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}
+      aria-label="course sequence tabs"


Should we have a translation for this label?

translations have been added

PKulkoRaccoonGang · 2025-11-06T14:55:40Z

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx

 jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
 useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);

+jest.mock('@openedx/paragon', () => {


Can we abandon these mocks and test real functionality?

PKulkoRaccoonGang · 2025-11-06T14:56:30Z

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx

+
+    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+
+    const nav = screen.getByRole('navigation', { name: /course sequence tabs/i });


If you add a translation for this text, it can be used here

translations have been added too

PKulkoRaccoonGang · 2025-11-06T14:58:51Z

src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx

+    const onClick = jest.fn();
+    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
+
+    fireEvent.click(screen.getByRole('tab'));


Let's use userEvent here

PKulkoRaccoonGang · 2025-11-06T14:59:15Z

src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx

    const onClick = jest.fn();
    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
-    fireEvent.click(screen.getByRole('link'));
+    fireEvent.click(screen.getByRole('tab'));


Let's use userEvent here

PKulkoRaccoonGang · 2025-11-06T14:59:39Z

src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx

    });
    const dropdownMenu = container.querySelector('.dropdown-menu');
-    getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => fireEvent.click(button));
+    getAllByRole(dropdownMenu, 'tab', { hidden: true }).forEach(button => fireEvent.click(button));


Let's use userEvent here

open-craft-grove · 2025-11-07T09:07:17Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-11-07T09:49:52Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

feat: accessibility HTML attributes for Course Navigation top bar

0119739

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 5, 2025

filippovskii09 self-assigned this Nov 5, 2025

openedx-webhooks added this to Contributions Nov 5, 2025

github-project-automation bot moved this to Needs Triage in Contributions Nov 5, 2025

filippovskii09 added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Nov 5, 2025

PKulkoRaccoonGang suggested changes Nov 6, 2025

View reviewed changes

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Nov 6, 2025

filippovskii09 added 2 commits November 7, 2025 10:03

fix: fix discussions and some refactor

b35cb90

fix: remove extra code

f6408fd

filippovskii09 requested a review from PKulkoRaccoonGang November 7, 2025 08:26

PKulkoRaccoonGang approved these changes Nov 22, 2025

View reviewed changes


		render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });

		const nav = screen.getByRole('navigation', { name: /course sequence tabs/i });

feat: accessibility HTML attributes for Course Navigation top bar #1820

Are you sure you want to change the base?

feat: accessibility HTML attributes for Course Navigation top bar #1820

Conversation

filippovskii09 commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Key Changes

Steps to Test

Uh oh!

openedx-webhooks commented Nov 5, 2025

Uh oh!

codecov bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

open-craft-grove commented Nov 5, 2025

Uh oh!

open-craft-grove commented Nov 6, 2025

Uh oh!

open-craft-grove commented Nov 6, 2025

Uh oh!

open-craft-grove commented Nov 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

open-craft-grove commented Nov 7, 2025

Uh oh!

open-craft-grove commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

filippovskii09 commented Nov 5, 2025 •

edited

Loading

codecov bot commented Nov 5, 2025 •

edited

Loading