From 366f068c88e79accd8b8cc2c534ffbce54cba9fe Mon Sep 17 00:00:00 2001
From: Mena Hassan <mhassan@axim.org>
Date: Wed, 9 Aug 2023 09:51:35 -0400
Subject: [PATCH] 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       | 16 +++++++++-------
 src/Form/FormAutosuggestOption.jsx |  2 ++
 src/Form/_index.scss               |  1 +
 src/Form/form-autosuggest.mdx      |  2 +-
 src/Menu/index.scss                |  1 +
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/Form/FormAutosuggest.jsx b/src/Form/FormAutosuggest.jsx
index f9435391728..c01a2d78528 100644
--- a/src/Form/FormAutosuggest.jsx
+++ b/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. */
diff --git a/src/Form/FormAutosuggestOption.jsx b/src/Form/FormAutosuggestOption.jsx
index a313d2381e4..1af3f53ac6d 100644
--- a/src/Form/FormAutosuggestOption.jsx
+++ b/src/Form/FormAutosuggestOption.jsx
@@ -11,6 +11,8 @@ function FormAutosuggestOption({
 }) {
   return (
     <MenuItem
+      as="li"
+      role="option"
       onClick={onClick}
       className={classNames(className, 'dropdown-item')}
       {...props}
diff --git a/src/Form/_index.scss b/src/Form/_index.scss
index b10655f5512..ef849089bd4 100644
--- a/src/Form/_index.scss
+++ b/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;
diff --git a/src/Form/form-autosuggest.mdx b/src/Form/form-autosuggest.mdx
index 5dfe910803e..9da8579ba20 100644
--- a/src/Form/form-autosuggest.mdx
+++ b/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>
diff --git a/src/Menu/index.scss b/src/Menu/index.scss
index 75103839c1a..a6b75c0a237 100644
--- a/src/Menu/index.scss
+++ b/src/Menu/index.scss
@@ -92,3 +92,4 @@
     position: relative;
   }
 }
+