diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js index 330a7e5fcdb..a883eb9ca05 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js @@ -1867,7 +1867,7 @@ class AutocompleteInstance extends React.PureComponent { // ARIA role: 'combobox', // we need combobox twice to make it properly work on VO 'aria-autocomplete': 'both', // list, both - 'aria-controls': `${id}-ul`, + 'aria-controls': isExpanded ? `${id}-ul` : undefined, 'aria-haspopup': 'listbox', 'aria-expanded': isExpanded, // is needed for semantics // 'aria-roledescription': 'autocomplete', // is not needed by now diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx index 9fe450638ca..4bf445645b3 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx @@ -61,21 +61,26 @@ describe('Autocomplete component', () => { ) }) - it('has correct input HTML Element attributes', () => { + it('has correct attributes on input', () => { render() - const elem = document.querySelector('input') - - expect(elem.getAttribute('autocomplete')).toBe('off') - expect(elem.getAttribute('autocapitalize')).toBe('none') - expect(elem.getAttribute('spellcheck')).toBe('false') - expect(elem.getAttribute('autocorrect')).toBe('off') - expect(elem.getAttribute('role')).toBe('combobox') - expect(elem.getAttribute('aria-autocomplete')).toBe('both') - expect(elem.getAttribute('aria-haspopup')).toBe('listbox') - expect(elem.getAttribute('aria-controls')).toBe('autocomplete-id-ul') - expect(elem.getAttribute('aria-expanded')).toBe('true') - expect(elem.getAttribute('name')).toBe('autocomplete-id') + const input = document.querySelector('input') + + expect(input).toHaveAttribute('autocomplete', 'off') + expect(input).toHaveAttribute('autocapitalize', 'none') + expect(input).toHaveAttribute('spellcheck', 'false') + expect(input).toHaveAttribute('autocorrect', 'off') + expect(input).toHaveAttribute('role', 'combobox') + expect(input).toHaveAttribute('aria-autocomplete', 'both') + expect(input).toHaveAttribute('aria-haspopup', 'listbox') + expect(input).toHaveAttribute('aria-controls', 'autocomplete-id-ul') + expect(input).toHaveAttribute('aria-expanded', 'true') + expect(input).toHaveAttribute('name', 'autocomplete-id') + + keyDownOnInput(27) // esc + + expect(input).not.toHaveAttribute('aria-controls') + expect(input).toHaveAttribute('aria-expanded', 'false') }) it('has correct options after filter', () => {