Move aria-labelledby into computed menu props

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fixes
+
+- [Pull request #727: Add `aria-controls` to aria props](https://github.com/alphagov/accessible-autocomplete/pull/727)
+
 ## 3.0.0 - 2024-04-19
 
 ### Breaking changes

examples/index.html

@@ -470,10 +470,7 @@ <h3>Translating texts</h3>
       accessibleAutocomplete({
         element: element,
         id: id,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -484,10 +481,7 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         minLength: 2,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -498,10 +492,7 @@ <h3>Translating texts</h3>
         autoselect: true,
         element: element,
         id: id,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -512,10 +503,7 @@ <h3>Translating texts</h3>
         displayMenu: 'overlay',
         element: element,
         id: id,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -526,10 +514,7 @@ <h3>Translating texts</h3>
         defaultValue: 'Germany',
         element: element,
         id: id,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -540,9 +525,6 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        },
         autoselect: true,
         inputClasses: 'app-input'
       })
@@ -555,9 +537,6 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        },
         autoselect: true,
         hintClasses: 'app-hint'
       })
@@ -570,9 +549,6 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        },
         autoselect: true,
         menuClasses: 'custom-menu-class'
       })
@@ -617,9 +593,6 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         source: customSuggest,
-        menuAttributes: {
-          "aria-labelledby": id
-        },
         templates: {
           inputValue: inputValueTemplate,
           suggestion: suggestionTemplate
@@ -635,9 +608,6 @@ <h3>Translating texts</h3>
         id: id,
         confirmOnBlur: false,
         source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
       })
     </script>
 
@@ -649,9 +619,6 @@ <h3>Translating texts</h3>
         id: id,
         placeholder: 'Search for a country',
         source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
       })
     </script>
 
@@ -662,10 +629,7 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         showNoOptionsFound: false,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -676,10 +640,7 @@ <h3>Translating texts</h3>
         element: element,
         id: id,
         showAllValues: true,
-        source: countries,
-        menuAttributes: {
-          "aria-labelledby": id
-        }
+        source: countries
       })
     </script>
 
@@ -690,9 +651,6 @@ <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.'
@@ -725,9 +683,6 @@ <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

@@ -508,13 +508,16 @@ export default class Autocomplete extends Component {
     }
 
     const computedMenuAttributes = {
+      // set aria-labelledby first so that users can override it with menuAttributes
+      'aria-labelledby': id,
       // Copy the attributes passed as props
       ...menuAttributes,
       // And add the values computed for the autocomplete
       id: `${id}__listbox`,
       role: 'listbox',
       className: menuClassList.join(' '),
       onMouseLeave: this.handleListMouseLeave
+
     }
 
     // Preact would override our computed `className`

test/functional/index.js

@@ -111,22 +111,21 @@ describe('Autocomplete', () => {
       })
 
       describe('menuAttributes', () => {
-        it('renders with the extra attribute on the menu', () => {
-          render(<Autocomplete menuAttributes={{ 'aria-labelledby': 'autocomplete-default' }} id='autocomplete-default' />, scratch)
+        it('renders with extra attributes on the menu', () => {
+          render(<Autocomplete menuAttributes={{ 'data-test': 'test' }} id='autocomplete-default' />, scratch)
 
           const wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
           const dropdownElement = wrapperElement.getElementsByTagName('ul')[0]
-          const inputElement = wrapperElement.getElementsByTagName('input')[0]
 
-          expect(dropdownElement.getAttribute('aria-labelledby')).to.equal('autocomplete-default')
-          expect(inputElement.getAttribute('id')).to.equal('autocomplete-default')
+          expect(dropdownElement.getAttribute('data-test')).to.equal('test')
         })
 
         describe('attributes computed by the component', () => {
           it('does not override attributes computed by the component', () => {
             const menuAttributes = {
               id: 'custom-id',
-              role: 'custom-role'
+              role: 'custom-role',
+              'aria-labelledby': 'custom-label'
             }
 
             render(<Autocomplete menuAttributes={menuAttributes} id='autocomplete-default' />, scratch)
@@ -135,10 +134,12 @@ describe('Autocomplete', () => {
             const menuElement = scratch.getElementsByClassName('autocomplete__menu')[0]
             expect(menuElement.id).to.equal('autocomplete-default__listbox', 'HTML id')
             expect(menuElement.role).to.equal('listbox', 'HTML role')
+            expect(menuElement.getAttribute('aria-labelledby')).to.equal('autocomplete-default')
 
             // Check that in protecting the menu, we don't affect the object passed as option
             expect(menuAttributes.id).to.equal('custom-id', 'options id')
             expect(menuAttributes.role).to.equal('custom-role', 'options role')
+            expect(menuAttributes['aria-labelledby']).to.equal('custom-label', 'options role')
           })
         })