diff --git a/src/SelectInput/Input.tsx b/src/SelectInput/Input.tsx index 74523369..e69eace1 100644 --- a/src/SelectInput/Input.tsx +++ b/src/SelectInput/Input.tsx @@ -179,9 +179,9 @@ const Input = React.forwardRef((props, ref) => { role: role || 'combobox', 'aria-expanded': open || false, 'aria-haspopup': 'listbox' as const, - 'aria-owns': `${id}_list`, + 'aria-owns': open ? `${id}_list` : undefined, 'aria-autocomplete': 'list' as const, - 'aria-controls': `${id}_list`, + 'aria-controls': open ? `${id}_list` : undefined, 'aria-activedescendant': open ? activeDescendantId : undefined, }; diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx index 8b48812a..37940561 100644 --- a/tests/Accessibility.test.tsx +++ b/tests/Accessibility.test.tsx @@ -214,4 +214,62 @@ describe('Select.Accessibility', () => { }); }); }); + + describe('Select Input attributes', () => { + it('should have correct aria and role attributes by default', () => { + const { container } = render( + , + ); + + const input = container.querySelector('input'); + expect(input).toHaveAttribute('role', 'combobox'); + expect(input).toHaveAttribute('aria-expanded', 'true'); + expect(input).toHaveAttribute('aria-haspopup', 'listbox'); + expect(input).toHaveAttribute('aria-owns', 'select_list'); + expect(input).toHaveAttribute('aria-autocomplete', 'list'); + expect(input).toHaveAttribute('aria-controls', 'select_list'); + expect(input).toHaveAttribute('aria-activedescendant', 'select_list_0'); + }); + }); }); diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap index e6874fbf..4c1ae640 100644 --- a/tests/__snapshots__/Combobox.test.tsx.snap +++ b/tests/__snapshots__/Combobox.test.tsx.snap @@ -15,10 +15,8 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
"`; +exports[`Select.SSR should work 1`] = `"
"`;