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('', () => {
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/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 f753efc9..237f35e0 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -27,7 +27,7 @@ const UnitTitleSlot = ({
>
-
{unit.title}
+ {unit.title}
{isEnabledOutlineSidebar && renderUnitNavigation(true)}