From 011973971c406d0b68481f31863044036eb88db0 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Wed, 5 Nov 2025 15:14:59 +0200
Subject: [PATCH 1/3] feat: accessibility HTML attributes for Course Navigation
 top bar

---
 src/course-home/live-tab/LiveTab.jsx          |  1 +
 .../SequenceNavigation.jsx                    |  8 +-
 .../SequenceNavigation.test.jsx               | 32 ++++++-
 .../SequenceNavigationDropdown.test.jsx       |  4 +-
 .../SequenceNavigationTabs.jsx                |  1 +
 .../SequenceNavigationTabs.test.jsx           | 88 ++++++++++++++++++-
 .../sequence-navigation/UnitButton.jsx        |  3 +
 .../sequence-navigation/UnitButton.test.jsx   | 51 ++++++++++-
 8 files changed, 177 insertions(+), 11 deletions(-)

diff --git a/src/course-home/live-tab/LiveTab.jsx b/src/course-home/live-tab/LiveTab.jsx
index 05a470e038..eccbf60db9 100644
--- a/src/course-home/live-tab/LiveTab.jsx
+++ b/src/course-home/live-tab/LiveTab.jsx
@@ -13,6 +13,7 @@ const LiveTab = () => {
   return (
     <div
       id="live_tab"
+      role="region"
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: liveModel[courseId]?.iframe }}
     />
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 81cd5a6bc7..9aebfa7831 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -101,7 +101,13 @@ const SequenceNavigation = ({
   };
 
   return sequenceStatus === LOADED ? (
-    <nav id="courseware-sequence-navigation" data-testid="courseware-sequence-navigation" className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}>
+    <nav
+      id="courseware-sequence-navigation"
+      data-testid="courseware-sequence-navigation"
+      className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}
+      style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}
+      aria-label="course sequence tabs"
+    >
       {renderPreviousButton()}
       {renderUnitButtons()}
       {renderNextButton()}
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
index 9b088bb6d7..2480fbe973 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+
 import {
   render, screen, fireEvent, getByText, initializeTestStore,
 } from '../../../../setupTest';
@@ -10,6 +12,15 @@ import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastV
 jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
 useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
 
+jest.mock('@openedx/paragon', () => {
+  const original = jest.requireActual('@openedx/paragon');
+  return {
+    ...original,
+    breakpoints: original.breakpoints,
+    useWindowSize: jest.fn(),
+  };
+});
+
 describe('Sequence Navigation', () => {
   let mockData;
   const courseMetadata = Factory.build('courseMetadata');
@@ -29,6 +40,7 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextHandler: () => {},
     };
+    useWindowSize.mockReturnValue({ width: 1024, height: 800 });
   });
 
   it('is empty while loading', async () => {
@@ -76,7 +88,7 @@ describe('Sequence Navigation', () => {
     const onNavigate = jest.fn();
     render(<SequenceNavigation {...mockData} {...{ onNavigate }} />, { wrapWithRouter: true });
 
-    const unitButtons = screen.getAllByRole('link', { name: /\d+/ });
+    const unitButtons = screen.getAllByRole('tab', { name: /\d+/ });
     expect(unitButtons).toHaveLength(unitButtons.length);
     unitButtons.forEach(button => fireEvent.click(button));
     expect(onNavigate).toHaveBeenCalledTimes(unitButtons.length);
@@ -209,4 +221,22 @@ describe('Sequence Navigation', () => {
     );
     expect(screen.queryByRole('link', { name: /next/i })).not.toBeInTheDocument();
   });
+
+  it('shows previous button without label when screen is small', () => {
+    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth - 1 });
+
+    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+
+    const prevButton = screen.getByRole('button');
+    expect(prevButton.textContent).toBe('2 of 3');
+  });
+
+  it('does not set width when screen is large', () => {
+    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
+
+    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+
+    const nav = screen.getByRole('navigation', { name: /course sequence tabs/i });
+    expect(nav).not.toHaveStyle({ width: '90%' });
+  });
 });
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
index acda574105..ee0298801f 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
@@ -50,7 +50,7 @@ describe('Sequence Navigation Dropdown', () => {
       });
       const dropdownMenu = container.querySelector('.dropdown-menu');
       // Only the current unit should be marked as active.
-      getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => {
+      getAllByRole(dropdownMenu, 'tab', { hidden: true }).forEach(button => {
         if (button.textContent === unit.display_name) {
           expect(button).toHaveClass('active');
         } else {
@@ -72,7 +72,7 @@ describe('Sequence Navigation Dropdown', () => {
       fireEvent.click(dropdownToggle);
     });
     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));
     expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
     unitBlocks.forEach((unit, index) => {
       expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx
index 7304de5401..6ae075d8e9 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx
@@ -38,6 +38,7 @@ const SequenceNavigationTabs = ({
         <div
           className="sequence-navigation-tabs d-flex flex-grow-1"
           style={shouldDisplayDropdown ? invisibleStyle : null}
+          role="tablist"
           ref={containerRef}
         >
           {unitIds.map(buttonUnitId => (
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
index 22631d9040..f30b3b0486 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Factory } from 'rosie';
 import { getAllByRole } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -6,10 +5,23 @@ import userEvent from '@testing-library/user-event';
 import { initializeTestStore, render, screen } from '../../../../setupTest';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
+import {
+  useIsSidebarOpen,
+  useIsOnXLDesktop,
+  useIsOnLargeDesktop,
+  useIsOnMediumDesktop,
+} from './hooks';
 
 // Mock the hook to avoid relying on its implementation and mocking `getBoundingClientRect`.
 jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
 
+jest.mock('./hooks', () => ({
+  useIsSidebarOpen: jest.fn(),
+  useIsOnXLDesktop: jest.fn(),
+  useIsOnLargeDesktop: jest.fn(),
+  useIsOnMediumDesktop: jest.fn(),
+}));
+
 describe('Sequence Navigation Tabs', () => {
   let mockData;
 
@@ -44,7 +56,7 @@ describe('Sequence Navigation Tabs', () => {
     useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
     render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
 
-    expect(screen.getAllByRole('link')).toHaveLength(unitBlocks.length);
+    expect(screen.getAllByRole('tab')).toHaveLength(unitBlocks.length);
   });
 
   it('renders unit buttons and dropdown button', async () => {
@@ -54,7 +66,7 @@ describe('Sequence Navigation Tabs', () => {
     const booyah = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
 
     // wait for links to appear so we aren't testing an empty div
-    await screen.findAllByRole('link');
+    await screen.findAllByRole('tab');
 
     container = booyah.container;
 
@@ -62,9 +74,77 @@ describe('Sequence Navigation Tabs', () => {
     await userEvent.click(dropdownToggle);
 
     const dropdownMenu = container.querySelector('.dropdown');
-    const dropdownButtons = getAllByRole(dropdownMenu, 'link');
+    const dropdownButtons = getAllByRole(dropdownMenu, 'tab');
     expect(dropdownButtons).toHaveLength(unitBlocks.length);
     expect(screen.getByRole('button', { name: `${activeBlockNumber} of ${unitBlocks.length}` }))
       .toHaveClass('dropdown-toggle');
   });
+
+  it('adds class navigation-tab-width-xl when isOnXLDesktop and sidebar is open', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(true);
+    useIsOnLargeDesktop.mockReturnValue(false);
+    useIsOnMediumDesktop.mockReturnValue(false);
+    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+
+    const { container } = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const wrapperDiv = container.querySelector('.navigation-tab-width-xl');
+    expect(wrapperDiv).toBeInTheDocument();
+  });
+
+  it('adds class navigation-tab-width-large when isOnLargeDesktop and sidebar is open', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(false);
+    useIsOnLargeDesktop.mockReturnValue(true);
+    useIsOnMediumDesktop.mockReturnValue(false);
+    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+
+    const { container } = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const wrapperDiv = container.querySelector('.navigation-tab-width-large');
+    expect(wrapperDiv).toBeInTheDocument();
+  });
+
+  it('adds class navigation-tab-width-medium when isOnMediumDesktop and sidebar is open', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(false);
+    useIsOnLargeDesktop.mockReturnValue(false);
+    useIsOnMediumDesktop.mockReturnValue(true);
+    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+
+    const { container } = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const wrapperDiv = container.querySelector('.navigation-tab-width-medium');
+    expect(wrapperDiv).toBeInTheDocument();
+  });
+
+  it('applies invisibleStyle when shouldDisplayDropdown is true', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(false);
+    useIsOnLargeDesktop.mockReturnValue(false);
+    useIsOnMediumDesktop.mockReturnValue(false);
+
+    useIndexOfLastVisibleChild.mockReturnValue([
+      0,
+      null,
+      {
+        position: 'absolute',
+        left: '0px',
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        maxWidth: '100%',
+      },
+    ]);
+
+    render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const tabList = screen.getByRole('tablist');
+
+    expect(tabList.style.position).toBe('absolute');
+    expect(tabList.style.left).toBe('0px');
+    expect(tabList.style.pointerEvents).toBe('none');
+    expect(tabList.style.visibility).toBe('hidden');
+    expect(tabList.style.maxWidth).toBe('100%');
+  });
 });
diff --git a/src/courseware/course/sequence/sequence-navigation/UnitButton.jsx b/src/courseware/course/sequence/sequence-navigation/UnitButton.jsx
index dbb3758295..251795d713 100644
--- a/src/courseware/course/sequence/sequence-navigation/UnitButton.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitButton.jsx
@@ -39,6 +39,9 @@ const UnitButton = ({
       variant="link"
       onClick={handleClick}
       title={title}
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={title}
       as={Link}
       to={unitPath}
     >
diff --git a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
index 7a1fdd8b87..3921cf9309 100644
--- a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
@@ -5,9 +5,22 @@ import {
 } from '../../../../setupTest';
 import UnitButton from './UnitButton';
 
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useLocation: () => ({ pathname: '/preview/anything' }),
+  };
+});
+
 describe('Unit Button', () => {
   let mockData;
   const courseMetadata = Factory.build('courseMetadata');
+
+  afterEach(() => {
+    jest.resetModules();
+  });
+
   const unitBlocks = [Factory.build(
     'block',
     { type: 'problem' },
@@ -33,12 +46,12 @@ describe('Unit Button', () => {
 
   it('hides title by default', () => {
     render(<UnitButton {...mockData} />, { wrapWithRouter: true });
-    expect(screen.getByRole('link')).not.toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('tab')).not.toHaveTextContent(unit.display_name);
   });
 
   it('shows title', () => {
     render(<UnitButton {...mockData} showTitle />, { wrapWithRouter: true });
-    expect(screen.getByRole('link')).toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('tab')).toHaveTextContent(unit.display_name);
   });
 
   it('does not show completion for non-completed unit', () => {
@@ -79,7 +92,39 @@ describe('Unit Button', () => {
   it('handles the click', () => {
     const onClick = jest.fn();
     render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
-    fireEvent.click(screen.getByRole('link'));
+    fireEvent.click(screen.getByRole('tab'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('calls onClick with correct unitId when clicked', () => {
+    const onClick = jest.fn();
+    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
+
+    fireEvent.click(screen.getByRole('tab'));
+
+    expect(onClick).toHaveBeenCalledWith(mockData.unitId);
+  });
+
+  it('renders with no unitId and does not crash', async () => {
+    render(<UnitButton unitId={undefined} onClick={jest.fn()} contentType="video" title="Unit" />, {
+      wrapWithRouter: true,
+    });
+
+    expect(screen.getByRole('tab')).toBeInTheDocument();
+  });
+
+  it('prepends /preview to the unit path if in preview mode', () => {
+    const onClick = jest.fn();
+
+    render(
+      <UnitButton {...mockData} onClick={onClick} />,
+      {
+        wrapWithRouter: true,
+        initialEntries: ['/preview/some/path'],
+      },
+    );
+
+    const button = screen.getByRole('tab');
+    expect(button.closest('a')).toHaveAttribute('href', expect.stringContaining('/preview/course/'));
+  });
 });

From b35cb902881f5fda074f8a60a979e3cb6a016fff Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Fri, 7 Nov 2025 10:03:49 +0200
Subject: [PATCH 2/3] fix: fix  discussions and some refactor

---
 .../SequenceNavigation.jsx                    |  4 +-
 .../SequenceNavigation.test.jsx               | 48 ++++++++++++-------
 .../SequenceNavigationDropdown.test.jsx       | 12 ++++-
 .../sequence-navigation/UnitButton.test.jsx   | 14 +++---
 .../sequence/sequence-navigation/messages.ts  |  5 ++
 5 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 9aebfa7831..8f6461af7e 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -85,6 +85,8 @@ const SequenceNavigation = ({
     } else if (!shouldDisplayNotificationTriggerInSequence) {
       buttonText = intl.formatMessage(messages.nextButton);
     }
+
+    if (!buttonText) { return null; }
     return navigationDisabledNextSequence || (
       <NextUnitTopNavTriggerSlot
         {...{
@@ -106,7 +108,7 @@ const SequenceNavigation = ({
       data-testid="courseware-sequence-navigation"
       className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}
       style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}
-      aria-label="course sequence tabs"
+      aria-label={intl.formatMessage(messages.sequenceNavLabel)}
     >
       {renderPreviousButton()}
       {renderUnitButtons()}
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
index 2480fbe973..4650318c75 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
@@ -1,26 +1,18 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { breakpoints } from '@openedx/paragon';
 
 import {
   render, screen, fireEvent, getByText, initializeTestStore,
 } from '../../../../setupTest';
 import SequenceNavigation from './SequenceNavigation';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
+import messages from './messages';
 
 // Mock the hook to avoid relying on its implementation and mocking `getBoundingClientRect`.
 jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
 useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
 
-jest.mock('@openedx/paragon', () => {
-  const original = jest.requireActual('@openedx/paragon');
-  return {
-    ...original,
-    breakpoints: original.breakpoints,
-    useWindowSize: jest.fn(),
-  };
-});
-
 describe('Sequence Navigation', () => {
   let mockData;
   const courseMetadata = Factory.build('courseMetadata');
@@ -40,7 +32,19 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextHandler: () => {},
     };
-    useWindowSize.mockReturnValue({ width: 1024, height: 800 });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
   });
 
   it('is empty while loading', async () => {
@@ -223,20 +227,28 @@ describe('Sequence Navigation', () => {
   });
 
   it('shows previous button without label when screen is small', () => {
-    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth - 1 });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: breakpoints.small.minWidth - 1,
+    });
 
-    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+    const { container } = render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
 
-    const prevButton = screen.getByRole('button');
-    expect(prevButton.textContent).toBe('2 of 3');
+    const prevButton = container.querySelector('.previous-btn');
+    expect(prevButton).toBeInTheDocument();
+    expect(screen.queryByText(messages.previousButton.defaultMessage)).not.toBeInTheDocument();
   });
 
   it('does not set width when screen is large', () => {
-    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
-
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: breakpoints.small.minWidth,
+    });
     render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
 
-    const nav = screen.getByRole('navigation', { name: /course sequence tabs/i });
+    const nav = screen.getByRole('navigation', { name: messages.sequenceNavLabel.defaultMessage });
     expect(nav).not.toHaveStyle({ width: '90%' });
   });
 });
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
index ee0298801f..e089a4ff2e 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Factory } from 'rosie';
 import { getAllByRole } from '@testing-library/dom';
 import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import {
   render, screen, fireEvent, initializeTestStore,
@@ -60,7 +62,7 @@ describe('Sequence Navigation Dropdown', () => {
     });
   });
 
-  it('handles the clicks', () => {
+  it('handles the clicks', async () => {
     const onNavigate = jest.fn();
     const { container } = render(
       <SequenceNavigationDropdown {...mockData} onNavigate={onNavigate} />,
@@ -72,7 +74,13 @@ describe('Sequence Navigation Dropdown', () => {
       fireEvent.click(dropdownToggle);
     });
     const dropdownMenu = container.querySelector('.dropdown-menu');
-    getAllByRole(dropdownMenu, 'tab', { hidden: true }).forEach(button => fireEvent.click(button));
+    const buttons = getAllByRole(dropdownMenu, 'tab', { hidden: true });
+
+    for (const button of buttons) {
+      // eslint-disable-next-line no-await-in-loop
+      await userEvent.click(button);
+    }
+
     expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
     unitBlocks.forEach((unit, index) => {
       expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);
diff --git a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
index 3921cf9309..6161db4e6f 100644
--- a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import userEvent from '@testing-library/user-event';
+
 import {
-  fireEvent, initializeTestStore, render, screen,
-} from '../../../../setupTest';
+  initializeTestStore, render, screen,
+} from '@src/setupTest';
 import UnitButton from './UnitButton';
 
 jest.mock('react-router-dom', () => {
@@ -89,18 +91,18 @@ describe('Unit Button', () => {
     expect(bookmarkIcon.getAttribute('data-testid')).toBe('bookmark-icon');
   });
 
-  it('handles the click', () => {
+  it('handles the click', async () => {
     const onClick = jest.fn();
     render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
-    fireEvent.click(screen.getByRole('tab'));
+    await userEvent.click(screen.getByRole('tab'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onClick with correct unitId when clicked', () => {
+  it('calls onClick with correct unitId when clicked', async () => {
     const onClick = jest.fn();
     render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
 
-    fireEvent.click(screen.getByRole('tab'));
+    await userEvent.click(screen.getByRole('tab'));
 
     expect(onClick).toHaveBeenCalledWith(mockData.unitId);
   });
diff --git a/src/courseware/course/sequence/sequence-navigation/messages.ts b/src/courseware/course/sequence/sequence-navigation/messages.ts
index 9d99fdd441..df8c4778ac 100644
--- a/src/courseware/course/sequence/sequence-navigation/messages.ts
+++ b/src/courseware/course/sequence/sequence-navigation/messages.ts
@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Previous',
     description: 'Button to return to the previous section',
   },
+  sequenceNavLabel: {
+    id: 'learn.sequence.navigation.aria.label',
+    defaultMessage: 'Course sequence tabs',
+    description: 'Accessibility label for the courseware sequence navigation bar',
+  },
 });
 
 export default messages;

From f6408fd17c533a1b5a88eba45f7fde563a110210 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Fri, 7 Nov 2025 10:20:37 +0200
Subject: [PATCH 3/3] fix: remove extra code

---
 .../course/sequence/sequence-navigation/SequenceNavigation.jsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 8f6461af7e..76c9bd2d31 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -86,7 +86,6 @@ const SequenceNavigation = ({
       buttonText = intl.formatMessage(messages.nextButton);
     }
 
-    if (!buttonText) { return null; }
     return navigationDisabledNextSequence || (
       <NextUnitTopNavTriggerSlot
         {...{