From 85b057133546c8496300156743551d578d4e7ada Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Nov 2025 23:36:25 +0000
Subject: [PATCH] feat: update unit title from h3 to h1 for a11y compliance

Co-authored-by: jristau1984 <11785886+jristau1984@users.noreply.github.com>
---
 src/courseware/course/sequence/Unit/index.test.jsx | 13 +++++++++++++
 src/plugin-slots/UnitTitleSlot/index.jsx           |  5 ++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/courseware/course/sequence/Unit/index.test.jsx b/src/courseware/course/sequence/Unit/index.test.jsx
index 0e3a0ff6..e341e90b 100644
--- a/src/courseware/course/sequence/Unit/index.test.jsx
+++ b/src/courseware/course/sequence/Unit/index.test.jsx
@@ -84,6 +84,19 @@ describe('<Unit />', () => {
 
       expect(nextButton).toBeVisible();
     });
+
+    // Test for accessibility compliance: unit title must be an h1 (heading level 1) as the page's primary heading
+    // for screen reader and accessibility compliance.
+    // See: https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/create_html_component.html#the-visual-editor
+    // JIRA: https://2u-internal.atlassian.net/browse/AU-2135
+    it('renders unit title as h1 heading for accessibility', () => {
+      renderComponent(defaultProps);
+
+      const unitTitle = screen.getByRole('heading', { level: 1 });
+
+      expect(unitTitle).toBeInTheDocument();
+      expect(unitTitle.tagName).toBe('H1');
+    });
   });
 
   describe('UnitSuspense', () => {
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
index f753efc9..78767ce1 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -27,7 +27,10 @@ const UnitTitleSlot = ({
     >
       <div className="d-flex justify-content-between">
         <div className="mb-0">
-          <h3 className="h3">{unit.title}</h3>
+          {/* Unit title must be h1 as the page's primary heading for screen reader and accessibility compliance.
+              See: https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/create_html_component.html#the-visual-editor
+              JIRA: https://2u-internal.atlassian.net/browse/AU-2135 */}
+          <h1 className="h3">{unit.title}</h1>
         </div>
         {isEnabledOutlineSidebar && renderUnitNavigation(true)}
       </div>