Associate search input with visible heading label

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

@@ -110,12 +110,13 @@ const CoursewareSearchModal = ({ ...sectionProps }) => {
       <div className="courseware-search__outer-content">
         <div className="courseware-search__content" data-testid="courseware-search-content">
           <div className="courseware-search__form">
-            <h1 className="h2">{formatMessage(messages.searchModuleTitle)}</h1>
+            <h1 className="h2" id="courseware-search-title">{formatMessage(messages.searchModuleTitle)}</h1>
             <CoursewareSearchForm
               searchTerm={searchKeyword}
               onSubmit={handleSubmit}
               onChange={handleOnChange}
               placeholder={formatMessage(messages.searchBarPlaceholderText)}
+              labelledBy="courseware-search-title"
             />
             <div className="courseware-search__close">
               <Button

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

@@ -109,6 +109,12 @@ describe('CoursewareSearch', () => {
       const section = screen.getByTestId('courseware-search-dialog');
       expect(section.style.getPropertyValue('--modal-top-position')).toBe(`${tabsTopPosition}px`);
     });
+
+    it('should expose the visible heading as the search input\'s accessible name', async () => {
+      renderComponent();
+      const input = await screen.findByRole('searchbox', { name: /search this course/i });
+      expect(input).toBeInTheDocument();
+    });
   });
 
   describe('when clicking on the "Close" button', () => {

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

@@ -8,6 +8,7 @@ const CoursewareSearchForm = ({
   onSubmit,
   onChange,
   placeholder,
+  labelledBy,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -25,8 +26,8 @@ const CoursewareSearchForm = ({
       }}
     >
       <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
-        <SearchField.Label />
-        <SearchField.Input placeholder={placeholder} autoFocus />
+        {/* The visible "Search this course" heading is the accessible label via aria-labelledby. */}
+        <SearchField.Input placeholder={placeholder} aria-labelledby={labelledBy} autoFocus />
         <SearchField.ClearButton />
       </div>
       <SearchField.SubmitButton
@@ -43,13 +44,15 @@ CoursewareSearchForm.propTypes = {
   onSubmit: PropTypes.func,
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
+  labelledBy: PropTypes.string,
 };
 
 CoursewareSearchForm.defaultProps = {
   searchTerm: undefined,
   onSubmit: undefined,
   onChange: undefined,
   placeholder: undefined,
+  labelledBy: undefined,
 };
 
 export default CoursewareSearchForm;

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

@@ -9,11 +9,12 @@ import {
 } from '../../setupTest';
 import CoursewareSearchForm from './CoursewareSearchForm';
 
-function renderComponent(placeholder, onSubmit, onChange) {
+function renderComponent(placeholder, onSubmit, onChange, labelledBy) {
   const { container } = render(<CoursewareSearchForm
     placeholder={placeholder}
     onSubmit={onSubmit}
     onChange={onChange}
+    labelledBy={labelledBy}
   />);
   return container;
 }
@@ -54,6 +55,19 @@ describe('CoursewareSearchToggle', () => {
     });
   });
 
+  it('should associate the input with an external label via aria-labelledby', async () => {
+    await act(async () => renderComponent(placeholderText, onSubmitHandlerMock, onChangeHandlerMock, 'external-id'));
+    const input = await screen.findByRole('searchbox');
+    expect(input).toHaveAttribute('aria-labelledby', 'external-id');
+  });
+
+  it('should not render a visually-hidden duplicate "Search" label', async () => {
+    let container;
+    await act(async () => { container = renderComponent(placeholderText, onSubmitHandlerMock, onChangeHandlerMock, 'external-id'); });
+    // Guards against re-introducing <SearchField.Label />, which renders an sr-only duplicate label.
+    expect(container.querySelector('label.sr-only, label .sr-only')).toBeNull();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });

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

@@ -33,8 +33,8 @@ const messages = defineMessages({
   },
   searchBarPlaceholderText: {
     id: 'learn.coursewareSearch.searchBarPlaceholderText',
-    defaultMessage: 'Search',
-    description: 'Placeholder text for the Courseware Search input control',
+    defaultMessage: 'Find topics across this course',
+    description: 'Placeholder hint shown inside the Courseware Search input describing what can be searched.',
   },
   loading: {
     id: 'learn.coursewareSearch.loading',