fix(combobox): rendering aria-label (carbon-design-system#17678)

* fix(combobox): rendering aria-label * test(combobox): update tests with aria-label and titleText
annawen1 · Oct 11, 2024 · 43f1eea · 43f1eea
1 parent fa24616
commit 43f1eea
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git 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
@@ -856,7 +856,6 @@ const ComboBox = forwardRef(
     const menuProps = useMemo(
       () =>
         getMenuProps({
-          'aria-label': deprecatedAriaLabel || ariaLabel,
           ref: enableFloatingStyles ? refs.setFloating : null,
         }),
       [
@@ -910,6 +909,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,