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 1/2] 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>

From bfefacb9402ae81d74bdd9958c6673b4fb1bcc5f Mon Sep 17 00:00:00 2001
From: nsprenkle <nsprenkle@2u.com>
Date: Tue, 2 Dec 2025 15:14:18 -0500
Subject: [PATCH 2/2] feat: give unit title unique CSS class, preserving
 existing size

---
 src/index.scss                           | 5 +++++
 src/plugin-slots/UnitTitleSlot/index.jsx | 5 +----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 9830be4f..14831d54 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -302,6 +302,11 @@
     padding-left: 40px;
     padding-right: 40px;
   }
+
+  // Unit title is styled as an H3
+  .unit-title {
+    font-size: var(--pgn-typography-font-size-h3-base);
+  }
 }
 
 .unit-iframe-wrapper {
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
index 78767ce1..237f35e0 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -27,10 +27,7 @@ const UnitTitleSlot = ({
     >
       <div className="d-flex justify-content-between">
         <div className="mb-0">
-          {/* 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>
+          <h1 className="unit-title">{unit.title}</h1>
         </div>
         {isEnabledOutlineSidebar && renderUnitNavigation(true)}
       </div>