Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update unit title from h3 to h1 for a11y compliance

Browse Source 
Co-authored-by: jristau1984 <11785886+jristau1984@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2025-11-18 23:36:25 +00:00
committed by nsprenkle
parent c13f118ac2
commit 85b0571335
2 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/courseware/course/sequence/Unit/index.test.jsx
View File

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

5
src/plugin-slots/UnitTitleSlot/index.jsx
View File

@@ -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>