fix(modal): fix aria label not showing up (#12013)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 26, 2022 · a2afe00 · a2afe00
1 parent ec338ee
commit a2afe00
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 78 deletions.
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -156,7 +156,7 @@ const Modal = React.forwardRef(function Modal(
   );
 
   const ariaLabel =
-    modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
+    modalLabel || rest['aria-label'] || modalAriaLabel || modalHeading;
   const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
 
   const hasScrollingContentProps = hasScrollingContent

diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -7,7 +7,6 @@
 
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { action } from '@storybook/addon-actions';
 import Modal from './Modal';
 import Button from '../Button';
 import Select from '../Select';
@@ -17,70 +16,6 @@ import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
 import mdx from './Modal.mdx';
 
-const buttons = {
-  'None (0)': '0',
-  'One (1)': '1',
-  'Two (2)': '2',
-  'Three (3)': '3',
-};
-
-const props = {
-  modal: () => ({
-    numberOfButtons: ('Number of Buttons', buttons, '2'),
-    className: 'some-class',
-    open: true,
-    danger: false,
-    alert: false,
-    shouldSubmitOnEnter: false,
-    hasScrollingContent: false,
-    hasForm: false,
-    modalHeading: 'Modal heading',
-    modalLabel: 'Label',
-    modalAriaLabel:
-      'A label to be read by screen readers on the modal root node',
-    selectorPrimaryFocus: '[data-modal-primary-focus]',
-    size: 'md',
-    onBlur: action('onBlur'),
-    onClick: action('onClick'),
-    onFocus: action('onFocus'),
-    onRequestClose: action('onRequestClose'),
-    onRequestSubmit: action('onRequestSubmit'),
-    onSecondarySubmit: action('onSecondarySubmit'),
-    preventCloseOnClickOutside: true,
-    primaryButtonDisabled: false,
-    primaryButtonText: 'Primary button',
-  }),
-  modalFooter: (numberOfButtons) => {
-    const secondaryButtons = () => {
-      switch (numberOfButtons) {
-        case '2':
-          return {
-            secondaryButtonText: 'Secondary button',
-          };
-        case '3':
-          return {
-            secondaryButtons: [
-              {
-                buttonText: 'Keep both',
-                onClick: action('onClick'),
-              },
-              {
-                buttonText: 'Rename',
-                onClick: action('onClick'),
-              },
-            ],
-          };
-        default:
-          return null;
-      }
-    };
-    return {
-      passiveModal: false || numberOfButtons === '0',
-      ...secondaryButtons(),
-    };
-  },
-};
-
 export default {
   title: 'Components/Modal',
   component: Modal,
@@ -157,18 +92,15 @@ export const DangerModal = () => {
   );
 };
 
-export const Playground = () => {
-  const { size, numberOfButtons, hasScrollingContent, ...modalProps } =
-    props.modal();
-  const { passiveModal, ...footerProps } = props.modalFooter(numberOfButtons);
+export const Playground = (args) => {
   return (
     <Modal
-      passiveModal={numberOfButtons === '0' || passiveModal}
-      size={size || undefined}
-      hasScrollingContent={hasScrollingContent}
-      aria-label={hasScrollingContent ? 'Modal content' : undefined}
-      {...modalProps}
-      {...footerProps}>
+      open
+      modalHeading="Add a custom domain"
+      primaryButtonText="Add"
+      secondaryButtonText="Cancel"
+      aria-label="Modal content"
+      {...args}>
       <p style={{ marginBottom: '1rem' }}>
         Custom domains direct requests for your apps in this Cloud Foundry
         organization to a URL that you own. A custom domain can be a shared
@@ -185,8 +117,7 @@ export const Playground = () => {
         <SelectItem value="us-south" text="US South" />
         <SelectItem value="us-east" text="US East" />
       </Select>
-      <br />
-      {hasScrollingContent && (
+      {args.hasScrollingContent && (
         <>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
@@ -244,6 +175,63 @@ export const Playground = () => {
   );
 };
 
+Playground.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  id: {
+    table: {
+      disable: true,
+    },
+  },
+  modalHeading: {
+    control: 'text',
+  },
+  modalLabel: {
+    control: 'text',
+  },
+  onKeyDown: {
+    action: 'clicked',
+  },
+  onRequestClose: {
+    action: 'clicked',
+  },
+  onRequestSubmit: {
+    action: 'clicked',
+  },
+  onSecondarySubmit: {
+    action: 'clicked',
+  },
+  primaryButtonText: {
+    control: 'text',
+  },
+  secondaryButtons: {
+    table: {
+      disable: true,
+    },
+  },
+  secondaryButtonText: {
+    control: 'text',
+  },
+  selectorPrimaryFocus: {
+    table: {
+      disable: true,
+    },
+  },
+  selectorsFloatingMenus: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
 export const WithStateManager = () => {
   /**
    * Simple state manager for modals.