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

dnbexperience · Jan 5, 2024 · 31d6b6c · 31d6b6c
1 parent 2ca216a
commit 31d6b6c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git 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
@@ -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', () => {