feat(modal): support alertdialog aria role (#5955)

* feat(modal): support alertdialog aria role * feat(modal): support alert role for passive modals Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 22, 2020 · 825f03a · 825f03a
1 parent 49f0b77
commit 825f03a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 0 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3072,6 +3072,9 @@ Map {
       "selectorPrimaryFocus": "[data-modal-primary-focus]",
     },
     "propTypes": Object {
+      "alert": Object {
+        "type": "bool",
+      },
       "aria-label": [Function],
       "children": Object {
         "type": "node",

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -28,6 +28,7 @@ const props = () => ({
   open: boolean('Open (open)', true),
   passiveModal: boolean('Without footer (passiveModal)', false),
   danger: boolean('Danger mode (danger)', false),
+  alert: boolean('Alert mode (alert)', false),
   shouldSubmitOnEnter: boolean(
     'Enter key to submit (shouldSubmitOnEnter)',
     false
@@ -71,6 +72,7 @@ const titleOnlyProps = () => {
     open: boolean('Open (open)', true),
     passiveModal,
     danger: !passiveModal && boolean('Danger mode (danger)', false),
+    alert: !passiveModal && boolean('Alert mode (alert)', false),
     modalHeading: text(
       'Modal heading (modalHeading)',
       `

diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js
@@ -17,6 +17,7 @@ const { prefix } = settings;
 
 // The modal is the 0th child inside the wrapper on account of focus-trap-react
 const getModal = (wrapper) => wrapper.find('.bx--modal');
+const getModalBody = (wrapper) => wrapper.find('.bx--modal-container');
 
 describe('Modal', () => {
   describe('Renders as expected', () => {
@@ -287,3 +288,26 @@ describe('Danger Modal', () => {
     });
   });
 });
+describe('Alert Modal', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<Modal aria-label="test" alert />);
+
+    it('has the expected attributes', () => {
+      expect(getModalBody(wrapper).props()).toEqual(
+        expect.objectContaining({
+          role: 'alertdialog',
+          'aria-describedby': expect.any(String),
+        })
+      );
+    });
+
+    it('should be a passive modal when passiveModal is passed', () => {
+      wrapper.setProps({ passiveModal: true });
+      expect(getModalBody(wrapper).props()).toEqual(
+        expect.objectContaining({
+          role: 'alert',
+        })
+      );
+    });
+  });
+});
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -118,6 +118,12 @@ export default class Modal extends Component {
      */
     danger: PropTypes.bool,
 
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning
+     * Should go hand in hand with the danger prop.
+     */
+    alert: PropTypes.bool,
+
     /**
      * Specify if Enter key should be used as "submit" action
      */
@@ -184,6 +190,7 @@ export default class Modal extends Component {
   modalInstanceId = `modal-${getInstanceId()}`;
   modalLabelId = `${prefix}--modal-header__label--${this.modalInstanceId}`;
   modalHeadingId = `${prefix}--modal-header__heading--${this.modalInstanceId}`;
+  modalBodyId = `${prefix}--modal-body--${this.modalInstanceId}`;
 
   handleKeyDown = (evt) => {
     if (this.props.open) {
@@ -307,6 +314,7 @@ export default class Modal extends Component {
       iconDescription,
       primaryButtonDisabled,
       danger,
+      alert,
       selectorPrimaryFocus, // eslint-disable-line
       selectorsFloatingMenus, // eslint-disable-line
       shouldSubmitOnEnter, // eslint-disable-line
@@ -366,10 +374,20 @@ export default class Modal extends Component {
         }
       : {};
 
+    const alertDialogProps = {};
+    if (alert && passiveModal) {
+      alertDialogProps.role = 'alert';
+    }
+    if (alert && !passiveModal) {
+      alertDialogProps.role = 'alertdialog';
+      alertDialogProps['aria-describedby'] = this.modalBodyId;
+    }
+
     const modalBody = (
       <div
         ref={this.innerModal}
         role="dialog"
+        {...alertDialogProps}
         className={containerClasses}
         aria-label={ariaLabel}
         aria-modal="true"
@@ -391,6 +409,7 @@ export default class Modal extends Component {
           {!passiveModal && modalButton}
         </div>
         <div
+          id={this.modalBodyId}
           className={contentClasses}
           {...hasScrollingContentProps}
           aria-labelledby={getAriaLabelledBy}>

diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -140,6 +140,7 @@ exports[`ModalWrapper should render 1`] = `
           <div
             aria-labelledby="bx--modal-header__label--modal-1"
             className="bx--modal-content"
+            id="bx--modal-body--modal-1"
           >
             <p
               className="bx--modal-content__text"