[WNMGDS-2694] Audit ARIA on generic roles

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

@@ -143,6 +143,13 @@ export const Alert: React.FC<AlertProps> = (props: AlertProps) => {
   }
 
   return (
+    // 🥑
+    // This component supports a variety of roles and I have questions about their inclusion.
+    //   - `alertDialog` (https://www.w3.org/TR/wai-aria-1.2/#alertdialog) requires a lot of dialog functionality that isn't available by simply applying this role alone (no focus trapping, no auto focussing on interactive element inside Alert, etc.)
+    //   - `alert` (https://www.w3.org/TR/wai-aria-1.2/#alert) and `status` (https://www.w3.org/TR/wai-aria-1.2/#status) state that element shouldn't manage focus, but this component is using `tabIndex` to make it focusable.
+    //   - Unsure if `alert` should be allowed since it's for "important, and usually time-sensitive, information"
+    // tl;dr - I think this component might just need `region` role, and `tabIndex` should be removed.
+
     <div
       className={classes}
       ref={mergeRefs([alertRef, focusRef])}

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

@@ -18,6 +18,10 @@ export function renderReactStatelyItems(
   });
 }
 
+// 🥑
+// https://www.w3.org/TR/wai-aria-1.2/#option
+//    - "Default for aria-selected is false."
+// Could remove `aria-selected="false"` from the `li` element.
 export function renderStatusMessage(message: ReactNode) {
   return (
     <li aria-selected="false" className="ds-c-autocomplete__menu-item-message" role="option">

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

@@ -139,6 +139,9 @@ export const ChoiceList: React.FC<ChoiceListProps> = (props: ChoiceListProps) =>
   });
 
   return (
+    // 🥑
+    // https://www.w3.org/TR/wai-aria-1.2/#group
+    //    - "aria-invalid (state) (deprecated on this role in ARIA 1.2)"
     <fieldset
       aria-invalid={invalid}
       aria-describedby={describeField({ ...props, hintId, errorId })}

packages/design-system/src/components/DateField/MultiInputDateField.tsx

@@ -159,6 +159,9 @@ export function MultiInputDateField(props: DateFieldProps): React.ReactElement {
     dateFormatter: defaultDateFormatter,
   };
 
+  // 🥑
+  // https://www.w3.org/TR/wai-aria-1.2/#group
+  //    - "aria-invalid (state) (deprecated on this role in ARIA 1.2)"
   return (
     <fieldset
       aria-invalid={invalid}

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

@@ -123,6 +123,11 @@ export const Dialog = (props: DialogProps) => {
 
   useBodyScrollPrevention(modalProps.isOpen ?? true);
 
+  // 🥑
+  // Is `tabIndex` necessary here? It's not clear why it's being set to -1.
+  // It's also not clear why the `role` attribute is being set to `document`.
+  // Should this allow for more flexible heading tags? Locked into `h1` for now.
+  // Can we remove `role="main"` from the `main` element?
   return (
     <NativeDialog
       className={dialogClassNames}

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

@@ -69,6 +69,9 @@ export const Drawer = (props: DrawerProps) => {
 
   const Heading = `h${props.headingLevel}` as const;
 
+  // 🥑
+  // Why is `tabIndex` needed here?
+  // `aria-labelledby` not allowed on `role="generic"` element
   return (
     <NativeDialog
       className={classNames(props.className, 'ds-c-drawer')}

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

@@ -265,6 +265,10 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
     ref: mergeRefs([triggerRef, inputRef, useAutofocus<HTMLButtonElement>(props.autoFocus)]),
     'aria-controls': menuId,
     'aria-labelledby': `${buttonContentId} ${labelProps.id}`,
+
+    // 🥑
+    // https://www.w3.org/TR/wai-aria-1.2/#button
+    //    - "aria-invalid (state) (deprecated on this role in ARIA 1.2)"
     '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

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

@@ -139,6 +139,10 @@ export const MonthPicker = (props: MonthPickerProps) => {
   const { hintId, hintElement } = useHint({ ...props, id });
   const labelProps = useLabelProps({ ...props, id });
 
+  // 🥑
+  // https://www.w3.org/TR/wai--1.2/#group
+  //    - "aria-invalid (state) (deprecated on this role in ARIA 1.2)"
+
   return (
     <fieldset
       aria-invalid={invalid}

packages/design-system/src/components/Tabs/Tab.tsx

@@ -79,6 +79,9 @@ export const Tab = forwardRef((props: TabProps, ref: any) => {
       {props.children}
     </a>
   ) : (
+    // 🥑
+    // https://www.w3.org/TR/wai-aria-1.2/#generic
+    //    - "aria-disabled (state) (deprecated on this role in ARIA 1.2)"
     <span aria-disabled="true" {...sharedTabProps}>
       {props.children}
     </span>

packages/design-system/src/components/Tabs/TabPanel.tsx

@@ -41,6 +41,9 @@ export const TabPanel = (props: TabPanelProps) => {
   const classes = classnames('ds-c-tabs__panel', props.className);
 
   return (
+    // 🥑
+    // https://www.w3.org/TR/wai-aria-1.2/#tabpanel
+    //    - "aria-disabled (state) (deprecated on this role in ARIA 1.2)"
     <div
       aria-labelledby={props.tabId}
       aria-hidden={!props.selected}

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

@@ -6,7 +6,7 @@ export type VerticalNavComponent = React.ReactElement<any> | any | ((...args: an
 
 export interface VerticalNavProps {
   /**
-   * An optional arial label for the `<nav>` element in this component.
+   * An optional aria label for the `<nav>` element in this component.
    * This prop is necessary when there is more than one nav element on a page.
    */
   ariaNavLabel?: string;