diff --git a/examples/index.html b/examples/index.html
index 7da3b4f3..e5d9e173 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -431,7 +431,10 @@
Translating texts
accessibleAutocomplete({
element: element,
id: id,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -442,7 +445,10 @@ Translating texts
element: element,
id: id,
minLength: 2,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -453,7 +459,10 @@ Translating texts
autoselect: true,
element: element,
id: id,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -464,7 +473,10 @@ Translating texts
displayMenu: 'overlay',
element: element,
id: id,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -475,7 +487,10 @@ Translating texts
defaultValue: 'Germany',
element: element,
id: id,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -518,6 +533,9 @@ Translating texts
element: element,
id: id,
source: customSuggest,
+ menuAttributes: {
+ "aria-labelledby": id
+ },
templates: {
inputValue: inputValueTemplate,
suggestion: suggestionTemplate
@@ -532,7 +550,10 @@ Translating texts
element: element,
id: id,
confirmOnBlur: false,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -543,7 +564,10 @@ Translating texts
element: element,
id: id,
placeholder: 'Search for a country',
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -554,7 +578,10 @@ Translating texts
element: element,
id: id,
showNoOptionsFound: false,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -565,7 +592,10 @@ Translating texts
element: element,
id: id,
showAllValues: true,
- source: countries
+ source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ }
})
@@ -576,6 +606,9 @@ Translating texts
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 @@ Translating texts
id: id,
showAllValues: true,
source: countries,
+ menuAttributes: {
+ "aria-labelledby": id
+ },
dropdownArrow: function (config) {
return ''
}
diff --git a/test/functional/index.js b/test/functional/index.js
index 76b73880..4c759c3c 100644
--- 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(, 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(, scratch)