Update examples and add test for menuAttributes

alphagov · Aug 7, 2023 · 29313fd · 29313fd
1 parent e974ac4
commit 29313fd
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 deletions.
diff --git a/examples/index.html b/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>'
         }

diff --git a/test/functional/index.js b/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)