[WNMGDS-3315] Fixed aria-invalid property previously assigned to Dropdown Button

packages/design-system/src/components/Dropdown/Dropdown.test.tsx

@@ -134,15 +134,19 @@ describe('Dropdown', () => {
     );
 
     const button = getButton();
-    expect(button).toHaveAttribute('aria-invalid', 'true');
     expect(button).toHaveAttribute('aria-describedby', errorId);
     expect(button).toHaveClass('ds-c-field--error');
 
+    userEvent.click(button);
+
+    const listbox = screen.getByRole('listbox');
+    expect(listbox).toHaveAttribute('aria-invalid', 'true');
+
     const error = container.querySelector(`#${errorId}`);
     expect(error).toMatchSnapshot();
   });
 
-  it('supports bottom placed error', () => {
+  it('supports bottom placed error', async () => {
     const errorId = 'my-error';
     const { container } = makeDropdown(
       {
@@ -154,10 +158,14 @@ describe('Dropdown', () => {
     );
 
     const button = getButton();
-    expect(button).toHaveAttribute('aria-invalid', 'true');
     expect(button).toHaveAttribute('aria-describedby', errorId);
     expect(button).toHaveClass('ds-c-field--error');
 
+    userEvent.click(button);
+
+    const listbox = screen.getByRole('listbox');
+    expect(listbox).toHaveAttribute('aria-invalid', 'true');
+
     const dropdown = container.querySelector('.ds-c-dropdown');
     const error = container.querySelector(`#${errorId}`);
     expect(dropdown.lastChild).toEqual(error);

packages/design-system/src/components/Dropdown/Dropdown.tsx

@@ -276,7 +276,6 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
     ref: mergeRefs([triggerRef, inputRef, useAutofocus<HTMLButtonElement>(props.autoFocus)]),
     'aria-controls': menuId,
     'aria-labelledby': `${buttonContentId} ${labelProps.id}`,
-    'aria-invalid': invalid,
     'aria-describedby': describeField({ ...props, hintId, errorId }),
     // TODO: Someday we may want to add this `combobox` role back to the button, but right
     // now desktop VoiceOver has an issue. It seems to interpret the selected value in the
@@ -319,6 +318,7 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
       {state.isOpen && (
         <DropdownMenu
           {...useSelectProps.menuProps}
+          ariaInvalid={invalid}
           componentClass="ds-c-dropdown"
           labelId={labelProps.id}
           menuId={menuId}

packages/design-system/src/components/Dropdown/DropdownMenu.tsx

@@ -9,6 +9,7 @@ import { DropdownSize } from './Dropdown';
 import classNames from 'classnames';
 
 interface DropdownMenuProps<T> extends AriaListBoxOptions<T> {
+  ariaInvalid?: React.AriaAttributes['aria-invalid'];
   children?: React.ReactNode;
   componentClass: string;
   heading?: React.ReactNode;
@@ -22,6 +23,7 @@ interface DropdownMenuProps<T> extends AriaListBoxOptions<T> {
 }
 
 export function DropdownMenu<T>({
+  ariaInvalid,
   children,
   componentClass,
   heading,
@@ -93,6 +95,7 @@ export function DropdownMenu<T>({
       <ul
         {...listBoxProps}
         id={menuId}
+        aria-invalid={ariaInvalid}
         aria-labelledby={classNames(labelId, heading && headingId)}
         className={`${componentClass}__menu`}
         ref={listBoxRef}

packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Dropdown accepts optgroup children 1`] = `
 <ul
+  aria-invalid="false"
   aria-labelledby="static-id__label"
   class="ds-c-dropdown__menu"
   id="static-id__menu"
@@ -190,7 +191,6 @@ exports[`Dropdown dropdown matches snapshot 1`] = `
     aria-controls="static-id__menu"
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-invalid="false"
     aria-labelledby="static-id__button-content static-id__label"
     class="ds-c-dropdown__button ds-c-field"
     id="static-id"

packages/design-system/src/components/web-components/ds-dropdown/__snapshots__/ds-dropdown.test.tsx.snap

@@ -57,7 +57,6 @@ exports[`Dropdown renders a dropdown 1`] = `
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-invalid="false"
         aria-labelledby="dropdown--1__button-content dropdown--1__label"
         class="ds-c-dropdown__button ds-c-field"
         id="dropdown--1"
@@ -151,7 +150,6 @@ exports[`Dropdown renders a dropdown using html options 1`] = `
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-invalid="false"
         aria-labelledby="dropdown--5__button-content dropdown--5__label"
         class="ds-c-dropdown__button ds-c-field"
         id="dropdown--5"