Merge pull request #2955 from SUI-Components/feat/molecule-autosuggest-dropdownlist-a11y

Feat/molecule autosuggest dropdownlist a11y

Author: Sabri1209

components/molecule/autosuggest/src/components/SingleSelection/index.js

@@ -8,13 +8,15 @@ import InputWithClearUI from '../InputWithClearUI/index.js'
 
 const MoleculeAutosuggestSingleSelection = ({
   autoFocus,
+  'aria-expanded': ariaExpanded,
   ariaLabel,
   autoComplete = 'nope',
   children,
   design,
   disabled,
   iconClear,
   id,
+  dropdownListId,
   innerRefInput: refInput = {},
   inputMode,
   isOpen,
@@ -64,6 +66,11 @@ const MoleculeAutosuggestSingleSelection = ({
   return (
     <>
       <InputWithClearUI
+        role="combobox"
+        aria-haspopup="true"
+        aria-autocomplete="list"
+        aria-controls={dropdownListId}
+        aria-expanded={ariaExpanded}
         ariaLabel={ariaLabel}
         autoComplete={autoComplete}
         autoFocus={autoFocus}
@@ -94,6 +101,8 @@ const MoleculeAutosuggestSingleSelection = ({
       </InputWithClearUI>
       {(value || isOpen) && (
         <MoleculeDropdownList
+          id={dropdownListId}
+          aria-labelledby={id}
           size={size}
           onSelect={handleSelection}
           visible={isOpen && Children.count(children) > 0}

components/molecule/autosuggest/src/index.js

@@ -89,6 +89,13 @@ const MoleculeAutosuggest = ({
     }
   )
 
+  const accessibilityProps = {
+    tabIndex: '0',
+    role: 'combobox',
+    'aria-expanded': isOpenState,
+    ...(multiselection && {'aria-controls': id})
+  }
+
   const closeList = ev => {
     const {current: domMoleculeAutosuggest} = innerRefMoleculeAutosuggest
     handleToggle(ev, {isOpen: false})
@@ -209,6 +216,7 @@ const MoleculeAutosuggest = ({
     onSelect,
     onToggle: handleToggle,
     state,
+    ...(!multiselection && {...accessibilityProps}),
     ...restProps
   }
 
@@ -219,15 +227,12 @@ const MoleculeAutosuggest = ({
   return (
     <div
       ref={refMoleculeAutosuggest}
-      tabIndex="0"
       className={className}
       onKeyDown={handleKeyDown}
       onFocus={handleFocusIn}
       onBlur={handleFocusOut}
       onClick={handleClick}
-      role="combobox"
-      aria-controls={id}
-      aria-expanded={isOpenState}
+      {...(multiselection && {...accessibilityProps})}
     >
       <AutosuggestSelection {...autosuggestSelectionProps} />
     </div>

components/molecule/autosuggest/test/index.test.js

@@ -162,14 +162,11 @@ describe(json.name, () => {
 
       // When
       const {getByRole} = setup(props)
-      const autoSuggestElement = getByRole('combobox')
-      const autoSuggestInputElement = getByRole('textbox')
+      const autoSuggestInputElement = getByRole('combobox')
 
       // Then
       expect(() => getByRole('listbox')).to.throw()
       expect(() => getByRole('option')).to.throw()
-      expect(autoSuggestElement.innerHTML).to.be.a('string')
-      expect(autoSuggestElement.innerHTML).to.not.have.lengthOf(0)
       expect(autoSuggestInputElement.value).to.equal('')
     })
 
@@ -187,11 +184,11 @@ describe(json.name, () => {
 
       // When
       const {getByRole, getAllByRole} = setup(props)
+      const combo = getByRole('combobox')
 
       // Then
-      expect(getByRole('combobox').innerHTML).to.be.a('string')
-      expect(getByRole('combobox').innerHTML).to.not.have.lengthOf(0)
-      expect(getByRole('textbox').value).to.equal(props.value)
+      expect(combo.tagName).to.eq('INPUT')
+      expect(combo.value).to.equal(props.value)
       expect(() => getByRole('listbox', {hidden: true})).to.not.throw()
       expect(() =>
         getAllByRole('option', {
@@ -218,11 +215,11 @@ describe(json.name, () => {
 
       // When
       const {getByRole, getAllByRole} = setup(props)
+      const combo = getByRole('combobox')
 
       // Then
-      expect(getByRole('combobox').innerHTML).to.be.a('string')
-      expect(getByRole('combobox').innerHTML).to.not.have.lengthOf(0)
-      expect(getByRole('textbox').value).to.equal(props.value)
+      expect(combo.tagName).to.eq('INPUT')
+      expect(combo.value).to.equal(props.value)
       expect(() => getByRole('listbox', {hidden: true})).to.not.throw()
       expect(() =>
         getAllByRole('option', {
@@ -250,11 +247,11 @@ describe(json.name, () => {
 
       // When
       const {getByRole, getAllByRole} = setup(props)
+      const combo = getByRole('combobox')
 
       // Then
-      expect(getByRole('combobox').innerHTML).to.be.a('string')
-      expect(getByRole('combobox').innerHTML).to.not.have.lengthOf(0)
-      expect(getByRole('textbox').value).to.equal(props.value)
+      expect(combo.tagName).to.eq('INPUT')
+      expect(combo.value).to.equal(props.value)
       expect(() => getByRole('listbox', {hidden: true})).to.not.throw()
       expect(() =>
         getAllByRole('option', {
@@ -294,17 +291,17 @@ describe(json.name, () => {
             // When
             const {getByRole, rerender} = setup(props)
             keyDownEvents.forEach(keyDownEvent => fireEvent.keyDown(getByRole('combobox'), keyDownEvent))
-            fireEvent.change(getByRole('textbox'), changeEvent)
+            fireEvent.change(getByRole('combobox'), changeEvent)
 
             // Then
-            expect(getByRole('textbox').value).to.equal('')
+            expect(getByRole('combobox').value).to.equal('')
 
             // And
             // When
 
             rerender(<Component {...props} />)
 
-            expect(getByRole('textbox').value).to.equal(changeEvent.target.value)
+            expect(getByRole('combobox').value).to.equal(changeEvent.target.value)
             sinon.assert.called(spy)
           })
         })

components/molecule/dropdownList/src/index.js

@@ -21,6 +21,7 @@ const MoleculeDropdownList = forwardRef(
   (
     {
       children,
+      id,
       onSelect,
       position = POSITIONS.BOTTOM,
       alwaysRender = true,
@@ -30,6 +31,7 @@ const MoleculeDropdownList = forwardRef(
       visible,
       onKeyDown,
       'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       ...props
     },
     forwardedRef
@@ -94,7 +96,16 @@ const MoleculeDropdownList = forwardRef(
     if (!visible && !alwaysRender) return null
 
     return (
-      <ul ref={ref} tabIndex={0} onKeyDown={handleKeyDown} className={classNames} role="listbox" aria-label={ariaLabel}>
+      <ul
+        id={id}
+        ref={ref}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        className={classNames}
+        role="listbox"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+      >
         {Children.toArray(children)
           .filter(Boolean)
           .map((child, index) => (
@@ -110,12 +121,18 @@ const MoleculeDropdownList = forwardRef(
 MoleculeDropdownList.displayName = 'MoleculeDropdownList'
 
 MoleculeDropdownList.propTypes = {
+  /** HTML id attribute */
+  id: PropTypes.string,
+
   /** No matter if is visible or invisible, render always the content */
   alwaysRender: PropTypes.bool,
 
   /** aria-label for accessibility */
   'aria-label': PropTypes.string,
 
+  /** aria-labelledby for accessibility */
+  'aria-labelledby': PropTypes.string,
+
   /** Content to be included in the list (MoleculeDropdownOption) */
   children: PropTypes.node,