refactor: enable ARIA attributes on MenuButton (#1893)

okta · Jul 21, 2023 · 274abfe · 274abfe
1 parent 7d225b7
commit 274abfe
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 6 deletions.
diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/MenuButton.tsx
@@ -25,9 +25,17 @@ import { NullElement } from "./NullElement";
 
 export type MenuButtonProps = {
   /**
-   * aria-label to describe the button when the button label is empty, e.g., an Icon only Button
+   * The ARIA label for the Button
    */
   ariaLabel?: string;
+  /**
+   * The ID of the element that labels the Button
+   */
+  ariaLabelledBy?: string;
+  /**
+   * The ID of the element that describes the Button
+   */
+  ariaDescribedBy?: string;
   /**
    * The label on the triggering Button
    */
@@ -52,10 +60,28 @@ export type MenuButtonProps = {
    * The id of the Button
    */
   id?: string;
-};
+} & (
+  | {
+      buttonLabel: string;
+      ariaLabel?: string;
+      ariaLabelledBy?: string;
+    }
+  | {
+      buttonLabel?: undefined | "";
+      ariaLabel: string;
+      ariaLabelledBy?: string;
+    }
+  | {
+      buttonLabel?: undefined | "";
+      ariaLabel?: string;
+      ariaLabelledBy: string;
+    }
+);
 
 const MenuButton = ({
   ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
@@ -100,6 +126,8 @@ const MenuButton = ({
         onClick={openMenu}
         text={buttonLabel}
         ariaLabel={ariaLabel}
+        ariaLabelledBy={ariaLabelledBy}
+        ariaDescribedBy={ariaDescribedBy}
         variant={buttonVariant}
       />
 

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
@@ -89,7 +89,27 @@ const storybookMeta: Meta<MenuButtonProps> = {
     ariaLabel: {
       control: "text",
       description:
-        "aria-label to describe the button when the button label is empty",
+        "aria-label to describe the MenuButton when the button label is empty",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    ariaLabelledBy: {
+      control: "text",
+      description:
+        "The ID of the element that labels the MenuButton. Only needed if the button has no text and `ariaLabel` is empty.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    ariaDescribedBy: {
+      control: "text",
+      description:
+        "The ID of the element that describes the MenuButton, if one exists.",
       table: {
         type: {
           summary: "string",
@@ -130,7 +150,15 @@ export const Simple: StoryObj<MenuButtonProps> = {
       <MenuItem key="3">Launch</MenuItem>,
     ],
   },
-  play: async ({ args, canvasElement, step }) => {
+  play: async ({
+    args,
+    canvasElement,
+    step,
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
     clickMenuButton({ canvasElement, step })(args, "Menu Button Simple");
   },
 };
@@ -158,7 +186,15 @@ export const ActionIcons: StoryObj<MenuButtonProps> = {
       </MenuItem>,
     ],
   },
-  play: async ({ args, canvasElement, step }) => {
+  play: async ({
+    args,
+    canvasElement,
+    step,
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
     clickMenuButton({ canvasElement, step })(args, "Menu Button Action Icons");
   },
 };
@@ -202,7 +238,15 @@ export const WithDestructive: StoryObj<MenuButtonProps> = {
       </MenuItem>,
     ],
   },
-  play: async ({ args, canvasElement, step }) => {
+  play: async ({
+    args,
+    canvasElement,
+    step,
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
     clickMenuButton({ canvasElement, step })(args, "Menu Button Destructive");
   },
 };