fix: disable browser autocomplete and edit dropdown items elements

Add attributes to `input` element to disable browser autocomplete on autosuggest component and change the div that houses the dropdown items to be a `ul`, change the button elements that render the list to be `li`. add new `role` to each element

src/Form/FormAutosuggest.jsx

@@ -39,7 +39,7 @@ function FormAutosuggest({
   });
 
   const handleItemClick = (e, onClick) => {
-    const clickedValue = e.currentTarget.value;
+    const clickedValue = e.currentTarget.getAttribute('data-value')
 
     if (onSelected && clickedValue !== value) {
       onSelected(clickedValue);
@@ -66,7 +66,7 @@ function FormAutosuggest({
       return React.cloneElement(child, {
         ...rest,
         children,
-        value: children,
+        'data-value': children,
         onClick: (e) => handleItemClick(e, onClick),
       });
     });
@@ -95,6 +95,7 @@ function FormAutosuggest({
       ...prevState,
       ...newState,
     }));
+
   };
 
   const iconToggle = (
@@ -219,6 +220,9 @@ function FormAutosuggest({
         <FormControl
           aria-expanded={(state.dropDownItems.length > 0).toString()}
           aria-owns="pgn__form-autosuggest__dropdown-box"
+          role="combobox"
+          aria-autocomplete="list"
+          autoComplete="off"
           value={state.displayValue}
           aria-invalid={state.errorMessage}
           onChange={handleOnChange}
@@ -240,16 +244,17 @@ function FormAutosuggest({
         )}
       </FormGroup>
 
-      <div
+      <ul
         id="pgn__form-autosuggest__dropdown-box"
         className="pgn__form-autosuggest__dropdown"
+        role="listbox"
       >
         {isLoading ? (
           <div className="pgn__form-autosuggest__dropdown-loading">
             <Spinner animation="border" variant="dark" screenReaderText={screenReaderText} />
           </div>
         ) : state.dropDownItems.length > 0 && state.dropDownItems}
-      </div>
+      </ul>
     </div>
   );
 }
@@ -258,7 +263,6 @@ FormAutosuggest.defaultProps = {
   arrowKeyNavigationSelector: 'a:not(:disabled),button:not(:disabled, .btn-icon),input:not(:disabled)',
   ignoredArrowKeysNames: ['ArrowRight', 'ArrowLeft'],
   isLoading: false,
-  role: 'list',
   className: null,
   floatingLabel: null,
   onChange: null,
@@ -283,8 +287,6 @@ FormAutosuggest.propTypes = {
   ignoredArrowKeysNames: PropTypes.arrayOf(PropTypes.string),
   /** Specifies loading state. */
   isLoading: PropTypes.bool,
-  /** An ARIA role describing the form autosuggest. */
-  role: PropTypes.string,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
   /** Specifies floating label to display for the input component. */

src/Form/FormAutosuggestOption.jsx

@@ -11,6 +11,8 @@ function FormAutosuggestOption({
 }) {
   return (
     <MenuItem
+      as="li"
+      role="option"
       onClick={onClick}
       className={classNames(className, 'dropdown-item')}
       {...props}

src/Form/_index.scss

@@ -586,6 +586,7 @@ select.form-control {
     width: calc(100% - .5rem);
     z-index: $zindex-dropdown;
     top: 3.125rem;
+    padding: 0;
 
     .dropdown-item {
       display: block;

src/Form/form-autosuggest.mdx

@@ -33,7 +33,7 @@ Form auto-suggest enables users to manually select or type to find matching opti
             <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
             <Form.AutosuggestOption>Python</Form.AutosuggestOption>
             <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.value)}>
+            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
                 Option with custom onClick
             </Form.AutosuggestOption>
         </Form.Autosuggest>

src/Menu/index.scss

@@ -92,3 +92,4 @@
     position: relative;
   }
 }
+