Merge branch 'develop' into kg/OKTA-612737

.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-design-tokens/src/border.json

@@ -16,13 +16,15 @@
     },
     "radius": {
       "main": { "value": "4px" },
-      "outer": { "value": "6px" }
+      "outer": { "value": "6px" },
+      "round": { "value": "1.5em" }
     },
     "style": {
       "main": { "value": "solid" }
     },
     "width": {
-      "main": { "value": "1px" }
+      "main": { "value": "1px" },
+      "heavy": { "value": "1.5px" }
     }
   }
 }

packages/odyssey-design-tokens/src/hue.json

@@ -151,7 +151,7 @@
         "value": "#a16c03"
       },
       "600": {
-        "value": "#986603"
+        "value": "#966603"
       },
       "700": {
         "value": "#664402"

packages/odyssey-design-tokens/src/palette.json

@@ -5,25 +5,29 @@
       "light": { "value": "{hue.blue.300.value}" },
       "main": { "value": "{hue.blue.500.value}" },
       "dark": { "value": "{hue.blue.700.value}" },
-      "darker": { "value": "{hue.blue.900.value}" }
+      "darker": { "value": "{hue.blue.900.value}" },
+      "text": { "value": "{hue.blue.600.value}" }
     },
     "danger": {
       "lighter": { "value": "{hue.red.50.value}" },
       "light": { "value": "{hue.red.300.value}" },
       "main": { "value": "{hue.red.500.value}" },
-      "dark": { "value": "{hue.red.900.value}" }
+      "dark": { "value": "{hue.red.900.value}" },
+      "text": { "value": "{hue.red.600.value}" }
     },
-    "caution": {
+    "warning": {
       "lighter": { "value": "{hue.yellow.50.value}" },
       "light": { "value": "{hue.yellow.300.value}" },
       "main": { "value": "{hue.yellow.500.value}" },
-      "dark": { "value": "{hue.yellow.900.value}" }
+      "dark": { "value": "{hue.yellow.900.value}" },
+      "text": { "value": "{hue.yellow.600.value}" }
     },
     "success": {
       "lighter": { "value": "{hue.green.50.value}" },
       "light": { "value": "{hue.green.300.value}" },
       "main": { "value": "{hue.green.500.value}" },
-      "dark": { "value": "{hue.green.900.value}" }
+      "dark": { "value": "{hue.green.900.value}" },
+      "text": { "value": "{hue.green.600.value}" }
     },
     "neutral": {
       "main": { "value": "{hue.neutral.600.value}" },

packages/odyssey-design-tokens/src/typography.json

@@ -13,15 +13,26 @@
         "comment": "Inverse text color typically used on a colorful background",
         "value": "{hue.neutral.white.value}"
       },
-      "action": {
-        "comment": "Branded text color, primarily used within button",
-        "value": "{palette.primary.main.value}"
-      },
       "sub": {
         "comment": "Text color for subordinate text like captions",
         "value": "{hue.neutral.600.value}"
       },
-      "danger": { "value": "{palette.danger.main.value}" }
+      "disabled": {
+        "value": "{hue.neutral.300.value}"
+      },
+      "action": {
+        "comment": "Branded text color, primarily used within button",
+        "value": "{palette.primary.text.value}"
+      },
+      "danger": {
+        "value": "{palette.danger.text.value}"
+      },
+      "success": {
+        "value": "{palette.success.text.value}"
+      },
+      "warning": {
+        "value": "{palette.warning.text.value}"
+      }
     },
     "family": {
       "body": {

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

@@ -22,7 +22,6 @@ export type CheckboxProps = {
   isInvalid?: boolean;
   isValid?: boolean;
   isChecked?: boolean;
-  isDefaultChecked?: boolean;
   isDisabled?: boolean;
   isIndeterminate?: boolean;
   isRequired?: boolean;
@@ -67,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/Radio.tsx

@@ -17,28 +17,25 @@ import { FormControlLabel } from ".";
 
 export type RadioProps = {
   isChecked?: boolean;
-  isDefaultChecked?: boolean;
   isDisabled?: boolean;
-  hasError?: boolean;
+  isInvalid?: boolean;
   label: string;
   name?: string;
   value: string;
 };
 
 const Radio = ({
   isChecked,
-  isDefaultChecked,
   isDisabled,
-  hasError,
+  isInvalid,
   label,
   name,
   value,
 }: RadioProps) => (
   <FormControlLabel
     checked={isChecked}
-    className={hasError ? "Mui-error" : ""}
+    className={isInvalid ? "Mui-error" : ""}
     control={<MuiRadio />}
-    defaultChecked={isDefaultChecked}
     disabled={isDisabled}
     label={label}
     name={name}

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

@@ -16,14 +16,19 @@ export type StatusProps = {
   /**
    * Determine the color and icon of the alert
    */
-  severity: "default" | "error" | "info" | "success" | "warning";
+  severity: "default" | "error" | "success" | "warning";
 
   /**
    * The text content of the status
    */
   label: string;
+
+  /**
+   * The style of indicator
+   */
+  variant?: "lamp" | "pill";
 };
 
-export const Status = ({ severity, label }: StatusProps) => (
-  <Chip label={label} color={severity} variant="status" />
+export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => (
+  <Chip label={label} color={severity} variant={variant} />
 );

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/Tag.tsx

@@ -11,25 +11,29 @@
  */
 
 import { Chip, ChipProps } from "@mui/material";
-import { memo, useContext } from "react";
+import { memo, ReactElement, useContext } from "react";
 import { TagListContext } from "./TagListContext";
+import { Icon } from "./Icon";
 
 export type TagProps = {
+  icon?: ReactElement<typeof Icon>;
   isDisabled?: boolean;
   label: string;
   onClick?: ChipProps["onClick"];
   onRemove?: ChipProps["onDelete"];
 };
 
-const Tag = ({ isDisabled, label, onClick, onRemove }: TagProps) => {
+const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
   return (
     <Chip
-      label={label}
       clickable={onClick ? true : false}
       component={chipElementType}
       disabled={isDisabled}
+      aria-disabled={isDisabled}
+      icon={icon}
+      label={label}
       onClick={onClick}
       onDelete={onRemove}
     />

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-react-mui/src/Tooltip.tsx

@@ -27,7 +27,7 @@ export const Tooltip = ({
   ariaType,
   children,
   text,
-  placement,
+  placement = "top",
 }: TooltipProps) => (
   <MuiTooltip
     describeChild={ariaType === "description"}