feat: improved accessibility for Show/Hide Accordions

Author: vladislavkeblysh

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

@@ -172,7 +172,7 @@ const OutlineTab = () => {
                   </Button>
                 </div>
               </div>
-              <ol id="courseHome-outline" className="list-unstyled">
+              <ol id="courseHome-outline" className="list-unstyled" role="presentation">
                 {courses[rootCourseId].sectionIds.map((sectionId) => (
                   <Section
                     key={sectionId}

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

@@ -132,6 +132,24 @@ describe('Outline Tab', () => {
       expect(expandedSectionNode).toHaveAttribute('aria-expanded', 'true');
     });
 
+    it('displays correct heading for expanded section', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setTabData({ course_blocks: { blocks: courseBlocks.blocks } });
+      await fetchAndRender();
+      const headingContent = screen.getByText('Title of Section');
+      const { parentElement } = headingContent;
+      expect(parentElement.tagName).toBe('H2');
+    });
+
+    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.jsx

@@ -65,7 +65,9 @@ const Section = ({
         )}
       </div>
       <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle col-6">{title}</span>
+        <h2 className="course-outline-tab-section-title text-dark-500 mb-0">
+          <span className="align-middle col-6">{title}</span>
+        </h2>
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>

src/course-home/outline-tab/Section.scss

@@ -0,0 +1,4 @@
+.course-outline-tab-section-title {
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+}

src/index.scss

@@ -469,6 +469,7 @@
 @import "courseware/course/content-tools/calculator/calculator.scss";
 @import "courseware/course/content-tools/contentTools.scss";
 @import "course-home/dates-tab/timeline/Day.scss";
+@import "course-home/outline-tab/Section.scss";
 @import "generic/upgrade-notification/UpgradeNotification.scss";
 @import "generic/upsell-bullets/UpsellBullets.scss";
 @import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss";