fix(FilterableMultiSelect): no aria-describedby helperText when invalid (#20738)

* fix(FilterableMultiSelect): no aria-describedby helperText when invalid

* fix(filterablemultiselect): no aria-describedby helper text in warn

Author: tay1orjones

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -880,7 +880,8 @@ export const FilterableMultiSelect = forwardRef(function FilterableMultiSelect<
   const inputProp = getInputProps(
     getDropdownProps({
       'aria-controls': isOpen ? menuId : undefined,
-      'aria-describedby': helperText ? helperId : undefined,
+      'aria-describedby':
+        helperText && !invalid && !warn ? helperId : undefined,
       'aria-haspopup': 'listbox',
       // Remove excess aria `aria-labelledby`. HTML <label for>
       // provides this aria information.

packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

@@ -512,6 +512,38 @@ describe('FilterableMultiSelect', () => {
     );
   });
 
+  it('should not apply aria-describedby helper text in invalid state', async () => {
+    render(
+      <FilterableMultiSelect
+        {...mockProps}
+        helperText="This is helper text"
+        invalid
+        invalidText="Something went wrong"
+      />
+    );
+    await waitForPosition();
+
+    const input = screen.getByRole('combobox');
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('should not apply aria-describedby helper text in warn state', async () => {
+    render(
+      <FilterableMultiSelect
+        {...mockProps}
+        helperText="This is helper text"
+        warn
+        warnText="Something might go wrong"
+      />
+    );
+    await waitForPosition();
+
+    const input = screen.getByRole('combobox');
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(screen.getByText('Something might go wrong')).toBeInTheDocument();
+  });
+
   it('should handle itemToElement prop', async () => {
     const items = [{ text: 'test-item' }];
     const label = 'test-label';