fix(react): fix incorrect aria when Combobox has no results (#1332)

dequelabs · Feb 1, 2024 · 023ddac · 023ddac
1 parent 50ad8e3
commit 023ddac
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/packages/react/src/components/Combobox/Combobox.test.tsx b/packages/react/src/components/Combobox/Combobox.test.tsx
@@ -759,6 +759,7 @@ test('should render results not found when no options match when autocomplete="m
   fireEvent.focus(combobox);
   assertListboxIsOpen(true);
   fireEvent.change(combobox, { target: { value: 'x' } });
+  expect(screen.queryAllByRole('listbox').length).toEqual(0);
   expect(screen.queryAllByRole('option').length).toEqual(0);
   expect(screen.queryByText('No results found.')).toBeTruthy();
 });
@@ -1060,9 +1061,7 @@ test('should have no axe violations with value and expanded', async () => {
   expect(results).toHaveNoViolations();
 });
 
-// This currently raises an issue and will be fixed in the following issue:
-// https://github.com/dequelabs/cauldron/issues/1330
-test.skip('should have no axe violations with no matching results', async () => {
+test('should have no axe violations with no matching results', async () => {
   const comboboxRef = createRef<HTMLDivElement>();
   render(
     <Combobox label="label" ref={comboboxRef}>

diff --git a/packages/react/src/components/Combobox/Combobox.tsx b/packages/react/src/components/Combobox/Combobox.tsx
@@ -378,8 +378,8 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
         className={classnames('Combobox__listbox', {
           'Combobox__listbox--open': open
         })}
-        role="listbox"
-        aria-labelledby={`${id}-label`}
+        role={noMatchingOptions ? 'presentation' : 'listbox'}
+        aria-labelledby={noMatchingOptions ? undefined : `${id}-label`}
         id={`${id}-listbox`}
         value={selectedValue}
         onMouseDown={handleComboboxOptionMouseDown}