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 proposes improvements aimed at enhancing the accessibility of the course top navigation bar.

Add an aria-label="course sequence tabs" to the element that contains the tab bar.
Add the role tablist to the
with the class "sequence-navigation-tabs d-flex flex-grow-1" that contains the tab buttons (the previous and next buttons adjacent to the course sequence tab could be included in the tablist, however, they do not require aria-selected or aria-controls attributes).
Add the role tab, the state aria-selected, and the property aria-controls to each button in the tab bar. The aria-selected state must be set to true when the button is activated; otherwise, it must be set to false.

Testing instructions

Create a new course
Enter inside some section
Check that has aria-label="course sequence tabs"
Check that
with the class "sequence-navigation-tabs d-flex flex-grow-1" has role="tablist"
Check that inside this div has role="tab", aria-controls and aria-selected in current state
Use Tab to navigate between buttons

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


		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

Testing instructions

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