feat: accessibility HTML attributes for Course Navigation top bar by filippovskii09 · Pull Request #1820 · openedx/frontend-app-learning · GitHub

Note

This PR has been added to the product proposal to improve accessibility.
Product proposal

Issue

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

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.

Details

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 Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.97%. Comparing base (d0a8778) to head (f6408fd).
⚠️ Report is 22 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1820      +/-   ##
==========================================
+ Coverage   90.86%   90.97%   +0.11%     
==========================================
  Files         348      350       +2     
  Lines        5814     5930     +116     
  Branches     1341     1400      +59     
==========================================
+ Hits         5283     5395     +112     
- Misses        514      515       +1     
- Partials       17       20       +3

☔ 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.

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

Should we have a translation for this label?

translations have been added

Can we abandon these mocks and test real functionality?

fixed

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

translations have been added too

Let's use userEvent here

fixed

Let's use userEvent here

fixed

Let's use userEvent here

fixed

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

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

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

Hi @openedx/openedx-product-managers could you please take a look at this PR? Thanks in advance!

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

Hi @PKulkoRaccoonGang - the Product team doesn't have any a11y experts, so I'm not sure if any of us can be called upon. I think an a11y expert should be the one to approve these types of PRs, but I'm not sure who that would be - @brian-smith-tcril any advice?

Following up on this ⬆️ here.

@filippovskii09 Do you mind rebasing or pushing a new commit to this so that the sandbox gets re-created?

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

peterkulko 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 peterkulko November 7, 2025 08:26

peterkulko approved these changes Nov 22, 2025

View reviewed changes

peterkulko mentioned this pull request Dec 18, 2025

[a11y]: Accessibility improvements for Learning MFE openedx/platform-roadmap#495

Open

8 tasks

itsjeyd added the product review PR requires product review before merging label Jan 6, 2026

itsjeyd moved this from Waiting on Author to Product Review in Contributions Jan 6, 2026

filippovskii09 marked this pull request as ready for review February 25, 2026 13:54

itsjeyd added the waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. label Mar 23, 2026

peterkulko mentioned this pull request Mar 25, 2026

[a11y]: Improve screen reader navigation for course sequence tabs #1881

Open

filippovskii09 removed the create-sandbox open-craft-grove should create a sandbox environment from this PR label Mar 26, 2026

filippovskii09 closed this Mar 26, 2026

github-project-automation Bot moved this from Product Review to Done in Contributions Mar 26, 2026

filippovskii09 reopened this Mar 26, 2026

openedx-webhooks removed the waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. label Mar 26, 2026

itsjeyd moved this from Done to Product Review in Contributions Mar 30, 2026

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

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

                   });
                   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));

               jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
               useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+              jest.mock('@openedx/paragon', () => {


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

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

feat: accessibility HTML attributes for Course Navigation top bar by filippovskii09 · Pull Request #1820 · openedx/frontend-app-learning · GitHub

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!

Issue

Description

Key Changes

Steps to Test

Uh oh!

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

Uh oh!

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!

open-craft-grove commented Dec 18, 2025

Uh oh!

open-craft-grove commented Dec 18, 2025

Uh oh!

open-craft-grove commented Dec 18, 2025

Uh oh!

open-craft-grove commented Dec 19, 2025

Uh oh!

open-craft-grove commented Jan 6, 2026

Uh oh!

open-craft-grove commented Jan 20, 2026

Uh oh!

peterkulko commented Feb 25, 2026

Uh oh!

open-craft-grove commented Feb 25, 2026

Uh oh!

sarina commented Feb 27, 2026

Uh oh!

itsjeyd commented Mar 13, 2026

Uh oh!

kdmccormick commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

filippovskii09 commented Nov 5, 2025 •
edited
Loading

openedx-webhooks commented Nov 5, 2025 •
edited
Loading

codecov Bot commented Nov 5, 2025 •
edited
Loading