[WNMGDS-2712] Update deprecated aria

packages/design-system/src/components/Autocomplete/utils.tsx

@@ -20,7 +20,7 @@ export function renderReactStatelyItems(
 
 export function renderStatusMessage(message: ReactNode) {
   return (
-    <li aria-selected="false" className="ds-c-autocomplete__menu-item-message" role="option">
+    <li className="ds-c-autocomplete__menu-item-message" role="option">
       {message}
     </li>
   );

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

@@ -76,9 +76,7 @@ describe('ChoiceList', () => {
 
     it('is enclosed by a fieldset', () => {
       renderChoiceList();
-      // a fieldset's default aria role is 'group' per MDN
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#technical_summary
-      const fieldsetEl = screen.getByRole('group');
+      const fieldsetEl = screen.getByRole('radiogroup');
 
       expect(fieldsetEl).toBeDefined();
     });

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

@@ -143,6 +143,7 @@ export const ChoiceList: React.FC<ChoiceListProps> = (props: ChoiceListProps) =>
       aria-invalid={invalid}
       aria-describedby={describeField({ ...props, hintId, errorId })}
       className={classNames('ds-c-fieldset', props.className)}
+      role={props.type === 'radio' ? 'radiogroup' : null}
     >
       <Label component="legend" {...labelProps} />
       {hintElement}

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

@@ -6,6 +6,7 @@ exports[`ChoiceList Radio buttons and Checkboxes is a radio button group 1`] = `
     aria-describedby="static-id__error static-id__hint"
     aria-invalid="true"
     class="ds-c-fieldset"
+    role="radiogroup"
   >
     <legend
       class="ds-c-label"

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

@@ -8,6 +8,10 @@ interface BaseCloseButtonProps {
    * An aria-label is required since the button content is only an X
    */
   'aria-label': string;
+  /**
+   * Hides or shows icon's aria text.
+   */
+  ariaHidden?: boolean;
   /**
    * Additional classes to be added to the button element.
    */
@@ -27,7 +31,12 @@ export type CloseButtonProps = Omit<
 /**
  *
  */
-export const CloseButton = ({ className, id: idProp, ...buttonAttributes }: CloseButtonProps) => {
+export const CloseButton = ({
+  className,
+  id: idProp,
+  ariaHidden = false,
+  ...buttonAttributes
+}: CloseButtonProps) => {
   const id = useId('close-button--', idProp);
   return (
     <button
@@ -36,7 +45,7 @@ export const CloseButton = ({ className, id: idProp, ...buttonAttributes }: Clos
       className={classNames('ds-c-close-button', className)}
       id={id}
     >
-      <CloseIconThin ariaHidden={false} id={`${id}__icon`} />
+      <CloseIconThin ariaHidden={ariaHidden} id={`${id}__icon`} />
     </button>
   );
 };

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

@@ -39,7 +39,8 @@ describe('Dialog', function () {
       headerClassName: 'test-header',
       size: 'full',
     });
-    expect(screen.getByRole('document')).toMatchSnapshot();
+
+    expect(screen.getByRole('dialog')).toMatchSnapshot();
   });
 
   it('calls onExit when close button is clicked', () => {

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

@@ -122,31 +122,27 @@ export const Dialog = (props: DialogProps) => {
       {...modalProps}
       id={rootId}
       boundingBoxRef={containerRef}
+      aria-labelledby={headingId}
     >
-      <div
-        className="ds-c-dialog__window"
-        role="document"
-        ref={containerRef}
-        tabIndex={-1}
-        aria-labelledby={headingId}
-      >
-        <header className={headerClassNames}>
+      <div className="ds-c-dialog__window" ref={containerRef}>
+        <div className={headerClassNames}>
           {heading && (
-            <h1 className="ds-c-dialog__heading" id={headingId} ref={headingRef}>
+            <h2 className="ds-c-dialog__heading" id={headingId} ref={headingRef}>
               {heading}
-            </h1>
+            </h2>
           )}
           <CloseButton
             aria-label={ariaCloseLabel ?? t('dialog.ariaCloseLabel')}
+            ariaHidden={true}
             className="ds-c-dialog__close"
             id={`${rootId}__close`}
             onClick={onExit}
           />
-        </header>
-        <main role="main" className="ds-c-dialog__body">
+        </div>
+        <div className="ds-c-dialog__body">
           <div id={contentId}>{children}</div>
           {actions && <div className={actionsClassNames}>{actions}</div>}
-        </main>
+        </div>
       </div>
     </NativeDialog>
   );

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

@@ -1,67 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dialog renders with additional classNames and size 1`] = `
-<div
+<dialog
   aria-labelledby="static-id__heading"
-  class="ds-c-dialog__window"
-  role="document"
+  class="ds-c-dialog test-dialog ds-c-dialog--full"
+  id="static-id"
+  open=""
+  role="dialog"
   tabindex="-1"
 >
-  <header
-    class="ds-c-dialog__header test-header"
+  <div
+    class="ds-c-dialog__window"
   >
-    <h1
-      class="ds-c-dialog__heading"
-      id="static-id__heading"
-    >
-      dialog heading
-    </h1>
-    <button
-      aria-label="Close modal dialog"
-      class="ds-c-close-button ds-c-dialog__close"
-      id="static-id__close"
-      type="button"
+    <div
+      class="ds-c-dialog__header test-header"
     >
-      <svg
-        aria-hidden="false"
-        aria-labelledby="static-id__close__icon__title"
-        class="ds-c-icon ds-c-icon--close ds-c-icon--close-thin "
-        id="static-id__close__icon"
-        role="img"
-        viewBox="-2 -2 18 18"
-        xmlns="http://www.w3.org/2000/svg"
+      <h2
+        class="ds-c-dialog__heading"
+        id="static-id__heading"
       >
-        <title
-          id="static-id__close__icon__title"
+        dialog heading
+      </h2>
+      <button
+        aria-label="Close modal dialog"
+        class="ds-c-close-button ds-c-dialog__close"
+        id="static-id__close"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="ds-c-icon ds-c-icon--close ds-c-icon--close-thin "
+          id="static-id__close__icon"
+          viewBox="-2 -2 18 18"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          Close
-        </title>
-        <path
-          d="M0 13.0332964L13.0332964 0M13.0332964 13.0332964L0 0"
-          fill="none"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-        />
-      </svg>
-    </button>
-  </header>
-  <main
-    class="ds-c-dialog__body"
-    role="main"
-  >
-    <div
-      id="static-id__content"
-    >
-      Foo
+          <path
+            d="M0 13.0332964L13.0332964 0M13.0332964 13.0332964L0 0"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
+          />
+        </svg>
+      </button>
     </div>
     <div
-      class="ds-c-dialog__actions test-action"
+      class="ds-c-dialog__body"
     >
-      <span>
-        Pretend these are actions
-      </span>
+      <div
+        id="static-id__content"
+      >
+        Foo
+      </div>
+      <div
+        class="ds-c-dialog__actions test-action"
+      >
+        <span>
+          Pretend these are actions
+        </span>
+      </div>
     </div>
-  </main>
-</div>
+  </div>
+</dialog>
 `;

packages/design-system/src/components/Drawer/Drawer.stories.tsx

@@ -1,9 +1,9 @@
+import { useState } from 'react';
 import { ArgsTable, Description, Subtitle, Title } from '@storybook/blocks';
 import { action } from '@storybook/addon-actions';
 import Drawer from './Drawer';
 import { Button } from '../Button';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
 
 const meta: Meta<typeof Drawer> = {
   title: 'Components/Drawer',
@@ -32,6 +32,7 @@ const meta: Meta<typeof Drawer> = {
           <ArgsTable exclude={['backdropClickExits']} />
         </>
       ),
+      underlyingHtmlElements: ['dialog'],
     },
   },
 };
@@ -69,7 +70,11 @@ const drawerContent = (
 
 export const DrawerDefault: Story = {
   render: function Component(args) {
-    return <Drawer {...args}>{drawerContent}</Drawer>;
+    return (
+      <Drawer isOpen={true} {...args}>
+        {drawerContent}
+      </Drawer>
+    );
   },
 };
 export const DrawerWithStickyPositioning: Story = {
@@ -81,12 +86,16 @@ export const DrawerWithStickyPositioning: Story = {
 };
 
 export const DrawerToggleWithDrawer: Story = {
-  render: function Component() {
-    const [{ isDrawerVisible, ...args }, updateArgs] = useArgs();
-    const showDrawer = () => updateArgs({ isDrawerVisible: true });
+  render: function Component(args) {
+    const [drawerOpen, updateOpen] = useState(false);
+
+    const showDrawer = () => {
+      updateOpen(true);
+    };
+
     const hideDrawer = (...params) => {
       action('onCloseClick')(...params);
-      updateArgs({ isDrawerVisible: false });
+      updateOpen(false);
     };
 
     return (
@@ -97,7 +106,7 @@ export const DrawerToggleWithDrawer: Story = {
           footerTitle="Footer Title"
           footerBody={<p className="ds-text-body--md ds-u-margin--0">Footer content</p>}
           heading="Drawer Heading"
-          isOpen={isDrawerVisible ?? false}
+          isOpen={drawerOpen}
         >
           {drawerContent}
         </Drawer>

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

@@ -102,9 +102,10 @@ export const Drawer = (props: DrawerProps) => {
       showModal={hasFocusTrap}
       backdropClickExits={backdropClickExits}
       isOpen={isOpen}
+      aria-labelledby={headingId}
       {...otherProps}
     >
-      <div className="ds-c-drawer__window" tabIndex={-1} aria-labelledby={headingId}>
+      <div className="ds-c-drawer__window" tabIndex={isFooterSticky && -1}>
         <div className="ds-c-drawer__header">
           <Heading
             id={headingId}

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

@@ -2,14 +2,14 @@
 
 exports[`Drawer renders a dialog 1`] = `
 <dialog
+  aria-labelledby="drawer--1"
   class="ds-c-drawer"
   open=""
   role="dialog"
+  tabindex="-1"
 >
   <div
-    aria-labelledby="drawer--1"
     class="ds-c-drawer__window"
-    tabindex="-1"
   >
     <div
       class="ds-c-drawer__header"

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

@@ -285,6 +285,9 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
     // likely ran into the same issue, since they leave it off for `useSelect` buttons.
     // Adding the combobox role in the future can help because screen reader users are more
     // familiar with the combobox pattern.
+    // Another possible issue with this role - you should be able to select an option by typing
+    // a character from that option. Without this role set, VO reads whatever option is closest
+    // to the character typed. With this role set, VO reads nothing.
     // role: 'combobox',
   };
 

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

@@ -53,14 +53,14 @@ Array [
 exports[`HelpDrawer renders a snapshot 1`] = `
 <DocumentFragment>
   <dialog
+    aria-labelledby="drawer--2"
     class="ds-c-help-drawer ds-c-drawer"
     open=""
     role="dialog"
+    tabindex="-1"
   >
     <div
-      aria-labelledby="drawer--2"
       class="ds-c-drawer__window"
-      tabindex="-1"
     >
       <div
         class="ds-c-drawer__header"