feat: improved accessibility of learning header by filippovskii09 · Pull Request #653 · openedx/frontend-component-header

filippovskii09 · 2025-11-05T16:05:46Z

Note

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

Description

Improving the accessibility of a user dropdown menu.

Key changes:

Implemented a focus trap so the Tab and arrow keys are contained within the menu until it is closed.
Focus is now automatically placed on the first item when the menu is opened.
Added role="menu" to the menu container.
Added role="menuitem" to each item within the menu.
Added an accessible name to the menu's trigger button using the aria-label attribute.

Testing instructions

Steps to reproduce:

Create a new course.
Go to the Home page.
Using Tab key go to dropdown menu and click Enter
Ensure tab and arrow keys are trapped in the menu until it is closed.
Ensure all tags has necessary attributes
Ensure everything works correctly for mobile device screens.

2025-11-05.17.58.03.mov

openedx-webhooks · 2025-11-05T16:05:52Z

Thanks for the pull request, @filippovskii09!

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

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-05T16:11:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.86%. Comparing base (9706385) to head (313ceb9).
⚠️ Report is 9 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #653      +/-   ##
==========================================
+ Coverage   72.11%   73.86%   +1.75%     
==========================================
  Files          55       56       +1     
  Lines         502      528      +26     
  Branches      108      117       +9     
==========================================
+ Hits          362      390      +28     
+ Misses        137      136       -1     
+ Partials        3        2       -1

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

PKulkoRaccoonGang · 2025-11-06T14:06:28Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';


Do we need this React import?

if we remove this somewhere, errors will occur

PKulkoRaccoonGang · 2025-11-06T14:07:01Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+    renderComponent();
+
+    const toggleButton = screen.getByRole('button', { name: 'User Options' });
+    await fireEvent.click(toggleButton);


Let's use userEvent

userEvent package does not use in this header-component

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

src/learning-header/AuthenticatedUserDropdown.test.jsx

+  it('loops focus from last to first and vice versa with Tab and Shift+Tab', async () => {
+    renderComponent();
+
+    const toggleButton = screen.getByRole('button', { name: 'User Options' });


Can we use translations instead of hardcoded text?

Let's use userOptionsDropdownLabel

PKulkoRaccoonGang · 2025-11-06T14:08:19Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+    renderComponent();
+
+    const toggleButton = screen.getByRole('button', { name: 'User Options' });
+    await fireEvent.click(toggleButton);


Let's use userEvent

userEvent package does not use in this header-component

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

src/learning-header/AuthenticatedUserDropdown.test.jsx

+    renderComponent();
+
+    const toggleButton = screen.getByRole('button', { name: 'User Options' });
+    await fireEvent.click(toggleButton);


Let's use userEvent

userEvent package does not use in this header-component

PKulkoRaccoonGang · 2025-11-06T14:09:45Z

src/learning-header/LearningHeaderUserMenuItems.jsx

+    role="menuitem"
+    onKeyDown={handleKeyDown}
+    // eslint-disable-next-line no-nested-ternary
+    ref={index === 0 ? firstMenuItemRef : index === items.length - 1 ? lastMenuItemRef : null}


Can we rewrite this to get rid of // eslint-disable-next-line no-nested-ternary and make the code clearer?

PKulkoRaccoonGang · 2025-11-06T14:10:41Z

src/learning-header/LearningHeaderUserMenuItems.jsx

+  lastMenuItemRef,
+}) => items.map((item, index) => (
+  <Dropdown.Item
+    href={item.href}


Do we need to add a key to Dropdown.Item?

PKulkoRaccoonGang · 2025-11-06T14:11:46Z

src/setupTest.js

+    ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL || null,
+    ORDER_HISTORY_URL: process.env.ORDER_HISTORY_URL || null,
+    ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL || null,
+    CREDENTIALS_BASE_URL: process.env.CREDENTIALS_BASE_URL || null,


Why are we adding these variables?

becouse we used this vars there AuthenticatedUserDropdown.test.jsx and need to mock it

PKulkoRaccoonGang · 2025-11-22T12:39:59Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+  it('loops focus from last to first and vice versa with Tab and Shift+Tab', async () => {
+    renderComponent();
+
+    const toggleButton = screen.getByRole('button', { name: 'User Options' });


Let's use userOptionsDropdownLabel

PKulkoRaccoonGang · 2025-11-22T12:40:16Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+  it('focuses next link when Tab is pressed on middle item', async () => {
+    renderComponent();
+
+    const toggleButton = screen.getByRole('button', { name: 'User Options' });


Let's use userOptionsDropdownLabel

PKulkoRaccoonGang · 2025-11-22T12:43:21Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+import React from 'react';
+import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import messages from './messages';
+import {
+  render, screen, fireEvent, initializeMockApp,
+} from '../setupTest';


Suggested change

import React from 'react';

import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';

import messages from './messages';

import {

render, screen, fireEvent, initializeMockApp,

} from '../setupTest';

import React from 'react';

import {

render, screen, fireEvent, initializeMockApp,

} from '../setupTest';

import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';

import messages from './messages';

PKulkoRaccoonGang · 2025-11-22T12:44:16Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+    await fireEvent.click(toggleButton);
+
+    expect(await screen.findByText(messages.dashboard.defaultMessage))
+      .toHaveAttribute('href', `${process.env.LMS_BASE_URL}/dashboard`);


Suggested change

.toHaveAttribute('href', `${process.env.LMS_BASE_URL}/dashboard`);

.toHaveAttribute('href', `${getConfig().LMS_BASE_URL}/dashboard`);

PKulkoRaccoonGang · 2025-11-22T12:44:33Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+    expect(await screen.findByText(messages.dashboard.defaultMessage))
+      .toHaveAttribute('href', `${process.env.LMS_BASE_URL}/dashboard`);
+
+    expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${process.env.ACCOUNT_PROFILE_URL}/u/${username}`);


Suggested change

expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${process.env.ACCOUNT_PROFILE_URL}/u/${username}`);

expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`);

PKulkoRaccoonGang · 2025-11-22T12:44:55Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+      .toHaveAttribute('href', `${process.env.LMS_BASE_URL}/dashboard`);
+
+    expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${process.env.ACCOUNT_PROFILE_URL}/u/${username}`);
+    expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', process.env.ACCOUNT_SETTINGS_URL);


Suggested change

expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', process.env.ACCOUNT_SETTINGS_URL);

expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', getConfig().ACCOUNT_SETTINGS_URL);

PKulkoRaccoonGang · 2025-11-22T12:45:07Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+
+    expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${process.env.ACCOUNT_PROFILE_URL}/u/${username}`);
+    expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', process.env.ACCOUNT_SETTINGS_URL);
+    expect(screen.getByText(messages.orderHistory.defaultMessage)).toHaveAttribute('href', process.env.ORDER_HISTORY_URL);


Suggested change

expect(screen.getByText(messages.orderHistory.defaultMessage)).toHaveAttribute('href', process.env.ORDER_HISTORY_URL);

expect(screen.getByText(messages.orderHistory.defaultMessage)).toHaveAttribute('href', getConfig().ORDER_HISTORY_URL);

PKulkoRaccoonGang · 2025-11-22T12:45:16Z

src/learning-header/AuthenticatedUserDropdown.test.jsx

+    expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${process.env.ACCOUNT_PROFILE_URL}/u/${username}`);
+    expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', process.env.ACCOUNT_SETTINGS_URL);
+    expect(screen.getByText(messages.orderHistory.defaultMessage)).toHaveAttribute('href', process.env.ORDER_HISTORY_URL);
+    expect(screen.getByText(messages.signOut.defaultMessage)).toHaveAttribute('href', process.env.LOGOUT_URL);


Suggested change

expect(screen.getByText(messages.signOut.defaultMessage)).toHaveAttribute('href', process.env.LOGOUT_URL);

expect(screen.getByText(messages.signOut.defaultMessage)).toHaveAttribute('href', getConfig().LOGOUT_URL);

PKulkoRaccoonGang · 2025-11-23T10:38:45Z

src/learning-header/LearningHeaderUserMenuItems.jsx

+  const getRefForIndex = (index, length) => {
+    if (index === 0) { return firstMenuItemRef; }
+    if (index === length - 1) { return lastMenuItemRef; }
+    return null;
+  };


Suggested change

const getRefForIndex = (index, length) => {

if (index === 0) { return firstMenuItemRef; }

if (index === length - 1) { return lastMenuItemRef; }

return null;

};

const getRefForIndex = (index, length) => {

if (index === 0) {

return firstMenuItemRef;

}

if (index === length - 1) {

return lastMenuItemRef;

}

return null;

};

itsjeyd · 2026-01-06T11:20:51Z

OSPR management note: This is part of a larger a11y initative (openedx/platform-roadmap#495), together with seven related PRs against https://github.com/openedx/frontend-app-learning.

feat: improved accessibility of learning header

3105e15

filippovskii09 self-assigned this Nov 5, 2025

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label 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

fix: fix lint errors

f335bc4

filippovskii09 force-pushed the filippovskii/feat/header-dropdown-btn-label branch from ece7ac2 to f335bc4 Compare November 5, 2025 16:23

PKulkoRaccoonGang added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Nov 6, 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

fix: fix discussions and some refactor

cc886b5

filippovskii09 mentioned this pull request Nov 9, 2025

feat: improved accessibility of learning header #573

Closed

PKulkoRaccoonGang suggested changes Nov 22, 2025

View reviewed changes

PKulkoRaccoonGang reviewed Nov 23, 2025

View reviewed changes

fix: some refactor

313ceb9

filippovskii09 requested a review from PKulkoRaccoonGang November 27, 2025 10:52

PKulkoRaccoonGang approved these changes Nov 28, 2025

View reviewed changes

PKulkoRaccoonGang mentioned this pull request Dec 18, 2025

Accessibility improvements for Learning MFE openedx/platform-roadmap#495

Open

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

	.toHaveAttribute('href', `${process.env.LMS_BASE_URL}/dashboard`);
	.toHaveAttribute('href', `${getConfig().LMS_BASE_URL}/dashboard`);

	expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${process.env.ACCOUNT_PROFILE_URL}/u/${username}`);
	expect(screen.getByText(messages.profile.defaultMessage)).toHaveAttribute('href', `${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`);

	expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', process.env.ACCOUNT_SETTINGS_URL);
	expect(screen.getByText(messages.account.defaultMessage)).toHaveAttribute('href', getConfig().ACCOUNT_SETTINGS_URL);

	expect(screen.getByText(messages.orderHistory.defaultMessage)).toHaveAttribute('href', process.env.ORDER_HISTORY_URL);
	expect(screen.getByText(messages.orderHistory.defaultMessage)).toHaveAttribute('href', getConfig().ORDER_HISTORY_URL);

	expect(screen.getByText(messages.signOut.defaultMessage)).toHaveAttribute('href', process.env.LOGOUT_URL);
	expect(screen.getByText(messages.signOut.defaultMessage)).toHaveAttribute('href', getConfig().LOGOUT_URL);

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

Steps to reproduce:

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!

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!

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!

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

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!

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

filippovskii09 commented Nov 5, 2025 •

edited

Loading

codecov bot commented Nov 5, 2025 •

edited

Loading

filippovskii09 Nov 9, 2025 •

edited

Loading

itsjeyd commented Jan 6, 2026 •

edited

Loading