fix: Updated a11y on Courseware Search results. (#1620)

Author: rijuma

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

@@ -141,32 +141,32 @@ const CoursewareSearch = ({ ...sectionProps }) => {
               </Button>
             </div>
           </div>
-
-          {status === 'loading' ? (
-            <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
-              <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
-            </div>
-          ) : null}
-          {status === 'error' && (
-            <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
-              {formatMessage(messages.searchResultsError)}
-            </Alert>
-          )}
-          {status === 'results' ? (
-            <>
-              {total > 0 ? (
-                <div
-                  className="courseware-search__results-summary"
-                  aria-live="polite"
-                  aria-relevant="all"
-                  aria-atomic="true"
-                  data-testid="courseware-search-summary"
-                >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
-                </div>
-              ) : null}
-              <CoursewareSearchResultsFilterContainer />
-            </>
-          ) : null}
+          <div className="courseware-search__results" aria-live="polite" data-testid="courseware-search-results">
+            {status === 'loading' ? (
+              <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
+                <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
+              </div>
+            ) : null}
+            {status === 'error' && (
+              <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
+                {formatMessage(messages.searchResultsError)}
+              </Alert>
+            )}
+            {status === 'results' ? (
+              <>
+                {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>
+                ) : null}
+                <CoursewareSearchResultsFilterContainer />
+              </>
+            ) : null}
+          </div>
         </div>
       </div>
     </dialog>

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

@@ -9,6 +9,7 @@ import {
   screen,
   waitFor,
   fireEvent,
+  within,
 } from '../../setupTest';
 import { CoursewareSearch } from './index';
 import { useElementBoundingBox, useLockScroll, useCoursewareSearchParams } from './hooks';
@@ -243,14 +244,17 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
-    it('should show a summary for the results', () => {
+    it('should show a summary for the results within a container with aria-live="polite"', () => {
       mockModels({
         searchKeyword: 'fubar',
         total: 1,
       });
       renderComponent();
 
-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
+      const results = screen.queryByTestId('courseware-search-results');
+
+      expect(results).toHaveAttribute('aria-live', 'polite');
+      expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
     });
   });