feat: improved accessibility for Show/Hide Accordions

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -132,6 +132,22 @@ describe('Outline Tab', () => {
       expect(expandedSectionNode).toHaveAttribute('aria-expanded', 'true');
     });
 
+    it('exposes expanded section title as a level 2 heading', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setTabData({ course_blocks: { blocks: courseBlocks.blocks } });
+      await fetchAndRender();
+      expect(screen.getByRole('heading', { level: 2, name: 'Title of Section' })).toBeInTheDocument();
+    });
+
+    it('checks that the expanded section is within the correct list', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setTabData({ course_blocks: { blocks: courseBlocks.blocks } });
+      await fetchAndRender();
+      const listElement = screen.getByRole('presentation', { id: 'courseHome-outline' });
+      expect(listElement).toBeInTheDocument();
+      expect(listElement.tagName).toBe('OL');
+    });
+
     it('includes outline_tab_notifications_slot', async () => {
       const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
       setTabData({

src/course-home/outline-tab/section-outline/Section.tsx

@@ -53,6 +53,7 @@ const Section: React.FC<Props> = ({
 
   return (
     <li>
+      <h2 className="sr-only">{title}</h2>
       <Collapsible
         className="mb-2"
         styling="card-lg"

src/index.scss

@@ -436,12 +436,12 @@
   .course-outline-tab .pgn__card {
     .pgn__card-header {
       display: block;
-  
+
       .pgn__card-header-content {
         margin-top: 0;
       }
     }
-    
+
     .pgn__card-header-actions {
       margin-left: 0;
     }

src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx

@@ -16,7 +16,7 @@ const CourseHomeSectionOutlineSlot: React.FC<Props> = ({
     idAliases={['course_home_section_outline_slot']}
     pluginProps={{ expandAll, sectionIds, sections }}
   >
-    <ol id="courseHome-outline" className="list-unstyled">
+    <ol id="courseHome-outline" className="list-unstyled" role="presentation">
       {sectionIds.map((sectionId) => (
         <Section
           key={sectionId}