fix: associate labels with autosuggest input (#2755)

openedx · Dec 19, 2023 · d32e6d0 · d32e6d0
1 parent 7305955
commit d32e6d0
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 77 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
@@ -19,93 +19,101 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  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>
-    );
-}
+  return (
+    <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>
+  );
+};
 ```
 
 ## Search Usage
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            placeholder="Type 'T'"
-            aria-label="form autosuggest"
-            errorMessageText="Error, no selected value"
-            helpMessage="Select language"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Java</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Autosuggest
+      placeholder="Type 'T'"
+      aria-label="form autosuggest"
+      errorMessageText="Error, no selected value"
+      helpMessage="Select language"
+      value={selected}
+      onSelected={(value) => setSelected(value)}
+    >
+      <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Java</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
+    </Form.Autosuggest>
+  );
+};
 ```
 
 ## Loading state
 
 ```jsx live
 () => {
-    const [data, setData] = useState([]);
-    const [showLoading, setShowLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [showLoading, setShowLoading] = useState(false);
 
-    useEffect(() => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => {
-                setTimeout(() => {
-                  setData(items);
-                  setShowLoading(false);
-                }, 1500);
-            });
-    }, [])
+  useEffect(() => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => {
+        setTimeout(() => {
+          setData(items);
+          setShowLoading(false);
+        }, 1500);
+      });
+  }, []);
 
-    const searchCoffee = (title) => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => setTimeout(() => {
-                const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
-                setShowLoading(false);
-                if (filteredCoffee) { return filteredCoffee }
-                return { ...title, filteredCoffee }
-        }, 1500));
-    };
+  const searchCoffee = (title) => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => setTimeout(() => {
+        const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
+        setShowLoading(false);
+        if (filteredCoffee) { return filteredCoffee; }
+        return { ...title, filteredCoffee };
+      }, 1500));
+  };
 
-    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>
-    );
-}
+  return (
+    <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', () => {