From 993fb9cef9b4701ecd45bbed88be08f7d7ec6c1e Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Thu, 10 Oct 2024 08:58:20 -0600
Subject: [PATCH] fix(combobox): rendering aria-label (#17678)

* fix(combobox): rendering aria-label

* test(combobox): update tests with aria-label and titleText
---
 .../src/components/ComboBox/ComboBox-test.js      | 15 +++++++++++++++
 .../react/src/components/ComboBox/ComboBox.tsx    |  4 +++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index c4f65503c804..c0de4bd07629 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -102,6 +102,21 @@ describe('ComboBox', () => {
     });
   });
 
+  it('should display titleText', () => {
+    render(<ComboBox {...mockProps} titleText="Combobox title" />);
+
+    expect(screen.getByText('Combobox title')).toBeInTheDocument();
+  });
+
+  it('should confirm custom aria-label is on the input', () => {
+    render(<ComboBox {...mockProps} aria-label="custom aria-label" />);
+
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'custom aria-label'
+    );
+  });
+
   it('should select the correct item from the filtered list after text input on click', async () => {
     const user = userEvent.setup();
 
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index fcaa48c5011c..9c7fdfb15a7c 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -851,7 +851,6 @@ const ComboBox = forwardRef(
     const menuProps = useMemo(
       () =>
         getMenuProps({
-          'aria-label': deprecatedAriaLabel || ariaLabel,
           ref: autoAlign ? refs.setFloating : null,
         }),
       [
@@ -905,6 +904,9 @@ const ComboBox = forwardRef(
               aria-haspopup="listbox"
               title={textInput?.current?.value}
               {...getInputProps({
+                'aria-label': titleText
+                  ? undefined
+                  : deprecatedAriaLabel || ariaLabel,
                 'aria-controls': isOpen ? undefined : menuProps.id,
                 placeholder,
                 value: inputValue,