@patternfly/react-core 6.4.1-prerelease.0 → 6.4.1-prerelease.2

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.1-prerelease.1","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.1-prerelease.1","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.1-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.0",
+  "version": "6.4.1-prerelease.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "f783f064d4256000fec110dae7e4e04d42f7e9ac"
+  "gitHead": "e78f9c42128c8500e478eef554711ddf4b73fe00"
 }

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -56,6 +56,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * both are specified; used for uncontrolled expandable with dynamic toggle text).
    */
   toggleTextExpanded?: string;
+  /** Accessible name via human readable string for the expandable section toggle. */
+  toggleAriaLabel?: string;
+  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
+  toggleAriaLabelledBy?: string;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -109,6 +113,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     toggleText: '',
     toggleTextExpanded: '',
     toggleTextCollapsed: '',
+    toggleAriaLabel: undefined,
+    toggleAriaLabelledBy: undefined,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
     isDetached: false,
@@ -196,6 +202,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleTextExpanded,
       toggleTextCollapsed,
       toggleContent,
+      toggleAriaLabel,
+      toggleAriaLabelledBy,
       children,
       isExpanded,
       isDetached,
@@ -254,6 +262,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
               </span>
             )
           })}
+          aria-label={toggleAriaLabel}
+          aria-labelledby={toggleAriaLabelledBy}
         >
           {toggleContent || computedToggleText}
         </Button>

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -30,6 +30,10 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   onToggle?: (isExpanded: boolean) => void;
   /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
   isDetached?: boolean;
+  /** Accessible name via human readable string for the expandable section toggle. */
+  toggleAriaLabel?: string;
+  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
+  toggleAriaLabelledBy?: string;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -42,6 +46,8 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   direction = 'down',
   hasTruncatedContent = false,
   isDetached,
+  toggleAriaLabel,
+  toggleAriaLabelledBy,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
@@ -74,6 +80,8 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
             </span>
           )
         })}
+        aria-label={toggleAriaLabel}
+        aria-labelledby={toggleAriaLabelledBy}
       >
         {children}
       </Button>

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

@@ -191,3 +191,20 @@ test('Renders with class pf-m-detached when isDetached is true and direction is
 
   expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
 });
+
+test('Renders with aria-label when toggleAriaLabel is passed', () => {
+  render(<ExpandableSection toggleAriaLabel="Test label"></ExpandableSection>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
+  render(
+    <>
+      <div id="test-id">Test label</div>
+      <ExpandableSection toggleAriaLabelledBy="test-id"></ExpandableSection>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -30,3 +30,20 @@ test('Renders with class pf-m-detached when isDetached is true', () => {
 
   expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached');
 });
+
+test('Renders with aria-label when toggleAriaLabel is passed', () => {
+  render(<ExpandableSectionToggle toggleAriaLabel="Test label"></ExpandableSectionToggle>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
+  render(
+    <>
+      <div id="test-id">Test label</div>
+      <ExpandableSectionToggle toggleAriaLabelledBy="test-id"></ExpandableSectionToggle>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

package/src/components/Modal/Modal.tsx

@@ -27,6 +27,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Id of the focus trap in the ModalContent component */
+  focusTrapId?: string;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */

package/src/components/Modal/ModalContent.tsx

@@ -29,6 +29,8 @@ export interface ModalContentProps extends OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Id of the focus trap */
+  focusTrapId?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
   /** A callback for when the close button is clicked. */
@@ -69,6 +71,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaId,
   ouiaSafe = true,
   elementToFocus,
+  focusTrapId,
   ...props
 }: ModalContentProps) => {
   if (!isOpen) {
@@ -122,6 +125,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           initialFocus: elementToFocus || undefined
         }}
         className={css(bullsEyeStyles.bullseye)}
+        id={focusTrapId}
       >
         {modalBox}
       </FocusTrap>

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

@@ -172,4 +172,13 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+
+  test('Modal can add id to focus trap correctly for use with dropdowns', () => {
+    render(<Modal focusTrapId="focus-trap" isOpen onClose={jest.fn()} children="modal content" />);
+    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute('id', 'focus-trap');
+    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute(
+      'class',
+      'pf-v6-l-bullseye'
+    );
+  });
 });

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

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { ModalContent } from '../ModalContent';
 
@@ -43,3 +43,19 @@ test('Modal Content Test with onclose', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Modal content can add id to focus trap correctly for use with dropdowns', () => {
+  render(
+    <ModalContent focusTrapId="focus-trap" isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
+    'id',
+    'focus-trap'
+  );
+  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
+    'class',
+    'pf-v6-l-bullseye'
+  );
+});

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

@@ -17,7 +17,7 @@ import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ### Basic modals
 
-Basic modals give users the option to either confirm or cancel an action. 
+Basic modals give users the option to either confirm or cancel an action.
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
@@ -71,7 +71,7 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ### Custom header
 
-To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header.
 
 ```ts file="./ModalCustomHeader.tsx"
 
@@ -113,9 +113,18 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal.
 
-To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+`popperProps appendTo` property to id of the focus trap for the modal. This can be done by adding prop
+`focusTrapId` to the modal, and then setting the append location to that as per this example. Otherwise you
+can use `inline` to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+listening to the
+`onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the
+dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -141,7 +150,7 @@ To enable form submission from a button in the modal's footer (outside of the `<
 
 ### Custom focus
 
-To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`.
 
 ```ts file="./ModalCustomFocus.tsx"
 

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

@@ -32,8 +32,10 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   };
 
   const onFocus = () => {
-    const element = document.getElementById('modal-dropdown-toggle');
-    (element as HTMLElement).focus();
+    if (typeof document !== 'undefined') {
+      const element = document.getElementById('modal-dropdown-toggle');
+      (element as HTMLElement)?.focus();
+    }
   };
 
   const onEscapePress = (event: KeyboardEvent) => {
@@ -45,6 +47,16 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     }
   };
 
+  const getAppendLocation = () => {
+    // document doesn't exist when PatternFly website docs framework gets pre-rendered
+    // this is just to avoid that issue - works fine at runtime without it
+    if (typeof document !== 'undefined' && document.getElementById) {
+      return document.getElementById('modal-with-dropdown-focus-trap');
+    } else {
+      return 'inline';
+    }
+  };
+
   return (
     <Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -57,14 +69,21 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         onEscapePress={onEscapePress}
         aria-labelledby="modal-with-dropdown"
         aria-describedby="modal-box-body-with-dropdown"
+        focusTrapId="modal-with-dropdown-focus-trap"
       >
         <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
         <ModalBody id="modal-box-body-with-dropdown">
           <div>
-            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
-            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
-            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
-            it's open without closing the entire modal.
+            Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+            built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+            popperProps appendTo property to id of the focus trap for the modal. This can be done by adding prop
+            focusTrapId to the modal, and then setting the append location to that as per this example. Otherwise you
+            can use "inline" to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+            menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+            focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+            listening to the
+            <em>onEscapePress</em> callback on the Modal component. This allows the "escape" key to collapse the
+            dropdown without closing the entire modal.
           </div>
           <br />
           <div>
@@ -73,10 +92,18 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
               onSelect={onSelect}
               onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
+                <MenuToggle
+                  id="modal-dropdown-toggle"
+                  ref={toggleRef}
+                  onClick={handleDropdownToggle}
+                  isExpanded={isDropdownOpen}
+                >
                   Dropdown
                 </MenuToggle>
               )}
+              popperProps={{
+                appendTo: getAppendLocation()
+              }}
             >
               <DropdownList>
                 <DropdownItem value={0} key="action">