feat: Updated Courseware Search results for SR

src/course-home/courseware-search/CoursewareResultsFilter.jsx

@@ -63,6 +63,7 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
       variant="tabs"
       activeKey={activeKey}
       onSelect={setFilter}
+      aria-label={intl.formatMessage(messages.searchResultsFilterDescription)}
     >
       {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => (
         <Tab key={key} eventKey={key} title={label} data-testid={`courseware-search-results-tabs-${key}`}>

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -141,7 +141,15 @@ const CoursewareSearch = ({ ...sectionProps }) => {
               </Button>
             </div>
           </div>
-          <div className="courseware-search__results" aria-live="polite" data-testid="courseware-search-results">
+          <div
+            key={status}
+            className="courseware-search__results"
+            aria-live="assertive"
+            aria-atomic="true"
+            aria-busy={status === 'loading'}
+            data-testid="courseware-search-results"
+            role={status === 'results' ? 'alert' : 'none'}
+          >
             {status === 'loading' ? (
               <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
                 <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
@@ -157,8 +165,6 @@ const CoursewareSearch = ({ ...sectionProps }) => {
                 {total > 0 ? (
                   <div
                     className="courseware-search__results-summary"
-                    aria-relevant="all"
-                    aria-atomic="true"
                     data-testid="courseware-search-summary"
                   >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
                   </div>

src/course-home/courseware-search/CoursewareSearch.test.jsx

@@ -244,7 +244,7 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
-    it('should show a summary for the results within a container with aria-live="polite"', () => {
+    it('should show a wrapper div with proper aria attributes', () => {
       mockModels({
         searchKeyword: 'fubar',
         total: 1,
@@ -253,7 +253,9 @@ describe('CoursewareSearch', () => {
 
       const results = screen.queryByTestId('courseware-search-results');
 
-      expect(results).toHaveAttribute('aria-live', 'polite');
+      expect(results).toHaveAttribute('aria-live', 'assertive');
+      expect(results).toHaveAttribute('aria-atomic', 'true');
+      expect(results).toHaveAttribute('role', 'alert');
       expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
     });
   });

src/course-home/courseware-search/CoursewareSearchResults.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Folder, TextFields, VideoCamera, Article,
 } from '@openedx/paragon/icons';
@@ -6,6 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { Icon } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import CoursewareSearchEmpty from './CoursewareSearchEmpty';
+import messages from './messages';
 
 const iconTypeMapping = {
   text: TextFields,
@@ -21,6 +22,8 @@ const CoursewareSearchResults = ({ results = [] }) => {
     return <CoursewareSearchEmpty />;
   }
 
+  const { formatMessage } = useIntl();
+
   const baseUrl = `${getConfig().LMS_BASE_URL}`;
 
   return (
@@ -42,24 +45,30 @@ const CoursewareSearchResults = ({ results = [] }) => {
           rel: 'nofollow',
         } : { href: `${baseUrl}${url}` };
 
+        const ariaSeaparator = formatMessage(messages.searchResultsBreadcrumbSeparator);
+        const ariaLocation = location?.length ? formatMessage(messages.searchResultsBreadcrumb, { path: location.join(ariaSeaparator) }) : '';
+
         return (
           <a key={id} className="courseware-search-results__item" {...linkProps}>
             <div className="courseware-search-results__icon"><Icon src={icon} /></div>
             <div className="courseware-search-results__info">
               <div className="courseware-search-results__title">
-                <span>{title}</span>
+                <h3>{title}</h3>
-                {contentHits ? (<em>{contentHits}</em>) : null }
+                {contentHits ? (<em aria-hidden="true">{contentHits}</em>) : null }
               </div>
-              {location?.length ? (
+
-                <ul className="courseware-search-results__breadcrumbs">
+              <div aria-label={ariaLocation}>
-                  {
+                {location?.length ? (
+                  <ul className="courseware-search-results__breadcrumbs" aria-hidden="true">
+                    {
                   // This ignore is necessary because the breadcrumb texts might have duplicates.
                   // The breadcrumbs are not expected to change.
                   // eslint-disable-next-line react/no-array-index-key
                   location.map((breadcrumb, i) => (<li key={`${i}:${breadcrumb}`}><div>{breadcrumb}</div></li>))
                   }
-                </ul>
+                  </ul>
-              ) : null}
+                ) : null}
+              </div>
             </div>
           </a>
         );

src/course-home/courseware-search/__snapshots__/CoursewareSearchResults.test.jsx.snap

@@ -38,24 +38,29 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Demo Course Overview
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Introduction, then Demo Course Overview."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Introduction
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Introduction
-            Demo Course Overview
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Demo Course Overview
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -91,32 +96,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Passing a Course
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           1
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Passing a Course."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            About Exams and Certificates
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              About Exams and Certificates
-            edX Exams
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              edX Exams
-            Passing a Course
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Passing a Course
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -152,29 +164,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Passing a Course
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Passing a Course."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            About Exams and Certificates
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              About Exams and Certificates
-            edX Exams
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              edX Exams
-            Passing a Course
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Passing a Course
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -210,29 +227,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Text Input
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Text input."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Homework - Question Styles
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Homework - Question Styles
-            Text input
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Text input
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -268,29 +290,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Pointing on a Picture
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Pointing on a Picture."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Homework - Question Styles
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Homework - Question Styles
-            Pointing on a Picture
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Pointing on a Picture
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -326,29 +353,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Getting Answers
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Getting Answers."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            About Exams and Certificates
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              About Exams and Certificates
-            edX Exams
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              edX Exams
-            Getting Answers
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Getting Answers
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -384,32 +416,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Welcome!
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           30
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Introduction, then Demo Course Overview, then Introduction: Video and Sequences."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Introduction
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Introduction
-            Demo Course Overview
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Demo Course Overview
-            Introduction: Video and Sequences
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Introduction: Video and Sequences
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -445,29 +484,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Multiple Choice Questions
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Multiple Choice Questions."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Homework - Question Styles
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Homework - Question Styles
-            Multiple Choice Questions
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Multiple Choice Questions
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -503,29 +547,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Numerical Input
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Numerical Input."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Homework - Question Styles
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Homework - Question Styles
-            Numerical Input
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Numerical Input
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -561,32 +610,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Connecting a Circuit and a Circuit Diagram
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           3
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then Video Presentation Styles."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Lesson 1 - Getting Started
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Lesson 1 - Getting Started
-            Video Presentation Styles
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Video Presentation Styles
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -622,29 +678,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           CAPA
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 2: Get Interactive, then Homework - Labs and Demos, then Code Grader."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 2: Get Interactive
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 2: Get Interactive
-            Homework - Labs and Demos
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Homework - Labs and Demos
-            Code Grader
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Code Grader
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -680,29 +741,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Interactive Questions
-        </span>
+        </h3>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then Interactive Questions."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Lesson 1 - Getting Started
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Lesson 1 - Getting Started
-            Interactive Questions
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Interactive Questions
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -738,32 +804,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Blank HTML Page
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           6
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Introduction, then Demo Course Overview, then Introduction: Video and Sequences."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Introduction
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Introduction
-            Demo Course Overview
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Demo Course Overview
-            Introduction: Video and Sequences
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Introduction: Video and Sequences
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -799,32 +872,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Discussion Forums
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           5
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Discussion Forums."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 3: Be Social
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 3: Be Social
-            Lesson 3 - Be Social
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Lesson 3 - Be Social
-            Discussion Forums
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Discussion Forums
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -860,32 +940,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Overall Grade
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           7
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Overall Grade Performance."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            About Exams and Certificates
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              About Exams and Certificates
-            edX Exams
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              edX Exams
-            Overall Grade Performance
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Overall Grade Performance
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -921,32 +1008,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Blank HTML Page
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           3
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Homework - Find Your Study Buddy."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 3: Be Social
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 3: Be Social
-            Lesson 3 - Be Social
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Lesson 3 - Be Social
-            Homework - Find Your Study Buddy
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Homework - Find Your Study Buddy
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -982,32 +1076,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Find Your Study Buddy
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           3
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 3: Be Social, then Homework - Find Your Study Buddy, then Homework - Find Your Study Buddy."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 3: Be Social
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 3: Be Social
-            Homework - Find Your Study Buddy
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Homework - Find Your Study Buddy
-            Homework - Find Your Study Buddy
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Homework - Find Your Study Buddy
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1043,32 +1144,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Be Social
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           4
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Be Social."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 3: Be Social
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 3: Be Social
-            Lesson 3 - Be Social
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Lesson 3 - Be Social
-            Be Social
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              Be Social
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1104,32 +1212,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           EdX Exams
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           4
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: About Exams and Certificates, then edX Exams, then EdX Exams."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            About Exams and Certificates
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              About Exams and Certificates
-            edX Exams
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              edX Exams
-            EdX Exams
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              EdX Exams
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1165,32 +1280,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           When Are Your Exams? 
-        </span>
+        </h3>
-        <em>
+        <em
+          aria-hidden="true"
+        >
           2
         </em>
       </div>
-      <ul
+      <div
-        class="courseware-search-results__breadcrumbs"
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then When Are Your Exams? ."
       >
-        <li>
+        <ul
-          <div>
+          aria-hidden="true"
-            Example Week 1: Getting Started
+          class="courseware-search-results__breadcrumbs"
-          </div>
+        >
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Example Week 1: Getting Started
-            Lesson 1 - Getting Started
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-        <li>
+            <div>
-          <div>
+              Lesson 1 - Getting Started
-            When Are Your Exams? 
+            </div>
-          </div>
+          </li>
-        </li>
+          <li>
-      </ul>
+            <div>
+              When Are Your Exams? 
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1228,10 +1350,13 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           External Course Link Test
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label=""
+      />
     </div>
   </a>
 </div>

src/course-home/courseware-search/courseware-search.scss

@@ -101,6 +101,11 @@
     font-size: 0.875rem;
     color: $black;
 
+    > h3 {
+      font-size: inherit;
+      margin: 0;
+    }
+
     > span {
       display: block;
       overflow: hidden;

src/course-home/courseware-search/messages.ts

@@ -56,7 +56,21 @@ const messages = defineMessages({
     defaultMessage: 'There was an error on the search process. Please try again in a few minutes. If the problem persists, please contact the support team.',
     description: 'Error message to show to the users when there\'s an error with the endpoint or the returned payload format.',
   },
-
+  searchResultsFilterDescription: {
+    id: 'learn.coursewareSearch.searchResultsFilterDescription',
+    defaultMessage: 'Search result filters',
+    description: 'Screen Reader text to describe the filter options.',
+  },
+  searchResultsBreadcrumb: {
+    id: 'learn.coursewareSearch.searchResultsBreadcrumb',
+    defaultMessage: 'Location: {path}.',
+    description: 'Screen Reader text to describe the search result breadcrumbs.',
+  },
+  searchResultsBreadcrumbSeparator: {
+    id: 'learn.searchResultsBreadcrumbSeparator',
+    defaultMessage: ', then ',
+    description: 'Screen Reader text to connect breadcrumb sections. i.e.: "Introduction, then Register, then Something else.',
+  },
   // These are translations for labeling the filters
   'filter:all': {
     id: 'learn.coursewareSearch.filter:all',