fix: associate labels with autosuggest input

openedx · Nov 21, 2023 · ea7a1a6 · ea7a1a6
1 parent 64611f7
commit ea7a1a6
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 29 deletions.
diff --git a/src/Form/FormAutosuggest.jsx b/src/Form/FormAutosuggest.jsx
@@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useIntl } from 'react-intl';
 import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
 import Icon from '../Icon';
-import FormGroup from './FormGroup';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
 import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
@@ -239,12 +239,18 @@ function FormAutosuggest({
     setDisplayValue(e.target.value);
   };
 
+  const { getControlProps } = useFormGroupContext();
+  const controlProps = getControlProps(props);
+
   return (
     <div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
       <div aria-live="assertive" className="sr-only" data-testid="autosuggest-screen-reader-options-count">
         {`${state.dropDownItems.length} options found`}
       </div>
-      <FormGroup isInvalid={!!state.errorMessage}>
+      <FormGroupContextProvider
+        controlId={controlProps.id}
+        isInvalid={!!state.errorMessage}
+      >
         <FormControl
           ref={formControlRef}
           aria-expanded={(state.dropDownItems.length > 0).toString()}
@@ -259,7 +265,7 @@ function FormAutosuggest({
           onClick={handleClick}
           trailingElement={iconToggle}
           data-testid="autosuggest-textbox-input"
-          {...props}
+          {...controlProps}
         />
 
         {helpMessage && !state.errorMessage && (
@@ -269,11 +275,11 @@ function FormAutosuggest({
         )}
 
         {state.errorMessage && (
-          <FormControlFeedback type="invalid" feedback-for={props.name}>
+          <FormControlFeedback type="invalid" feedback-for={controlProps.name}>
             {errorMessageText}
           </FormControlFeedback>
         )}
-      </FormGroup>
+      </FormGroupContextProvider>
 
       <ul
         id="pgn__form-autosuggest__dropdown-box"

diff --git a/src/Form/form-autosuggest.mdx b/src/Form/form-autosuggest.mdx
@@ -22,21 +22,25 @@ Form auto-suggest enables users to manually select or type to find matching opti
     const [selected, setSelected] = useState('');
 
     return (
-        <Form.Autosuggest
-            floatingLabel="Programming language"
-            aria-label="form autosuggest"
-            helpMessage="Select language"
-            errorMessageText="Error, no selected value"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Python</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
-                Option with custom onClick
-            </Form.AutosuggestOption>
-        </Form.Autosuggest>
+        <Form.Group>
+            <Form.Label>
+                <h4>Programming language</h4>
+            </Form.Label>
+            <Form.Autosuggest
+                aria-label="form autosuggest"
+                helpMessage="Select language"
+                errorMessageText="Error, no selected value"
+                value={selected}
+                onSelected={(value) => setSelected(value)}
+            >
+                <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
+                <Form.AutosuggestOption>Python</Form.AutosuggestOption>
+                <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
+                <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
+                    Option with custom onClick
+                </Form.AutosuggestOption>
+            </Form.Autosuggest>
+        </Form.Group>
     );
 }
 ```
@@ -97,15 +101,19 @@ Form auto-suggest enables users to manually select or type to find matching opti
     };
 
     return (
-        <Form.Autosuggest
-            isLoading={showLoading}
-            placeholder="This is placeholder"
-            floatingLabel="This is floating label"
-            screenReaderText="Loading..."
-            onChange={searchCoffee}
-        >
-            {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
-        </Form.Autosuggest>
+        <Form.Group>
+            <Form.Label>
+                <h4>Café API</h4>
+            </Form.Label>
+            <Form.Autosuggest
+                isLoading={showLoading}
+                placeholder="This is placeholder"
+                screenReaderText="Loading..."
+                onChange={searchCoffee}
+            >
+                {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
+            </Form.Autosuggest>
+        </Form.Group>
     );
 }
 ```
diff --git a/src/Form/tests/FormAutosuggest.test.jsx b/src/Form/tests/FormAutosuggest.test.jsx
@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import FormAutosuggest from '../FormAutosuggest';
 import FormAutosuggestOption from '../FormAutosuggestOption';
+import FormGroup from '../FormGroup';
+import FormLabel from '../FormLabel';
 
 function FormAutosuggestWrapper(props) {
   return (
@@ -31,6 +33,19 @@ function FormAutosuggestTestComponent(props) {
   );
 }
 
+function FormAutosuggestLabelTestComponent() {
+  return (
+    <FormGroup>
+      <FormLabel data-testid="autosuggest-label">
+        <h3>Label</h3>
+      </FormLabel>
+      <FormAutosuggestWrapper>
+        <FormAutosuggestOption>Option</FormAutosuggestOption>
+      </FormAutosuggestWrapper>
+    </FormGroup>
+  );
+}
+
 FormAutosuggestTestComponent.defaultProps = {
   onSelected: jest.fn(),
   onClick: jest.fn(),
@@ -112,6 +127,12 @@ describe('render behavior', () => {
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
+
+  it('associates labels with the input textbox', () => {
+    const { getByTestId } = render(<FormAutosuggestLabelTestComponent />);
+
+    expect(getByTestId('autosuggest-label').getAttribute('for')).toEqual(getByTestId('autosuggest-textbox-input').getAttribute('id'));
+  });
 });
 
 describe('controlled behavior', () => {