Merge pull request #31 from edx/copilot/update-unit-title-heading

feat: change Unit title from h3 to h1 for accessibility compliance

Author: jristau1984

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', () => {

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 {

src/plugin-slots/UnitTitleSlot/index.jsx

@@ -27,7 +27,7 @@ const UnitTitleSlot = ({
     >
       <div className="d-flex justify-content-between">
         <div className="mb-0">
-          <h3 className="h3">{unit.title}</h3>
+          <h1 className="unit-title">{unit.title}</h1>
         </div>
         {isEnabledOutlineSidebar && renderUnitNavigation(true)}
       </div>