@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/Menu/examples/MenuBasic.tsx

@@ -25,7 +25,7 @@ export const MenuBasic: React.FunctionComponent = () => {
               itemId={1}
               to="#default-link2"
               // just for demo so that navigation is not triggered
-              onClick={event => event.preventDefault()}
+              onClick={(event) => event.preventDefault()}
             >
               Link
             </MenuItem>
@@ -33,10 +33,14 @@ export const MenuBasic: React.FunctionComponent = () => {
             <MenuItem isDisabled to="#default-link4">
               Disabled link
             </MenuItem>
-            <MenuItem isAriaDisabled tooltipProps={{content: "aria-disabled action", position: "top"}}>
+            <MenuItem isAriaDisabled tooltipProps={{ content: 'aria-disabled action', position: 'top' }}>
               Aria-disabled action
             </MenuItem>
-            <MenuItem isAriaDisabled to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+            <MenuItem
+              isAriaDisabled
+              to="#default-link5"
+              tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+            >
               Aria-disabled link
             </MenuItem>
           </MenuList>

package/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -8,7 +8,7 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.indexOf(item) !== -1) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+      setSelectedItems(selectedItems.filter((id) => id !== item));
     } else {
       setSelectedItems([...selectedItems, item]);
     }

package/src/components/Menu/examples/MenuScrollable.tsx

@@ -33,7 +33,7 @@ export const MenuScrollable: React.FunctionComponent = () => {
             itemId={15}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Link
           </MenuItem>

package/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx

@@ -33,7 +33,7 @@ export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {
             itemId={15}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Link
           </MenuItem>

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -11,7 +11,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.indexOf(item) !== -1) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+      setSelectedItems(selectedItems.filter((id) => id !== item));
     } else {
       setSelectedItems([...selectedItems, item]);
     }

package/src/components/Menu/examples/MenuWithCheckbox.tsx

@@ -8,7 +8,7 @@ export const MenuWithCheckbox: React.FunctionComponent = () => {
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.includes(item)) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+      setSelectedItems(selectedItems.filter((id) => id !== item));
     } else {
       setSelectedItems([...selectedItems, item]);
     }

package/src/components/Menu/examples/MenuWithFavorites.tsx

@@ -20,7 +20,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
     if (actionId === 'fav') {
       const isFavorite = favorites.includes(itemId);
       if (isFavorite) {
-        setFavorites(favorites.filter(fav => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== itemId));
       } else {
         setFavorites([...favorites, itemId]);
       }
@@ -59,8 +59,8 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
             <MenuGroup label="Favorites" labelHeadingLevel="h3">
               <MenuList>
                 {items
-                  .filter(item => favorites.includes(item.itemId))
-                  .map(item => {
+                  .filter((item) => favorites.includes(item.itemId))
+                  .map((item) => {
                     const { text, description, itemId, action, actionId } = item;
                     return (
                       <MenuItem
@@ -81,7 +81,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
         )}
         <MenuGroup label="All actions" labelHeadingLevel="h3">
           <MenuList>
-            {items.map(item => {
+            {items.map((item) => {
               const { text, description, itemId, action, actionId } = item;
               const isFavorited = favorites.includes(item.itemId);
               return (

package/src/components/Menu/examples/MenuWithFooter.tsx

@@ -20,7 +20,7 @@ export const MenuWithFooter: React.FunctionComponent = () => {
             itemId={1}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Link
           </MenuItem>

package/src/components/Menu/examples/MenuWithViewMore.tsx

@@ -15,7 +15,7 @@ export const MenuWithViewMore: React.FunctionComponent = () => {
       itemId={'view-more-1'}
       to="#default-link2"
       // just for demo so that navigation is not triggered
-      onClick={event => event.preventDefault()}
+      onClick={(event) => event.preventDefault()}
     >
       Link
     </MenuItem>,
@@ -95,7 +95,7 @@ export const MenuWithViewMore: React.FunctionComponent = () => {
     <Menu activeItemId={activeItem} onSelect={onSelect}>
       <MenuContent>
         <MenuList>
-          {visibleOptions.map(option => {
+          {visibleOptions.map((option) => {
             const props = option.props;
 
             return <MenuItem key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;

package/src/components/MenuToggle/MenuToggle.tsx

@@ -47,7 +47,7 @@ export interface MenuToggleProps
   innerRef?: React.Ref<MenuToggleElement>;
 }
 
-export class MenuToggleBase extends React.Component<MenuToggleProps> {
+class MenuToggleBase extends React.Component<MenuToggleProps> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',

package/src/components/MenuToggle/MenuToggleAction.tsx

@@ -15,7 +15,7 @@ export interface MenuToggleActionProps {
   id?: string;
 }
 
-export class MenuToggleAction extends React.Component<MenuToggleActionProps> {
+class MenuToggleAction extends React.Component<MenuToggleActionProps> {
   static displayName = 'MenuToggleAction';
   static defaultProps: MenuToggleActionProps = {
     className: '',
@@ -40,3 +40,5 @@ export class MenuToggleAction extends React.Component<MenuToggleActionProps> {
     );
   }
 }
+
+export { MenuToggleAction };

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -33,7 +33,7 @@ export interface MenuToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
   static displayName = 'MenuToggleCheckbox';
   static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
     isValid: true,
@@ -90,7 +90,7 @@ export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps,
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
           name={id}
           type="checkbox"
-          ref={elem => elem && (elem.indeterminate = isChecked === null)}
+          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           aria-invalid={!isValid}
           disabled={isDisabled}
           {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
@@ -106,3 +106,5 @@ export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps,
     );
   }
 }
+
+export { MenuToggleCheckbox };

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -10,7 +10,7 @@ import './MenuToggle.css'
 
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
@@ -118,7 +118,7 @@ This can be used alongside a text label that provides more context for the image
 ```ts
 import React from 'react';
 import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 <React.Fragment>
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
+import {
+  MenuToggle,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button
+} from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const MenuToggleTypeahead: React.FunctionComponent = () => {
@@ -10,10 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
   };
 
   return (
-    <MenuToggle
-      variant="typeahead"
-      isFullWidth
-    >
+    <MenuToggle variant="typeahead" isFullWidth>
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}
@@ -32,4 +35,4 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
       </TextInputGroup>
     </MenuToggle>
   );
-}
+};

package/src/components/Modal/Modal.tsx

@@ -37,6 +37,10 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   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. */
@@ -72,6 +76,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   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. */
@@ -90,7 +96,7 @@ interface ModalState {
   ouiaStateId: string;
 }
 
-export class Modal extends React.Component<ModalProps, ModalState> {
+class Modal extends React.Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
   boxId = '';
@@ -213,6 +219,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
     }
     target.removeEventListener('keydown', this.handleEscKeyClick, false);
     target.classList.remove(css(styles.backdropOpen));
+    this.toggleSiblingsFromScreenReaders(false);
   }
 
   render() {
@@ -232,6 +239,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
       ouiaId,
       ouiaSafe,
       position,
+      elementToFocus,
       ...props
     } = this.props;
     const { container } = this.state;
@@ -257,8 +265,11 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
         ouiaSafe={ouiaSafe}
         position={position}
+        elementToFocus={elementToFocus}
       />,
       container
     ) as React.ReactElement;
   }
 }
+
+export { Modal };

package/src/components/Modal/ModalBoxCloseButton.tsx

@@ -10,6 +10,8 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
   className?: string;
   /** A callback for when the close button is clicked. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Accessible descriptor of the close button. */
+  'aria-label'?: string;
   /** Value to set the data-ouia-component-id.*/
   ouiaId?: number | string;
 }
@@ -17,6 +19,7 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
   className,
   onClose = () => undefined as any,
+  'aria-label': ariaLabel = 'Close',
   ouiaId,
   ...props
 }: ModalBoxCloseButtonProps) => (
@@ -24,7 +27,7 @@ export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonPro
     <Button
       variant="plain"
       onClick={(event) => onClose(event)}
-      aria-label="Close"
+      aria-label={ariaLabel}
       {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
       {...props}
     >

package/src/components/Modal/ModalBoxTitle.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import { css } from '@patternfly/react-styles';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { capitalize } from '../../helpers';
 import { Tooltip } from '../Tooltip';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -64,7 +63,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
           {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
         </span>
       )}
-      {label && <span className={css(accessibleStyles.screenReader)}>{label}</span>}
+      {label && <span className="pf-v5-screen-reader">{label}</span>}
       <span className={css(modalStyles.modalBoxTitleText)}>{title}</span>
     </h1>
   );

package/src/components/Modal/ModalContent.tsx

@@ -47,6 +47,10 @@ export interface ModalContentProps extends OUIAProps {
   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. */
@@ -79,6 +83,8 @@ export interface ModalContentProps extends OUIAProps {
   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. */
@@ -107,7 +113,8 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   variant = 'default',
   position,
   positionOffset,
-  width = -1,
+  width,
+  maxWidth,
   boxId,
   labelId,
   descriptorId,
@@ -115,6 +122,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   hasNoBodyWrapper = false,
   ouiaId,
   ouiaSafe = true,
+  elementToFocus,
   ...props
 }: ModalContentProps) => {
   if (!isOpen) {
@@ -152,7 +160,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       {children}
     </ModalBoxBody>
   );
-  const boxStyle = width === -1 ? {} : { width };
   const ariaLabelledbyFormatted = (): null | string => {
     if (ariaLabelledby === null) {
       return null;
@@ -173,7 +180,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   const modalBox = (
     <ModalBox
       id={boxId}
-      style={boxStyle}
       className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
       variant={variant}
       position={position}
@@ -182,6 +188,14 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       aria-labelledby={ariaLabelledbyFormatted()}
       aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
       {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
+      style={
+        {
+          ...(width && { '--pf-v5-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
+          ...(maxWidth && {
+            '--pf-v5-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
+          })
+        } as React.CSSProperties
+      }
     >
       {showClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
       {modalBoxHeader}
@@ -193,7 +207,13 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     <Backdrop>
       <FocusTrap
         active={!disableFocusTrap}
-        focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
+        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}

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

@@ -19,6 +19,26 @@ const props = {
   children: 'modal content'
 };
 
+const target = document.createElement('div');
+
+const ModalWithSiblings = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isModalMounted, setIsModalMounted] = React.useState(true);
+  const modalProps = { ...props, isOpen, appendTo: target, onClose: () => setIsOpen(false) };
+
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <article>Section sibling</article>
+      {isModalMounted && (
+        <Modal {...modalProps}>
+          <button onClick={() => setIsModalMounted(false)}>Unmount Modal</button>
+        </Modal>
+      )}
+    </>
+  );
+};
+
 describe('Modal', () => {
   test('Modal creates a container element once for div', () => {
     render(<Modal {...props} />);
@@ -27,7 +47,7 @@ describe('Modal', () => {
 
   test('modal closes with escape', async () => {
     const user = userEvent.setup();
-    
+
     render(<Modal {...props} isOpen appendTo={document.body} />);
 
     await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
@@ -89,6 +109,51 @@ describe('Modal', () => {
     expect(consoleErrorMock).toHaveBeenCalled();
   });
 
+  test('modal adds aria-hidden attribute to its siblings when open', () => {
+    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+  });
+
+  test('modal removes the aria-hidden attribute from its siblings when closed', async () => {
+    const user = userEvent.setup();
+
+    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+
+    await user.click(closeButton);
+
+    expect(articleSibling).not.toHaveAttribute('aria-hidden');
+    expect(asideSibling).not.toHaveAttribute('aria-hidden');
+  });
+
+  test('modal removes the aria-hidden attribute from its siblings when unmounted', async () => {
+    const user = userEvent.setup();
+
+    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+    const unmountButton = screen.getByRole('button', { name: 'Unmount Modal' });
+
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+
+    await user.click(unmountButton);
+
+    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

package/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`ModalBoxTitle alert variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Warning alert:
     </span>
@@ -93,7 +93,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Custom alert:
     </span>
@@ -130,7 +130,7 @@ exports[`ModalBoxTitle danger variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Danger alert:
     </span>
@@ -167,7 +167,7 @@ exports[`ModalBoxTitle info variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Info alert:
     </span>
@@ -204,7 +204,7 @@ exports[`ModalBoxTitle success variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Success alert:
     </span>

package/src/components/Modal/examples/Modal.md

@@ -144,3 +144,11 @@ To submit the form from a button in the modal's footer (outside of the `<Form>`)
 ```ts file="ModalWithForm.tsx"
 
 ```
+
+### Custom focus
+
+Use the `elementToFocus` property to customize which element inside the Modal receives focus when initially opened.
+
+```ts file="./ModalCustomFocus.tsx"
+
+```

package/src/components/Modal/examples/ModalCustomFocus.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalCustomFocus: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
+        Show modal with custom focus
+      </Button>
+      <Modal
+        elementToFocus="#modal-custom-focus-confirm-button"
+        title="Modal with custom focus"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button id="modal-custom-focus-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/components/Modal/examples/ModalWithOverflowingContent.tsx

@@ -5,7 +5,7 @@ export const ModalWithOverflowingContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
-    setIsModalOpen(prevIsModalOpen => !prevIsModalOpen);
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
   };
 
   return (

package/src/components/MultipleFileUpload/MultipleFileUploadButton.tsx

@@ -9,19 +9,28 @@ export interface MultipleFileUploadButtonProps extends React.HTMLProps<HTMLDivEl
   className?: string;
   /** Aria-label for the button */
   'aria-label'?: string;
+  /** Visible text label for the button */
+  browseButtonText?: string;
 }
 
 export const MultipleFileUploadButton: React.FunctionComponent<MultipleFileUploadButtonProps> = ({
   className,
   'aria-label': ariaLabel,
+  browseButtonText = 'Upload',
   ...props
 }: MultipleFileUploadButtonProps) => {
+  if (!ariaLabel && !browseButtonText) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "For accessibility reasons an aria-label should be specified on MultipleFileUploadButton if a browseButtonText isn't"
+    );
+  }
   const { open } = React.useContext(MultipleFileUploadContext);
 
   return (
     <div className={css(styles.multipleFileUploadUpload, className)} {...props}>
       <Button variant="secondary" aria-label={ariaLabel} onClick={open}>
-        Upload
+        {browseButtonText}
       </Button>
     </div>
   );