fix(Autocomplete): only set aria-controls attribute when expanded

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

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(<Autocomplete data={mockData} opened {...mockProps} />)
 
-    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', () => {
@@ -3167,8 +3172,8 @@ const toggle = () => {
 }
 
 const closeAndReopen = () => {
-  // Close and open
-  fireEvent.blur(document.querySelector('.dnb-input__input'))
-  fireEvent.focus(document.querySelector('.dnb-input__input'))
-  fireEvent.mouseDown(document.querySelector('.dnb-input__input'))
+  const input = document.querySelector('.dnb-input__input')
+  fireEvent.blur(input)
+  fireEvent.focus(input)
+  fireEvent.mouseDown(input)
 }