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

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>
   );

package/src/components/MultipleFileUpload/MultipleFileUploadMain.tsx

@@ -21,6 +21,8 @@ export interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElem
   infoText?: React.ReactNode;
   /** Flag to prevent the upload button from being rendered */
   isUploadButtonHidden?: boolean;
+  /** Visible text label for the upload button */
+  browseButtonText?: string;
 }
 
 export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadMainProps> = ({
@@ -30,6 +32,7 @@ export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadM
   titleTextSeparator,
   infoText,
   isUploadButtonHidden,
+  browseButtonText = 'Upload',
   ...props
 }: MultipleFileUploadMainProps) => {
   const showTitle = !!titleIcon || !!titleText || !!titleTextSeparator;
@@ -37,7 +40,7 @@ export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadM
   return (
     <div className={css(styles.multipleFileUploadMain, className)} {...props}>
       {showTitle && <MultipleFileUploadTitle icon={titleIcon} text={titleText} textSeparator={titleTextSeparator} />}
-      {isUploadButtonHidden || <MultipleFileUploadButton />}
+      {isUploadButtonHidden || <MultipleFileUploadButton browseButtonText={browseButtonText} />}
       {!!infoText && <MultipleFileUploadInfo>{infoText}</MultipleFileUploadInfo>}
     </div>
   );

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 import { ExpandableSection } from '../ExpandableSection';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -65,11 +66,21 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
 
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
-      <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
-          {children}
-        </ul>
-      </ExpandableSection>
+      <GenerateId prefix="pf-expandable-section-">
+        {(expandableSectionId) => (
+          <ExpandableSection
+            contentId={`${expandableSectionId}-content`}
+            toggleId={`${expandableSectionId}-toggle`}
+            toggleContent={toggle}
+            isExpanded={isOpen}
+            onToggle={toggleExpandableSection}
+          >
+            <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+              {children}
+            </ul>
+          </ExpandableSection>
+        )}
+      </GenerateId>
     </div>
   );
 };

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -88,7 +88,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
       const reader = new FileReader();
       reader.onload = () => resolve(reader.result);
       reader.onerror = () => reject(reader.error);
-      reader.onprogress = data => {
+      reader.onprogress = (data) => {
         if (data.lengthComputable) {
           setLoadPercentage((data.loaded / data.total) * 100);
         }
@@ -103,7 +103,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     } else {
       onReadStarted(file);
       readFile(file)
-        .then(data => {
+        .then((data) => {
           setLoadResult('success');
           setLoadPercentage(100);
           onReadFinished(file);

package/src/components/MultipleFileUpload/MultipleFileUploadTitleTextSeparator.tsx

@@ -9,11 +9,9 @@ export interface MultipleFileUploadTitleTextSeparatorProps extends React.HTMLPro
   className?: string;
 }
 
-export const MultipleFileUploadTitleTextSeparator: React.FunctionComponent<MultipleFileUploadTitleTextSeparatorProps> = ({
-  className,
-  children,
-  ...props
-}: MultipleFileUploadTitleTextSeparatorProps) => (
+export const MultipleFileUploadTitleTextSeparator: React.FunctionComponent<
+  MultipleFileUploadTitleTextSeparatorProps
+> = ({ className, children, ...props }: MultipleFileUploadTitleTextSeparatorProps) => (
   <div className={css(styles.multipleFileUploadTitleTextSeparator, className)} {...props}>
     {children}
   </div>

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadButton.test.tsx

@@ -17,4 +17,9 @@ describe('MultipleFileUploadButton', () => {
     const { asFragment } = render(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders with label applied to the button', () => {
+    const { asFragment } = render(<MultipleFileUploadButton browseButtonText="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap

@@ -57,3 +57,22 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`MultipleFileUploadButton renders with label applied to the button 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-multiple-file-upload__upload"
+  >
+    <button
+      aria-disabled="false"
+      class="pf-v5-c-button pf-m-secondary"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-4"
+      data-ouia-component-type="PF5/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -9,8 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-1-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-1-toggle"
         type="button"
       >
         <span
@@ -46,8 +48,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-1-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-1-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -70,8 +74,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-3-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-3-toggle"
         type="button"
       >
         <span
@@ -121,8 +127,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-3-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-3-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -145,8 +153,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-2-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-2-toggle"
         type="button"
       >
         <span
@@ -184,8 +194,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-2-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-2-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"
@@ -208,8 +220,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
+        aria-controls="pf-expandable-section-0-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
+        id="pf-expandable-section-0-toggle"
         type="button"
       >
         <span
@@ -245,8 +259,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="pf-expandable-section-0-toggle"
         class="pf-v5-c-expandable-section__content"
-        id=""
+        id="pf-expandable-section-0-content"
+        role="region"
       >
         <ul
           class="pf-v5-c-multiple-file-upload__status-list"

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -18,11 +18,11 @@ Multiple file upload is able to:
   - Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
   - If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
 
-### Restricting file size and type
+## Restricting file size and type
 
 As with singular file upload, any [props accepted by react-dropzone's Dropzone component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
 
-#### IMPORTANT: A note about security
+### IMPORTANT: A note about security
 
 Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.
 

package/src/components/Nav/Nav.tsx

@@ -64,7 +64,7 @@ export interface NavContextProps {
 export const navContextDefaults = {};
 export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
 
-export class Nav extends React.Component<
+class Nav extends React.Component<
   NavProps,
   { isScrollable: boolean; ouiaStateId: string; flyoutRef: React.Ref<HTMLLIElement> | null }
 > {
@@ -175,3 +175,5 @@ export class Nav extends React.Component<
     );
   }
 }
+
+export { Nav };