Added UX suggestions

cerner · Nov 22, 2023 · 2af1b1a · 2af1b1a
1 parent aec2ece
commit 2af1b1a
Show file tree

Hide file tree

Showing 183 changed files with 701 additions and 792 deletions.
diff --git a/packages/terra-notification-dialog/src/NotificationDialog.jsx b/packages/terra-notification-dialog/src/NotificationDialog.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import AbstractModal from 'terra-abstract-modal';
-import FocusTrap from 'focus-trap-react';
 import Button from 'terra-button';
 import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
@@ -30,8 +29,9 @@ const propTypes = {
    */
   variant: PropTypes.oneOf(variants).isRequired,
   /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
    * The title to describe the high-level overview of why the notification-dialog is being displayed to the user. Use a title that relates directly to the
-   * message/actions provided in the dialog.
+   * message/actions provided in the dialog. Adding a title, while optional, is always best practice.
    */
   dialogTitle: PropTypes.string,
   /**
@@ -101,21 +101,28 @@ const defaultProps = {
   custom: {},
 };
 
-const actionSection = (acceptAction, rejectAction, buttonOrder, emphasizedAction) => {
+const actionSection = (acceptAction, rejectAction, buttonOrder, emphasizedAction, refCallback) => {
   if (!acceptAction && !rejectAction) {
     return null;
   }
 
   const actionButtons = [];
-
   if (acceptAction) {
     const buttonVariant = emphasizedAction === 'accept' ? { variant: 'emphasis' } : {};
-    actionButtons.push(<Button {...buttonVariant} data-terra-notification-dialog-button="accept" key="accept" text={acceptAction.text} onClick={acceptAction.onClick} />);
+    if (buttonOrder === 'acceptFirst' || !rejectAction) {
+      actionButtons.push(<Button {...buttonVariant} refCallback={refCallback} tabIndex="0" data-terra-notification-dialog-button="accept" key="accept" text={acceptAction.text} onClick={acceptAction.onClick} />);
+    } else {
+      actionButtons.push(<Button {...buttonVariant} data-terra-notification-dialog-button="accept" key="accept" text={acceptAction.text} onClick={acceptAction.onClick} />);
+    }
   }
 
   if (rejectAction) {
     const buttonVariant = emphasizedAction === 'reject' ? { variant: 'emphasis' } : {};
-    actionButtons.push(<Button {...buttonVariant} data-terra-notification-dialog-button="reject" key="reject" text={rejectAction.text} onClick={rejectAction.onClick} />);
+    if (acceptAction && buttonOrder === 'acceptFirst') {
+      actionButtons.push(<Button {...buttonVariant} data-terra-notification-dialog-button="reject" key="reject" text={rejectAction.text} onClick={rejectAction.onClick} />);
+    } else {
+      actionButtons.push(<Button refCallback={refCallback} tabIndex="0" {...buttonVariant} data-terra-notification-dialog-button="reject" key="reject" text={rejectAction.text} onClick={rejectAction.onClick} />);
+    }
   }
 
   return (
@@ -127,6 +134,15 @@ const actionSection = (acceptAction, rejectAction, buttonOrder, emphasizedAction
 
 const NotificationDialog = (props) => {
   const theme = React.useContext(ThemeContext);
+  const notificationDialogRef = useRef();
+
+  const setNotificationDialogRef = (node) => {
+    notificationDialogRef.current = node;
+  };
+
+  useEffect(() => {
+    notificationDialogRef.current.focus();
+  }, []);
 
   const {
     dialogTitle,
@@ -156,48 +172,46 @@ const NotificationDialog = (props) => {
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   return (
     <AbstractModal
-      ariaLabelledBy="notification-dialog-signal-word"
-      aria-describedby={dialogTitle ? 'notification-dialog-title' : undefined}
+      ariaLabelledBy="header-container"
+      ariaDescribedBy="dialogBody"
       role={variant === 'custom' ? 'dialog' : 'alertdialog'}
       classNameModal={classNames(cx('notification-dialog', theme.className), customProps.className)}
-      onRequestClose={() => {}}
       isOpen
       closeOnOutsideClick={false}
       zIndex="9000"
       isCalledFromNotificationDialog
     >
-      <FocusTrap focusTrapOptions={{ returnFocusOnDeactivate: true, clickOutsideDeactivates: false, escapeDeactivates: false }}>
-        <div className={cx('notification-dialog-inner-wrapper')}>
-          <div className={cx('notification-dialog-container')} tabIndex="0" data-terra-notification-dialog>
-            <div className={cx(['floating-header-background', variant])} />
-            <div className={cx(['header'])}>
-              <div className={cx(['header-content'])}>
-                <NotificationIcon variant={variant} iconClassName={custom.iconClassName} />
-                <div className={cx('header-container')}>
-                  <div id="notification-dialog-signal-word" className={cx('signal-word')}>{signalWord}</div>
-                  <div id="notification-dialog-title" className={cx('title')}>{dialogTitle}</div>
-                </div>
+      <div className={cx('notification-dialog-inner-wrapper')}>
+        <div className={cx('notification-dialog-container')} tabIndex="-1" data-terra-notification-dialog>
+          <div className={cx(['floating-header-background', variant])} />
+          <div className={cx(['header'])}>
+            <div className={cx(['header-content'])}>
+              <NotificationIcon variant={variant} iconClassName={custom.iconClassName} />
+              <div id="header-container" className={cx('header-container')}>
+                <div id="notification-dialog-signal-word" className={cx('signal-word')}>{signalWord}</div>
+                <div id="notification-dialog-title" className={cx('title')}>{dialogTitle}</div>
               </div>
             </div>
-            <div className={cx('body')}>
-              {(startMessage)
-                && <div className={cx('message')}>{(startMessage)}</div>}
-              {content
-                && <div className={cx('message')}>{content}</div>}
-              {endMessage
-                && <div className={cx('message')}>{endMessage}</div>}
-            </div>
-            <div className={cx('footer')}>
-              {actionSection(
-                acceptAction,
-                rejectAction,
-                buttonOrder,
-                emphasizedAction,
-              )}
-            </div>
+          </div>
+          <div id="dialogBody" className={cx('body')}>
+            {(startMessage)
+              && <div className={cx('message')}>{(startMessage)}</div>}
+            {content
+              && <div className={cx('message')}>{content}</div>}
+            {endMessage
+              && <div className={cx('message')}>{endMessage}</div>}
+          </div>
+          <div className={cx('footer')}>
+            {actionSection(
+              acceptAction,
+              rejectAction,
+              buttonOrder,
+              emphasizedAction,
+              setNotificationDialogRef,
+            )}
           </div>
         </div>
-      </FocusTrap>
+      </div>
     </AbstractModal>
   );
   /* eslint-enable jsx-a11y/no-noninteractive-tabindex */