@patternfly/react-core 6.0.0-alpha.64 → 6.0.0-alpha.66

package/src/demos/MultipleFileUploadDemos.md

@@ -4,6 +4,7 @@ section: components
 subsection: file-upload
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 ## Demos
@@ -13,4 +14,5 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.
 
 ```ts file="./examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx"
+
 ```

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -5,10 +5,10 @@ import {
   MultipleFileUploadMain,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Modal,
   Checkbox,
   DropEvent
 } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -135,7 +135,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             ))}
           </MultipleFileUploadStatus>
         )}
-        <Modal
+        <ModalDeprecated
           isOpen={!!modalText}
           title="Unsupported file"
           titleIconVariant="warning"
@@ -144,7 +144,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
           onClose={() => setModalText('')}
         >
           {modalText}
-        </Modal>
+        </ModalDeprecated>
       </MultipleFileUpload>
       <Checkbox
         id="horizontal-checkbox"

package/src/{next → deprecated}/components/Modal/Modal.tsx

@@ -7,29 +7,53 @@ import { ModalContent } from './ModalContent';
 import { OUIAProps, getDefaultOUIAId } from '../../../helpers';
 
 export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
   /** The parent container to append the modal to. Defaults to "document.body". */
   appendTo?: HTMLElement | (() => HTMLElement);
-  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+  /** Id to use for the modal box descriptor. */
   'aria-describedby'?: string;
-  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  /** Accessible descriptor of the modal. */
   'aria-label'?: string;
-  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  /** Id to use for the modal box label. */
   'aria-labelledby'?: string;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: string;
   /** Content rendered inside the modal. */
   children: React.ReactNode;
   /** Additional classes added to the modal. */
   className?: string;
+  /** Description of the modal. */
+  description?: React.ReactNode;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
+  header?: React.ReactNode;
+  /** Optional help section for the modal header. */
+  help?: React.ReactNode;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
-  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
+  /** A callback for when the close button is clicked. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
   /** Modal handles pressing of the escape key and closes the modal. If you want to handle
    * this yourself you can use this callback function. */
@@ -38,6 +62,16 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
   positionOffset?: string;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
+  title?: string;
+  /** Optional alert icon (or other) to show before the title of the modal header. When the
+   * predefined alert types are used the default styling will be automatically applied.
+   */
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+  /** Optional title label text for screen readers. */
+  titleLabel?: string;
   /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
   /** Default width of the modal. */
@@ -66,10 +100,24 @@ class Modal extends React.Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
   boxId = '';
+  labelId = '';
+  descriptorId = '';
 
   static defaultProps: PickOptional<ModalProps> = {
+    className: '',
     isOpen: false,
+    title: '',
+    titleIconVariant: null,
+    titleLabel: '',
+    'aria-label': '',
+    showClose: true,
+    'aria-describedby': '',
+    'aria-labelledby': '',
+    id: undefined,
+    actions: [] as any[],
+    onClose: () => undefined as any,
     variant: 'default',
+    hasNoBodyWrapper: false,
     appendTo: () => document.body,
     ouiaSafe: true,
     position: 'default'
@@ -78,7 +126,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
   constructor(props: ModalProps) {
     super(props);
     const boxIdNum = Modal.currentId++;
+    const labelIdNum = boxIdNum + 1;
+    const descriptorIdNum = boxIdNum + 2;
     this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+    this.labelId = `pf-modal-part-${labelIdNum}`;
+    this.descriptorId = `pf-modal-part-${descriptorIdNum}`;
 
     this.state = {
       container: undefined,
@@ -116,9 +168,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
   componentDidMount() {
     const {
       appendTo,
-      'aria-describedby': ariaDescribedby,
+      title,
       'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby
+      'aria-labelledby': ariaLabelledby,
+      hasNoBodyWrapper,
+      header
     } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     const container = document.createElement('div');
@@ -132,9 +186,16 @@ class Modal extends React.Component<ModalProps, ModalState> {
       target.classList.remove(css(styles.backdropOpen));
     }
 
-    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
+    if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
       // eslint-disable-next-line no-console
-      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
+      console.error('Modal: Specify at least one of: title, aria-label, aria-labelledby.');
+    }
+
+    if (this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby) && (hasNoBodyWrapper || header)) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Modal: When using hasNoBodyWrapper or setting a custom header, ensure you assign an accessible name to the the modal container with aria-label or aria-labelledby.'
+      );
     }
   }
 
@@ -170,6 +231,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
       'aria-labelledby': ariaLabelledby,
       'aria-label': ariaLabel,
       'aria-describedby': ariaDescribedby,
+      bodyAriaLabel,
+      bodyAriaRole,
+      title,
+      titleIconVariant,
+      titleLabel,
       ouiaId,
       ouiaSafe,
       position,
@@ -184,15 +250,22 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
     return ReactDOM.createPortal(
       <ModalContent
+        {...props}
         boxId={this.boxId}
+        labelId={this.labelId}
+        descriptorId={this.descriptorId}
+        title={title}
+        titleIconVariant={titleIconVariant}
+        titleLabel={titleLabel}
         aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
         aria-labelledby={ariaLabelledby}
+        bodyAriaLabel={bodyAriaLabel}
+        bodyAriaRole={bodyAriaRole}
         ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
         ouiaSafe={ouiaSafe}
         position={position}
         elementToFocus={elementToFocus}
-        {...props}
       />,
       container
     ) as React.ReactElement;

package/src/{next → deprecated}/components/Modal/ModalBox.tsx

@@ -4,9 +4,9 @@ import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
 
 export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
-  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId */
-  'aria-describedby'?: string;
-  /** Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  /** Id to use for the modal box description. */
+  'aria-describedby': string;
+  /** Accessible descriptor of the modal. */
   'aria-label'?: string;
   /** Id to use for the modal box label. */
   'aria-labelledby'?: string;
@@ -24,12 +24,12 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
 
 export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   children,
-  className,
+  className = '',
   variant = 'default',
   position,
   positionOffset,
   'aria-labelledby': ariaLabelledby,
-  'aria-label': ariaLabel,
+  'aria-label': ariaLabel = '',
   'aria-describedby': ariaDescribedby,
   style,
   ...props
@@ -40,6 +40,7 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   }
   return (
     <div
+      {...props}
       role="dialog"
       aria-label={ariaLabel || null}
       aria-labelledby={ariaLabelledby || null}
@@ -54,7 +55,6 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
         variant === 'medium' && styles.modifiers.md
       )}
       style={style}
-      {...props}
     >
       {children}
     </div>

package/src/{next → deprecated}/components/Modal/ModalBoxCloseButton.tsx

@@ -18,7 +18,7 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
 
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
   className,
-  onClose,
+  onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close',
   ouiaId,
   ...props

package/src/{next → deprecated}/components/Modal/ModalBoxTitle.tsx

@@ -17,29 +17,27 @@ export interface ModalBoxTitleProps {
   /** Additional classes added to the modal box title. */
   className?: string;
   /** Id of the modal box title. */
-  id?: string;
+  id: string;
   /** Content rendered inside the modal box title. */
   title: React.ReactNode;
   /** Optional alert icon (or other) to show before the title. When the predefined alert types
    * are used the default styling will be automatically applied. */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
   /** Optional title label text for screen readers. */
-  titleScreenReaderText?: string;
+  titleLabel?: string;
 }
 
 export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
-  className,
+  className = '',
   id,
   title,
   titleIconVariant,
-  titleScreenReaderText,
+  titleLabel = '',
   ...props
 }: ModalBoxTitleProps) => {
   const [hasTooltip, setHasTooltip] = React.useState(false);
   const h1 = React.useRef<HTMLHeadingElement>(null);
-  const label =
-    titleScreenReaderText ||
-    (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleScreenReaderText);
+  const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel);
   const variantIcons = {
     success: <CheckCircleIcon />,
     danger: <ExclamationCircleIcon />,

package/src/deprecated/components/Modal/ModalContent.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { FocusTrap } from '../../../helpers';
+import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
+import { css } from '@patternfly/react-styles';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+
+import { Backdrop } from '../../../components/Backdrop/Backdrop';
+import { ModalBoxBody } from './ModalBoxBody';
+import { ModalBoxCloseButton } from './ModalBoxCloseButton';
+import { ModalBox } from './ModalBox';
+import { ModalBoxFooter } from './ModalBoxFooter';
+import { ModalBoxDescription } from './ModalBoxDescription';
+import { ModalBoxHeader } from './ModalBoxHeader';
+import { ModalBoxTitle, isVariantIcon } from './ModalBoxTitle';
+
+export interface ModalContentProps extends OUIAProps {
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
+  /** Id to use for the modal box descriptor. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string | null;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: string;
+  /** Id of the modal box container. */
+  boxId: string;
+  /** Content rendered inside the modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal box. */
+  className?: string;
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Id of the modal box description. */
+  descriptorId: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** The element to focus when the modal opens. By default the first
+   * focusable element will receive focus.
+   */
+  elementToFocus?: HTMLElement | SVGElement | string;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
+  header?: React.ReactNode;
+  /** Optional help section for the modal header. */
+  help?: React.ReactNode;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Id of the modal box title. */
+  labelId: string;
+  /** A callback for when the close button is clicked. */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
+  title?: string;
+  /** Optional alert icon (or other) to show before the title of the modal header. When the
+   * predefined alert types are used the default styling will be automatically applied.
+   */
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+  /** Optional title label text for screen readers. */
+  titleLabel?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
+  width?: number | string;
+  /** Maximum width of the modal. */
+  maxWidth?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
+  children,
+  className = '',
+  isOpen = false,
+  header = null,
+  help = null,
+  description = null,
+  title = '',
+  titleIconVariant = null,
+  titleLabel = '',
+  'aria-label': ariaLabel = '',
+  'aria-describedby': ariaDescribedby,
+  'aria-labelledby': ariaLabelledby,
+  bodyAriaLabel,
+  bodyAriaRole,
+  showClose = true,
+  footer = null,
+  actions = [],
+  onClose = () => undefined as any,
+  variant = 'default',
+  position,
+  positionOffset,
+  width,
+  maxWidth,
+  boxId,
+  labelId,
+  descriptorId,
+  disableFocusTrap = false,
+  hasNoBodyWrapper = false,
+  ouiaId,
+  ouiaSafe = true,
+  elementToFocus,
+  ...props
+}: ModalContentProps) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalBoxHeader = header ? (
+    <ModalBoxHeader help={help}>{header}</ModalBoxHeader>
+  ) : (
+    title && (
+      <ModalBoxHeader help={help}>
+        <ModalBoxTitle title={title} titleIconVariant={titleIconVariant} titleLabel={titleLabel} id={labelId} />
+        {description && <ModalBoxDescription id={descriptorId}>{description}</ModalBoxDescription>}
+      </ModalBoxHeader>
+    )
+  );
+
+  const modalBoxFooter = footer ? (
+    <ModalBoxFooter>{footer}</ModalBoxFooter>
+  ) : (
+    actions.length > 0 && <ModalBoxFooter>{actions}</ModalBoxFooter>
+  );
+
+  const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
+
+  const hasNoDescription = !description && !ariaDescribedby;
+  const id = hasNoDescription ? descriptorId : undefined;
+
+  const modalBody = hasNoBodyWrapper ? (
+    children
+  ) : (
+    <ModalBoxBody aria-label={bodyAriaLabel} role={bodyAriaRole || defaultModalBodyAriaRole} {...props} id={id}>
+      {children}
+    </ModalBoxBody>
+  );
+  const ariaLabelledbyFormatted = (): null | string => {
+    if (ariaLabelledby === null) {
+      return null;
+    }
+    const idRefList: string[] = [];
+    if ((ariaLabel && boxId) !== '') {
+      idRefList.push(ariaLabel && boxId);
+    }
+    if (ariaLabelledby) {
+      idRefList.push(ariaLabelledby);
+    }
+    if (title) {
+      idRefList.push(labelId);
+    }
+    return idRefList.join(' ');
+  };
+
+  const modalBox = (
+    <ModalBox
+      id={boxId}
+      className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
+      variant={variant}
+      position={position}
+      positionOffset={positionOffset}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledbyFormatted()}
+      aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
+      {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
+      style={
+        {
+          ...(width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
+          ...(maxWidth && {
+            '--pf-v6-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
+          })
+        } as React.CSSProperties
+      }
+    >
+      {showClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
+      {modalBoxHeader}
+      {modalBody}
+      {modalBoxFooter}
+    </ModalBox>
+  );
+  return (
+    <Backdrop>
+      <FocusTrap
+        active={!disableFocusTrap}
+        focusTrapOptions={{
+          clickOutsideDeactivates: true,
+          tabbableOptions: { displayCheck: 'none' },
+          // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+          // We want to prevent this in case false is ever passed in.
+          initialFocus: elementToFocus || undefined
+        }}
+        className={css(bullsEyeStyles.bullseye)}
+      >
+        {modalBox}
+      </FocusTrap>
+    </Backdrop>
+  );
+};
+ModalContent.displayName = 'ModalContent';

package/src/{next → deprecated}/components/Modal/__tests__/Modal.test.tsx

@@ -13,6 +13,7 @@ jest.spyOn(document, 'createElement');
 jest.spyOn(document.body, 'addEventListener');
 
 const props = {
+  title: 'Modal',
   onClose: jest.fn(),
   isOpen: false,
   children: 'modal content'
@@ -47,9 +48,9 @@ describe('Modal', () => {
   test('modal closes with escape', async () => {
     const user = userEvent.setup();
 
-    render(<Modal {...props} isOpen appendTo={document.body} aria-label="modal-div" />);
+    render(<Modal {...props} isOpen appendTo={document.body} />);
 
-    await user.type(screen.getByLabelText('modal-div'), `{${KeyTypes.Escape}}`);
+    await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 
@@ -69,17 +70,13 @@ describe('Modal', () => {
     expect(document.body).not.toHaveClass(css(styles.backdropOpen));
   });
 
-  test('modal shows the close button when onClose prop is passed (true by default)', () => {
+  test('modal shows the close button when showClose is true (true by default)', () => {
     render(<Modal {...props} isOpen />);
     expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
   });
 
-  test('modal does not show the close button when onClose not passed', () => {
-    render(
-      <Modal isOpen disableFocusTrap>
-        No close button{' '}
-      </Modal>
-    );
+  test('modal does not show the close button when showClose is false', () => {
+    render(<Modal {...props} isOpen showClose={false} tabIndex={0} />);
     expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
   });
 
@@ -97,6 +94,21 @@ describe('Modal', () => {
     expect(consoleErrorMock).toHaveBeenCalled();
   });
 
+  test('modal generates console warning when conflicting accessible name strategies are provided', () => {
+    const props = {
+      hasNoBodyWrapper: true,
+      onClose: jest.fn(),
+      isOpen: true,
+      children: 'modal content'
+    };
+    const consoleErrorMock = jest.fn();
+    global.console = { error: consoleErrorMock } as any;
+
+    render(<Modal {...props} />);
+
+    expect(consoleErrorMock).toHaveBeenCalled();
+  });
+
   test('modal adds aria-hidden attribute to its siblings when open', () => {
     render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
 
@@ -142,4 +154,59 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+  test('The modalBoxBody has no aria-label when bodyAriaLabel is not passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(<Modal {...props}>This is a ModalBox</Modal>);
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).not.toHaveAccessibleName('modal box body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria-label when bodyAriaLabel is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).toHaveAccessibleName('modal box body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaLabel is passed and bodyAriaRole is not', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByRole('region', { name: 'modal box body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaRole is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" bodyAriaRole="article" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByRole('article', { name: 'modal box body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
 });

package/src/deprecated/components/Modal/__tests__/ModalBoxHeader.test.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalBoxHeader } from '../ModalBoxHeader';
+
+test('ModalBoxHeader Test', () => {
+  const { asFragment } = render(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxHeader help renders', () => {
+  const { asFragment } = render(<ModalBoxHeader help={<div>test</div>}>This is a ModalBox header</ModalBoxHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});