From 023ddacc9fa08a35542afb6b866277d727d11c67 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Thu, 1 Feb 2024 12:01:37 -0600
Subject: [PATCH] fix(react): fix incorrect aria when Combobox has no results
 (#1332)

---
 packages/react/src/components/Combobox/Combobox.test.tsx | 5 ++---
 packages/react/src/components/Combobox/Combobox.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Combobox/Combobox.test.tsx b/packages/react/src/components/Combobox/Combobox.test.tsx
index 59da4c8a2..07404dea6 100644
--- 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
index 685287461..140e62e95 100644
--- 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}