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,16 +45,21 @@ 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>
+
+              <div aria-label={ariaLocation}>
                 {location?.length ? (
-                <ul className="courseware-search-results__breadcrumbs">
+                  <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.
@@ -61,6 +69,7 @@ const CoursewareSearchResults = ({ results = [] }) => {
                   </ul>
                 ) : null}
               </div>
+            </div>
           </a>
         );
       })}

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

@@ -38,11 +38,15 @@ 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>
+      <div
+        aria-label="Location: Introduction, then Demo Course Overview."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -57,6 +61,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -91,14 +96,20 @@ 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>
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Passing a Course."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -118,6 +129,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -152,11 +164,15 @@ 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>
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Passing a Course."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -176,6 +192,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -210,11 +227,15 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Text Input
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Text input."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -234,6 +255,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -268,11 +290,15 @@ 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>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Pointing on a Picture."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -292,6 +318,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -326,11 +353,15 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Getting Answers
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Getting Answers."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -350,6 +381,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -384,14 +416,20 @@ 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>
+      <div
+        aria-label="Location: Introduction, then Demo Course Overview, then Introduction: Video and Sequences."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -411,6 +449,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -445,11 +484,15 @@ 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>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Multiple Choice Questions."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -469,6 +512,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -503,11 +547,15 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Numerical Input
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Numerical Input."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -527,6 +575,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -561,14 +610,20 @@ 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>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then Video Presentation Styles."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -588,6 +643,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -622,11 +678,15 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           CAPA
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label="Location: Example Week 2: Get Interactive, then Homework - Labs and Demos, then Code Grader."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -646,6 +706,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -680,11 +741,15 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Interactive Questions
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then Interactive Questions."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -704,6 +769,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -738,14 +804,20 @@ 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>
+      <div
+        aria-label="Location: Introduction, then Demo Course Overview, then Introduction: Video and Sequences."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -765,6 +837,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -799,14 +872,20 @@ 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>
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Discussion Forums."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -826,6 +905,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -860,14 +940,20 @@ 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>
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Overall Grade Performance."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -887,6 +973,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -921,14 +1008,20 @@ 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>
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Homework - Find Your Study Buddy."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -948,6 +1041,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -982,14 +1076,20 @@ 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>
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Homework - Find Your Study Buddy, then Homework - Find Your Study Buddy."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -1009,6 +1109,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -1043,14 +1144,20 @@ 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>
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Be Social."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -1070,6 +1177,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -1104,14 +1212,20 @@ 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>
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then EdX Exams."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -1131,6 +1245,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -1165,14 +1280,20 @@ 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>
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then When Are Your Exams? ."
+      >
         <ul
+          aria-hidden="true"
           class="courseware-search-results__breadcrumbs"
         >
           <li>
@@ -1192,6 +1313,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           </li>
         </ul>
       </div>
+    </div>
   </a>
   <a
     class="courseware-search-results__item"
@@ -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',