richie-education 2.33.1-dev11 → 2.33.1-dev14

package/js/components/SearchInput/index.spec.tsx

@@ -10,14 +10,15 @@ describe('<SearchInput />', () => {
 
   const inputProps = {};
 
-  it('renders with the input field and button', () => {
-    const { container, getByText } = render(
+  it('renders with the input field, label and button', () => {
+    const { container, getByRole, getByLabelText } = render(
       <IntlProvider locale="en">
         <SearchInput context={contextProps} inputProps={inputProps} />
       </IntlProvider>,
     );
 
-    getByText('Search');
+    getByRole('button', { name: 'Search' });
+    getByLabelText('Search');
     // NB: we're searching the DOM as labelling and a11y for this input are handled by `react-autosuggest`
     expect(container.querySelector('input')).not.toBeNull();
     expect(container.innerHTML).toContain('icon-magnifying-glass');
@@ -26,13 +27,13 @@ describe('<SearchInput />', () => {
   it('triggers the passed callback on click', () => {
     const callback = jest.fn();
 
-    const { getByText } = render(
+    const { getByRole } = render(
       <IntlProvider locale="en">
         <SearchInput context={contextProps} inputProps={inputProps} onClick={callback} />
       </IntlProvider>,
     );
 
-    fireEvent.click(getByText('Search'));
+    fireEvent.click(getByRole('button', { name: 'Search' }));
     expect(callback).toHaveBeenCalledTimes(1);
   });
 });

package/js/components/SearchInput/index.tsx

@@ -9,6 +9,11 @@ const messages = defineMessages({
     description: 'Accessibility text for the search button inside the Search input.',
     id: 'components.SearchInput.button',
   },
+  label: {
+    defaultMessage: 'Search',
+    description: 'Accessibility text for the search input label.',
+    id: 'components.SearchInput.label',
+  },
 });
 
 /**
@@ -23,7 +28,10 @@ export const SearchInput = ({
   onClick = () => {}, // by default, do nothing, this will just remove focus and close suggestions
 }: { inputProps: any; onClick?: () => void } & CommonDataProps) => (
   <div className="search-input">
-    <input {...inputProps} />
+    <label className="offscreen" htmlFor="search-input-field">
+      <FormattedMessage {...messages.label} />
+    </label>
+    <input {...inputProps} id="search-input-field" />
     <button className="search-input__btn" onClick={onClick}>
       <Icon name={IconTypeEnum.MAGNIFYING_GLASS} className="search-input__btn__icon" />{' '}
       <span className="offscreen">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.33.1-dev11",
+  "version": "2.33.1-dev14",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {