Merge branch 'develop' into ee/alerts

.github/workflows/ci.yml

@@ -92,7 +92,8 @@ jobs:
           status: ${{ job.status }}
           deployment_id: ${{ steps.deployment.outputs.deployment_id }}
           env_url: ${{ env.URL_STORYBOOK }}
-
+      - name: a11y test
+        run: yarn workspace @okta/odyssey-storybook test:storybook --url ${{ env.URL_STORYBOOK }}
       - name: visual regression test
         if: steps.changes.outputs.vrt == 'true'
         env:

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -122,6 +122,8 @@ const Autocomplete = <
 
   return (
     <MuiAutocomplete
+      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
+      aria-disabled={isDisabled}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       loading={isLoading}

packages/odyssey-react-mui/src/Button.tsx

@@ -32,6 +32,9 @@ export type ButtonProps = {
    */
   tooltipText?: string;
   variant?: "primary" | "secondary" | "danger" | "floating";
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
 };
 
 const Button = ({
@@ -45,13 +48,19 @@ const Button = ({
   text,
   tooltipText,
   variant,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
 }: ButtonProps) => {
   const muiProps = useContext(MuiPropsContext);
 
   const button = useMemo(
     () => (
       <MuiButton
         {...muiProps}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         disabled={isDisabled}
         endIcon={endIcon}
         fullWidth={isFullWidth}
@@ -75,6 +84,9 @@ const Button = ({
       startIcon,
       text,
       variant,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaDescribedBy,
     ]
   );
 

packages/odyssey-react-mui/src/Checkbox.tsx

@@ -66,7 +66,6 @@ const Checkbox = ({
     <FormControlLabel
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      aria-required={isRequired}
       checked={isChecked}
       className={isInvalid ? "Mui-error" : isValid ? "Mui-valid" : ""}
       control={

packages/odyssey-react-mui/src/CircularProgress.tsx

@@ -14,11 +14,16 @@ import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
 export type CircularProgressProps = {
   value?: number;
+  ariaLabel?: string;
 };
 
-export const CircularProgress = ({ value }: CircularProgressProps) => (
+export const CircularProgress = ({
+  value,
+  ariaLabel,
+}: CircularProgressProps) => (
   <MuiCircularProgress
     value={value}
     variant={value ? "determinate" : "indeterminate"}
+    aria-label={ariaLabel}
   />
 );

packages/odyssey-react-mui/src/Icon.test.tsx

@@ -40,12 +40,4 @@ describe("Icon", () => {
       <Icon name={name} children="child" />
     );
   });
-
-  /* NOTE: the DOM output here is valid and a11y but we're seeing a violation:
-     https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
-
-  a11yCheck(() => {
-    const ret = render(<Icon name={name} titleAccess={title} />)
-  });
-  */
 });

packages/odyssey-react-mui/src/MenuButton.tsx

@@ -45,6 +45,10 @@ export type MenuButtonProps = {
    * The id of the `input` element.
    */
   id?: string;
+  /**
+   * aria-label to describe the button when the button label is empty, e.g., an Icon only Button
+   */
+  ariaLabel?: string;
 };
 
 const MenuButton = ({
@@ -53,6 +57,7 @@ const MenuButton = ({
   buttonEndIcon = <ChevronDownIcon />,
   buttonVariant = "secondary",
   id: idOverride,
+  ariaLabel,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -83,6 +88,7 @@ const MenuButton = ({
         aria-expanded={open ? "true" : undefined}
         onClick={handleClick}
         text={buttonLabel}
+        ariaLabel={ariaLabel}
         variant={buttonVariant}
       />
       <Menu

packages/odyssey-react-mui/src/OdysseyI18n.ts

@@ -37,8 +37,8 @@ import { translation as sv } from "./properties/ts/odyssey-react-mui_sv";
 import { translation as th } from "./properties/ts/odyssey-react-mui_th";
 import { translation as tr } from "./properties/ts/odyssey-react-mui_tr";
 import { translation as uk } from "./properties/ts/odyssey-react-mui_uk";
-import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh-CN";
-import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh-TW";
+import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh_CN";
+import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh_TW";
 
 import {
   SupportedLanguages,

packages/odyssey-react-mui/src/Tabs.tsx

@@ -10,7 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { ReactElement, ReactNode, useCallback, useState } from "react";
+import React, {
+  ReactElement,
+  ReactNode,
+  memo,
+  useCallback,
+  useState,
+} from "react";
 import { Tab as MuiTab } from "@mui/material";
 import {
   TabList as MuiTabList,
@@ -67,4 +73,6 @@ const Tabs = ({ ariaLabel, tabs, initialValue = "0" }: TabsProps) => {
   );
 };
 
-export { Tabs };
+const MemoizedTabs = memo(Tabs);
+
+export { MemoizedTabs as Tabs };

packages/odyssey-react-mui/src/Toast.tsx

@@ -108,7 +108,7 @@ const Toast = ({
         action={
           isDismissable === true && (
             <Button
-              aria-label={t("toast.close.text")}
+              ariaLabel={t("toast.close.text")}
               onClick={onHide}
               size="small"
               startIcon={<CloseIcon />}

packages/odyssey-storybook/.storybook/test-runner.js

@@ -22,6 +22,8 @@ module.exports = {
    * The context argument is a Storybook object containing the story's id, title, and name.
    */
   async postRender(page, context) {
+    await new Promise((r) => setTimeout(r, 500));
+
     // https://github.com/abhinaba-ghosh/axe-playwright#parameters-on-checka11y-axerun
     await checkA11y(
       // the page instance of playwright
@@ -36,13 +38,12 @@ module.exports = {
         detailedReport: true,
         detailedReportOptions: {
           // whether or not to include the full html for the offending nodes
-          html: false,
+          html: true,
         },
       },
 
       // skipFailures
-      // FIXME set to false once a11y issues (in stories) have been resolved
-      true,
+      false,
 
       // reporter "default" is terminal reporter, "html" writes results to file
       "default",

packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx

@@ -138,7 +138,8 @@ export const ButtonWithIcon: StoryObj<ButtonProps> = {
 export const IconOnly: StoryObj<ButtonProps> = {
   args: {
     startIcon: <AddIcon />,
-    text: undefined, // FIXME
-    tooltipText: "Add crew", // FIXME
+    ariaLabel: "Add",
+    text: undefined,
+    tooltipText: "Add crew",
   },
 };

packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.stories.tsx

@@ -31,11 +31,14 @@ const storybookMeta: Meta<CircularProgressProps> = {
 export default storybookMeta;
 
 export const Indeterminate: StoryObj<CircularProgressProps> = {
-  args: {},
+  args: {
+    ariaLabel: "progress",
+  },
 };
 
 export const Determinate: StoryObj<CircularProgressProps> = {
   args: {
     value: 70,
+    ariaLabel: "progress",
   },
 };

packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx

@@ -138,5 +138,6 @@ export const IconButton: StoryObj<MenuButtonProps> = {
     ],
     buttonLabel: "",
     buttonEndIcon: <OverflowVerticalIcon />,
+    ariaLabel: "Add",
   },
 };

packages/odyssey-storybook/src/components/odyssey-mui/NativeSelect/NativeSelect.stories.tsx

@@ -43,6 +43,7 @@ const storybookMeta: Meta<NativeSelectProps> = {
     hint: "Select your destination in the Sol system.",
     isOptional: false,
     label: "Destination",
+    id: "SolarDestination",
   },
   decorators: [MuiThemeDecorator],
 };
@@ -53,6 +54,7 @@ const Template: StoryObj<NativeSelectProps> = {
   render: function C(args) {
     return (
       <NativeSelect
+        id={args.id}
         label={args.label}
         hint={args.hint}
         defaultValue={args.defaultValue}
@@ -80,6 +82,7 @@ const GroupTemplate: StoryObj<NativeSelectProps> = {
   render: function C(args) {
     return (
       <NativeSelect
+        id={args.id}
         label={args.label}
         hint={args.hint}
         errorMessage={args.errorMessage}

packages/odyssey-storybook/src/components/odyssey-mui/Table/Table.stories.tsx

@@ -271,10 +271,10 @@ function EnhancedTable() {
                   selected={isItemSelected}
                 >
                   <TableCell>
-                    <Checkbox
-                      ariaLabelledBy={labelId}
+                    {/* <Checkbox
+                      ariaLabel={labelId}
                       isChecked={isItemSelected}
-                    />
+                    /> */}
                   </TableCell>
                   <TableCell id={labelId}>{row.name}</TableCell>
                   <TableCell variant="number">

packages/odyssey-storybook/src/components/odyssey-mui/Tabs/Tabs.stories.tsx

@@ -17,7 +17,6 @@ import {
   TabsProps,
   Tabs,
 } from "@okta/odyssey-react-mui";
-import { useMemo } from "react";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
 const storybookMeta: Meta<TabsProps & TabItemProps> = {
@@ -44,45 +43,43 @@ const storybookMeta: Meta<TabsProps & TabItemProps> = {
 
 export default storybookMeta;
 
-const ExampleTabContent = ({ label }: { label: string }) => {
-  return useMemo(() => <>{`Information about ${label}`}</>, [label]);
-};
-
 const DefaultTemplate: StoryObj<TabItemProps> = {
   render: function C(args) {
+    const tabs: TabItemProps[] = [];
+
+    tabs.push({
+      label: "Planets",
+      value: "planets",
+      children: "Information about Planets.",
+    });
+    tabs.push({
+      label: "Moons",
+      value: "moons",
+      children: "Information about Moons.",
+    });
+
+    if (args?.label) {
+      tabs.push({
+        label: args.label,
+        value: args.value,
+        isDisabled: args.isDisabled,
+        startIcon: args.startIcon,
+        children: args.children,
+      });
+    }
+
     return (
-      <Tabs
-        initialValue="planets"
-        ariaLabel="basic tabs example"
-        tabs={[
-          {
-            label: "Planets",
-            value: "planets",
-            children: "Information about Planets.",
-          },
-          {
-            label: "Moons",
-            value: "moons",
-            children: "Information about Moons.",
-          },
-          {
-            label: args.label,
-            value: args.value,
-            isDisabled: args.isDisabled,
-            startIcon: args.startIcon,
-            children: <ExampleTabContent label={args.label} />,
-          },
-        ]}
-      />
+      <Tabs initialValue="planets" ariaLabel="basic tabs example" tabs={tabs} />
     );
   },
 };
 
+const ExampleTabContent = ({ label }: { label: string }) => {
+  return <>Information about {label}</>;
+};
+
 export const Default: StoryObj<TabItemProps> = {
   ...DefaultTemplate,
-  args: {
-    //
-  },
 };
 
 export const Disabled: StoryObj<TabItemProps> = {
@@ -98,5 +95,6 @@ export const Icons: StoryObj<TabItemProps> = {
   args: {
     startIcon: <FavoriteIcon />,
     label: "Icon Tab",
+    children: <ExampleTabContent label="Icon Tab" />,
   },
 };

packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx

@@ -89,7 +89,13 @@ export const Default: StoryObj<TooltipProps> = {
 export const Icon: StoryObj<TooltipProps> = {
   ...Template,
   args: {
-    children: <Button variant="secondary" startIcon={<DownloadIcon />} />,
+    children: (
+      <Button
+        variant="secondary"
+        ariaLabel="Download logs"
+        startIcon={<DownloadIcon />}
+      />
+    ),
     ariaType: "label",
     placement: "top",
     text: "Download logs",