Merge pull request #591 from NHS-DUEC/feature/add-menu-attributes

Add menuAttributes to fix #361

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 2.0.5 - 2023-04-25
+
+- [Pull request #591: Add menuAttributes to fix #361](https://github.com/alphagov/accessible-autocomplete/pull/591)
+
 ## 2.0.4 - 2022-02-07
 
 ### Fixes

README.md

@@ -183,6 +183,12 @@ function suggest (query, populateResults) {
 
 ### Other options
 
+#### `menuAttributes` (default: `{}`)
+
+Type: `Object`
+
+Sets html attributes and their values on the `menu`. Useful for adding `aria-labelledby` and setting to the value of the `id` attribute on your existing label, to provide context to an assistive technology user.
+
 #### `autoselect` (default: `false`)
 
 Type: `Boolean`

examples/index.html

@@ -431,7 +431,10 @@ <h3>Translating texts</h3>
       accessibleAutocomplete({
         element: element,
         id: id,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -442,7 +445,10 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         minLength: 2,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -453,7 +459,10 @@ <h3>Translating texts</h3>
         autoselect: true,
         element: element,
         id: id,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -464,7 +473,10 @@ <h3>Translating texts</h3>
         displayMenu: 'overlay',
         element: element,
         id: id,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -475,7 +487,10 @@ <h3>Translating texts</h3>
         defaultValue: 'Germany',
         element: element,
         id: id,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -518,6 +533,9 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         source: customSuggest,
+        menuAttributes: {
+          "aria-labelledby": id
+        },
         templates: {
           inputValue: inputValueTemplate,
           suggestion: suggestionTemplate
@@ -532,7 +550,10 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         confirmOnBlur: false,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -543,7 +564,10 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         placeholder: 'Search for a country',
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -554,7 +578,10 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         showNoOptionsFound: false,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -565,7 +592,10 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         showAllValues: true,
-        source: countries
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
       })
     </script>
 
@@ -576,6 +606,9 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         showAllValues: false,
+        menuAttributes: {
+          "aria-labelledby": id
+        },
         source: countries,
         tStatusQueryTooShort: function (minQueryLength) {
           return 'Tippe mindestens ' + minQueryLength + ' Zeichen ein für Resultate.'
@@ -608,6 +641,9 @@ <h3>Translating texts</h3>
         id: id,
         showAllValues: true,
         source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        },
         dropdownArrow: function (config) {
           return '<svg class="' + config.className + '" style="top: 8px;" viewBox="0 0 512 512" ><path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9  c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3  z"/></svg>'
         }

src/autocomplete.js

@@ -50,7 +50,8 @@ export default class Autocomplete extends Component {
     required: false,
     tNoResults: () => 'No results found',
     tAssistiveHint: () => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
-    dropdownArrow: DropdownArrowDown
+    dropdownArrow: DropdownArrowDown,
+    menuAttributes: {}
   }
 
   elementReferences = {}
@@ -416,7 +417,8 @@ export default class Autocomplete extends Component {
       tStatusSelectedOption,
       tStatusResults,
       tAssistiveHint,
-      dropdownArrow: dropdownArrowFactory
+      dropdownArrow: dropdownArrowFactory,
+      menuAttributes
     } = this.props
     const { focused, hovered, menuOpen, options, query, selected, ariaHint, validChoiceMade } = this.state
     const autoselect = this.hasAutoselect()
@@ -519,6 +521,7 @@ export default class Autocomplete extends Component {
           onMouseLeave={(event) => this.handleListMouseLeave(event)}
           id={`${id}__listbox`}
           role='listbox'
+          {...menuAttributes}
         >
           {options.map((option, index) => {
             const showFocused = focused === -1 ? selected === index : focused === index

test/functional/index.js

@@ -108,6 +108,17 @@ describe('Autocomplete', () => {
         })
       })
 
+      it('renders with an aria-labelledby attribute on the menu', () => {
+        render(<Autocomplete menuAttributes={{ 'aria-labelledby': 'autocomplete-default' }} id='autocomplete-default' />, scratch)
+
+        let wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
+        let dropdownElement = wrapperElement.getElementsByTagName('ul')[0]
+        let inputElement = wrapperElement.getElementsByTagName('input')[0]
+
+        expect(dropdownElement.getAttribute('aria-labelledby')).to.equal('autocomplete-default')
+        expect(inputElement.getAttribute('id')).to.equal('autocomplete-default')
+      })
+
       it('renders with the correct roles', () => {
         render(<Autocomplete required />, scratch)