feat: improved accessibility for Show/Hide Accordions

src/course-home/live-tab/LiveTab.jsx

@@ -13,6 +13,7 @@ const LiveTab = () => {
   return (
     <div
       id="live_tab"
+      role="region"
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: liveModel[courseId]?.iframe }}
     />

src/course-home/live-tab/LiveTab.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useSelector } from 'react-redux';
+import LiveTab from './LiveTab';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+describe('LiveTab', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('renders iframe from liveModel using dangerouslySetInnerHTML', () => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<iframe id="lti-tab-embed" src="about:blank"></iframe>',
+          },
+        },
+      },
+    }));
+
+    render(<LiveTab />);
+
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe).toBeInTheDocument();
+    expect(iframe.src).toBe('about:blank');
+  });
+
+  it('adds classes to iframe after mount', () => {
+    document.body.innerHTML = `
+      <div id="live_tab">
+        <iframe id="lti-tab-embed" class=""></iframe>
+      </div>
+    `;
+
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<iframe id="lti-tab-embed"></iframe>',
+          },
+        },
+      },
+    }));
+
+    render(<LiveTab />);
+
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe.className).toContain('vh-100');
+    expect(iframe.className).toContain('w-100');
+    expect(iframe.className).toContain('border-0');
+  });
+
+  it('does not throw if iframe is not found in DOM', () => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<div>No iframe here</div>',
+          },
+        },
+      },
+    }));
+
+    expect(() => render(<LiveTab />)).not.toThrow();
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe).toBeNull();
+  });
+});

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.scss

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

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

@@ -35,7 +35,9 @@ const SectionTitle: React.FC<Props> = ({ complete, hideFromTOC, title }) => {
         )}
       </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/index.scss

@@ -446,12 +446,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;
     }
@@ -466,6 +466,8 @@
 @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/upsell-bullets/UpsellBullets.scss";
 @import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss";
 @import "course-home/outline-tab/widgets/FlagButton.scss";
 @import "course-home/progress-tab/course-completion/CompletionDonutChart.scss";

src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx

@@ -15,7 +15,7 @@ const CourseHomeSectionOutlineSlot: React.FC<Props> = ({
     id="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}