chore: Rebase Post v5 and merge into main

packages/react-core/src/components/Alert/AlertActionLink.tsx

@@ -6,8 +6,8 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
  */
 
 export interface AlertActionLinkProps extends ButtonProps {
-  /** Content rendered inside the alert action link.  */
-  children?: string;
+  /** Content rendered inside the alert action link. Interactive content such as anchor elements should not be passed in. */
+  children?: React.ReactNode;
   /** Additional classes added to the alert action link.  */
   className?: string;
 }

packages/react-core/src/components/Alert/__tests__/AlertActionLink.test.tsx

@@ -20,6 +20,18 @@ test('Renders children', () => {
   expect(screen.getByRole('button')).toBeVisible();
 });
 
+test('Renders ReactNode as children', () => {
+  render(
+    <AlertActionLink>
+      <div>
+        <span>Learn More</span>
+      </div>
+    </AlertActionLink>
+  );
+
+  expect(screen.getByText('Learn More')).toBeVisible();
+});
+
 test('Renders with custom class names provided via prop', () => {
   render(<AlertActionLink className="custom-class">Test</AlertActionLink>);
 

packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CardSelectableActions } from '../CardSelectableActions';
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CardSelectableActions>Test</CardSelectableActions>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(<CardSelectableActions data-testid="card-selectable-actions" />);
+
+  expect(screen.getByTestId('card-selectable-actions')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-card__selectable-actions', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<CardSelectableActions className="test-class">Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});

packages/react-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-card__selectable-actions"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -22,7 +22,11 @@ test('renders dropdown', () => {
 });
 
 test('passes children', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(
+    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
 
   expect(screen.getByText('Dropdown children')).toBeVisible();
 });
@@ -112,7 +116,7 @@ test('passes zIndex to popper', () => {
 test('does not pass isOpen to popper by default', () => {
   render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
-  expect(screen.getByText('isOpen: undefined')).toBeVisible();
+  expect(screen.getByText('isVisible: undefined')).toBeVisible();
 });
 
 test('passes isOpen to popper', () => {
@@ -122,7 +126,7 @@ test('passes isOpen to popper', () => {
     </Dropdown>
   );
 
-  expect(screen.getByText('isOpen: true')).toBeVisible();
+  expect(screen.getByText('isVisible: true')).toBeVisible();
 });
 
 /* no default tests for callback props
@@ -134,7 +138,7 @@ test('passes onSelect callback', async () => {
 
   const onSelect = jest.fn();
   render(
-    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
+    <Dropdown isOpen onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );

packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -2,40 +2,62 @@
 
 exports[`match snapshot 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    data-testid="mock-wrapper"
+  >
     <div
-      class="customClass"
-      data-ouia-component-id="dropdown"
-      data-ouia-component-type="PF5/Dropdown"
-      data-ouia-safe="true"
-      data-testid="menu-mock"
+      data-testid="popper"
     >
-      <div>
+      <div
+        class="customClass"
+        data-ouia-component-id="dropdown"
+        data-ouia-component-type="PF5/Dropdown"
+        data-ouia-safe="true"
+        data-testid="menu-mock"
+      >
         <div>
-          Dropdown children
+          <div>
+            Dropdown children
+          </div>
         </div>
       </div>
+      <div>
+        Mock item
+      </div>
+      <p>
+        isPlain: true
+      </p>
+      <p>
+        isScrollable: true
+      </p>
+      <p>
+        minWidth: undefined
+      </p>
     </div>
-    <div>
-      Mock item
-    </div>
     <p>
-      isPlain: true
+      zIndex: 9999
+    </p>
+    <p>
+      isVisible: true
+    </p>
+    <p>
+      enableFlip: undefined
     </p>
     <p>
-      isScrollable: true
+      placement: undefined
+    </p>
+    <p>
+      appendTo: undefined
+    </p>
+    <p>
+      distance: undefined
+    </p>
+    <p>
+      flipBehavior: undefined
     </p>
     <p>
       minWidth: undefined
     </p>
-  </div>
-  <p>
-    zIndex: 9999
-  </p>
-  <p>
-    isOpen: true
-  </p>
-  <div>
     <button>
       Dropdown
     </button>

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce } from '../../helpers/util';
+import { debounce, getUniqueId } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
@@ -23,6 +23,12 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * property's value should match the contenId property of the expandable section toggle sub-component.
    */
   contentId?: string;
+  /** Id of the toggle of the expandable section, which provides an accessible name to the
+   * expandable section content via the aria-labelledby attribute. When the isDetached property
+   * is also passed in, the value of this property must match the toggleId property of the
+   * expandable section toggle sub-component.
+   */
+  toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
   /** Forces active state. */
@@ -102,7 +108,6 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    contentId: '',
     variant: 'default'
   };
 
@@ -191,13 +196,24 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       isWidthLimited,
       isIndented,
       contentId,
+      toggleId,
       variant,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       ...props
     } = this.props;
+
+    if (isDetached && !toggleId) {
+      /* eslint-disable no-console */
+      console.warn(
+        'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.'
+      );
+    }
+
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
+    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
+    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -219,6 +235,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         className={css(styles.expandableSectionToggle)}
         type="button"
         aria-expanded={propOrStateIsExpanded}
+        aria-controls={uniqueContentId}
+        id={uniqueToggleId}
         onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
       >
         {variant !== ExpandableSectionVariant.truncate && (
@@ -250,7 +268,9 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           ref={this.expandableContentRef}
           className={css(styles.expandableSectionContent)}
           hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={contentId}
+          id={uniqueContentId}
+          aria-labelledby={uniqueToggleId}
+          role="region"
         >
           {children}
         </div>

packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -16,6 +16,10 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
    * property should match the contentId property of the main expandable section component.
    */
   contentId?: string;
+  /** Id of the toggle. The value passed into this property should match the aria-labelledby
+   * property of the main expandable section component.
+   */
+  toggleId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
   /** @beta Flag to determine toggle styling when the expandable content is truncated. */
@@ -32,6 +36,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   isExpanded = false,
   onToggle,
   contentId,
+  toggleId,
   direction = 'down',
   hasTruncatedContent = false,
   ...props
@@ -52,6 +57,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       aria-expanded={isExpanded}
       aria-controls={contentId}
       onClick={() => onToggle(!isExpanded)}
+      id={toggleId}
     >
       {!hasTruncatedContent && (
         <span