@patternfly/react-core 6.2.1-prerelease.1 → 6.2.1-prerelease.11

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.2.1-prerelease.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.2.1-prerelease.10","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.2.1-prerelease.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.2.1-prerelease.10","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.2.1-prerelease.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.2.1-prerelease.10","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.1",
+  "version": "6.2.1-prerelease.11",
   "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",
@@ -46,22 +46,22 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0",
-    "@patternfly/react-styles": "^6.2.0",
-    "@patternfly/react-tokens": "^6.2.0",
+    "@patternfly/react-icons": "^6.2.1-prerelease.1",
+    "@patternfly/react-styles": "^6.2.1-prerelease.0",
+    "@patternfly/react-tokens": "^6.2.1-prerelease.0",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "67083921690cf0fb228cc2cb5045a914f636706f"
+  "gitHead": "87c19611176f13b41ed77950b7e6debc415f2f90"
 }

package/src/components/Alert/examples/Alert.md

@@ -149,9 +149,6 @@ const AlertTimeout: React.FunctionComponent = () => {
       <Button variant="secondary" onClick={onClick}>
         Add alert
       </Button>
-      <Button variant="secondary" onClick={() => setAlerts([])}>
-        Remove all alerts
-      </Button>
       <AlertGroup hasAnimations isLiveRegion>{alerts}</AlertGroup>
     </Fragment>
   );

package/src/components/Card/examples/Card.md

@@ -89,6 +89,10 @@ Images can also be placed in the card header without a `<CardTitle>`.
 
 ```
 
+### Card with header that wraps
+```ts file='./CardHeaderWraps.tsx'
+```
+
 ### With HTML heading element
 
 You may use the `component` property to place the card's title within an HTML heading element.

package/src/components/Card/examples/CardHeaderWraps.tsx

@@ -0,0 +1,26 @@
+import { Card, CardBody, CardHeader, Button, CardTitle } from '@patternfly/react-core';
+
+export const CardBasic: React.FunctionComponent = () => (
+  <Card ouiaId="BasicCard">
+    <CardHeader
+      hasWrap
+      actions={{
+        hasNoOffset: true,
+        actions: [
+          <Button variant="primary" ouiaId="Primary" key="primary">
+            Primary action
+          </Button>,
+          <Button variant="secondary" ouiaId="Secondary" key="secondary">
+            Secondary action
+          </Button>,
+          <Button variant="tertiary" ouiaId="Tertiary" key="tertiary">
+            Tertiary action
+          </Button>
+        ]
+      }}
+    >
+      <CardTitle>This is a longer card title that takes up more space</CardTitle>
+    </CardHeader>
+    <CardBody>This is the card body</CardBody>
+  </Card>
+);

package/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListAutoFitBasic: React.FunctionComponent = () => (
-  <DescriptionList isAutoFit>
+  <DescriptionList isAutoFit aria-label="Basic auto-fit">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx

@@ -8,7 +8,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => (
-  <DescriptionList isAutoFit autoFitMinModifier={{ default: '200px' }}>
+  <DescriptionList
+    isAutoFit
+    autoFitMinModifier={{ default: '200px' }}
+    aria-label="Auto-fit grid with minimum width modification"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx

@@ -8,7 +8,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => (
-  <DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}>
+  <DescriptionList
+    isAutoFit
+    autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}
+    aria-label="Responsive auto-fit grid with minimum width"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListBasic.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Basic example">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListColumnFill: React.FunctionComponent = () => (
-  <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }}>
+  <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }} aria-label="Column fill enabled">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListCompact.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListCompact: React.FunctionComponent = () => (
-  <DescriptionList isCompact>
+  <DescriptionList isCompact aria-label="Compact example">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListCompactHorizontal: React.FunctionComponent = () => (
-  <DescriptionList isCompact isHorizontal>
+  <DescriptionList isCompact isHorizontal aria-label="Compact horizontal">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (
-  <DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }}>
+  <DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }} aria-label="Default auto column width">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (
-  <DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid>
+  <DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid aria-label="Default inline grid">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => (
-  <DescriptionList columnModifier={{ lg: '2Col', xl: '3Col' }}>
+  <DescriptionList columnModifier={{ lg: '2Col', xl: '3Col' }} aria-label="Default responsive columns">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (
-  <DescriptionList columnModifier={{ lg: '3Col' }}>
+  <DescriptionList columnModifier={{ lg: '3Col' }} aria-label="Three-column on large screens">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx

@@ -12,6 +12,7 @@ export const DescriptionListDefaultTwoCol: React.FunctionComponent = () => (
     columnModifier={{
       default: '2Col'
     }}
+    aria-label="Two-column"
   >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx

@@ -2,7 +2,13 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (
-  <DescriptionList displaySize="lg" isHorizontal columnModifier={{ lg: '2Col' }} termWidth="10ch">
+  <DescriptionList
+    displaySize="lg"
+    isHorizontal
+    columnModifier={{ lg: '2Col' }}
+    termWidth="10ch"
+    aria-label="Display size with card, horizontal and modified term width"
+  >
     <Card component="div">
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx

@@ -2,7 +2,11 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (
-  <DescriptionList displaySize="lg" columnModifier={{ lg: '3Col' }}>
+  <DescriptionList
+    displaySize="lg"
+    columnModifier={{ lg: '3Col' }}
+    aria-label="Display size with card and three column on large breakpoint"
+  >
     <Card component="div">
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListFluidHorizontal: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal isFluid>
+  <DescriptionList isHorizontal isFluid aria-label="Fluid horizontal">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontal: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal>
+  <DescriptionList isHorizontal aria-label="Horizontal">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx

@@ -8,7 +8,12 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalAutoColumn: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal isAutoColumnWidths columnModifier={{ lg: '2Col' }}>
+  <DescriptionList
+    isHorizontal
+    isAutoColumnWidths
+    columnModifier={{ lg: '2Col' }}
+    aria-label="Horizontal auto column width"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx

@@ -18,6 +18,7 @@ export const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent =
       xl: '30ch',
       '2xl': '35ch'
     }}
+    aria-label="Horizontal with custom term width modifier"
   >
     <DescriptionListGroup>
       <DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>

package/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }}>
+  <DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }} aria-label="Horizontal responsive columns">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal columnModifier={{ lg: '3Col' }}>
+  <DescriptionList isHorizontal columnModifier={{ lg: '3Col' }} aria-label="Three-columns horizontal on large screens">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx

@@ -8,7 +8,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
+  <DescriptionList isHorizontal columnModifier={{ default: '2Col' }} aria-label="Two-column horizontal">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx

@@ -13,7 +13,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
 import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 
 export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="With icons examples">
     <DescriptionListGroup>
       <DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx

@@ -16,6 +16,7 @@ export const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = (
       xl: 'vertical',
       '2xl': 'horizontal'
     }}
+    aria-label="Responsive orientation"
   >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>

package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx

@@ -29,7 +29,7 @@ export const DescriptionListWithCard: React.FunctionComponent = () => {
           name="toggle-isSelectable"
         />
       </div>
-      <DescriptionList columnModifier={{ lg: '2Col' }}>
+      <DescriptionList columnModifier={{ lg: '2Col' }} aria-label="With card example">
         <Card component="div" isSelectable={isSelectable}>
           <DescriptionListTerm>Name</DescriptionListTerm>
           <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx

@@ -30,7 +30,7 @@ export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () =
           name="toggle-display-size"
         />
       </div>
-      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }} aria-label="Large display size">
         <DescriptionListGroup>
           <DescriptionListTerm>Name</DescriptionListTerm>
           <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx

@@ -30,7 +30,11 @@ export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent
           name="toggle-display-size-with-card"
         />
       </div>
-      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+      <DescriptionList
+        displaySize={displaySize}
+        columnModifier={{ lg: '2Col' }}
+        aria-label="With large display size and card"
+      >
         <Card component="div">
           <DescriptionListTerm>Name</DescriptionListTerm>
           <DescriptionListDescription>Example</DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx

@@ -10,7 +10,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithTermHelpText: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Term help text">
     <DescriptionListGroup>
       <DescriptionListTermHelpText>
         <Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>

package/src/components/Divider/Divider.tsx

@@ -31,6 +31,8 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
     xl?: 'vertical' | 'horizontal';
     '2xl'?: 'vertical' | 'horizontal';
   };
+  /** The ARIA role of the divider when the component property has a value other than "hr". */
+  role?: 'separator' | 'presentation';
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
@@ -38,6 +40,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
   component = DividerVariant.hr,
   inset,
   orientation,
+  role = 'separator',
   ...props
 }: DividerProps) => {
   const Component: any = component;
@@ -50,7 +53,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
         formatBreakpointMods(orientation, styles),
         className
       )}
-      {...(component !== 'hr' && { role: 'separator' })}
+      {...(component !== 'hr' && { role })}
       {...props}
     />
   );

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

@@ -91,6 +91,16 @@ test(`Test all insets`, () => {
   });
 });
 
+test('Does not render with value passed to role by default', () => {
+  render(<Divider role="presentation" />);
+  expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+});
+
+test('Renders with value passed to role when component is not "hr"', () => {
+  render(<Divider component="li" role="presentation" />);
+  expect(screen.getByRole('presentation')).toBeInTheDocument();
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Divider />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Dropdown/DropdownGroup.tsx

@@ -10,7 +10,7 @@ export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of dropdown group */
   className?: string;
   /** Label of the dropdown group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({

package/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -102,6 +102,7 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
       value={isAvailable ? availableFilter : chosenFilter}
       onChange={(_event, value) => onFilterChange(value, isAvailable)}
       onClear={() => onFilterChange('', isAvailable)}
+      aria-label={isAvailable ? 'Search available options' : 'Search chosen options'}
     />
   );
 

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -115,6 +115,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
       onChange={(_event, value) => onFilterChange(value, isAvailable)}
       onClear={() => onFilterChange('', isAvailable)}
       isDisabled={isDisabled}
+      aria-label={isAvailable ? 'Search available options' : 'Search chosen options'}
     />
   );
 

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -182,6 +182,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         value={isChosen ? chosenFilter : availableFilter}
         onChange={(_event, value) => onChange(value)}
         onClear={() => onChange('')}
+        aria-label={isChosen ? 'Search chosen items' : 'Search available items'}
       />
     );
   };

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -15,7 +15,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -7,7 +7,7 @@ import { Button } from '../Button';
  * property passed in. Allows for more custom control over the expandable section's toggle.
  */
 
-export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivElement> {
+export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable toggle. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable toggle. */

package/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx

@@ -9,7 +9,11 @@ export const ExpandableSectionBasic: React.FunctionComponent = () => {
   };
 
   return (
-    <ExpandableSection toggleText={isExpanded ? 'Show less' : 'Show more'} onToggle={onToggle} isExpanded={isExpanded}>
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less basic example content' : 'Show more basic example content'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
       This content is visible only when the component is expanded.
     </ExpandableSection>
   );

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -25,7 +25,7 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
           contentId={contentId}
           direction="up"
         >
-          {isExpanded ? 'Show less' : 'Show more'}
+          {isExpanded ? 'Show less detached example content' : 'Show more detached example content'}
         </ExpandableSectionToggle>
       </StackItem>
     </Stack>

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -10,7 +10,9 @@ export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
 
   return (
     <ExpandableSection
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={
+        isExpanded ? 'Show less disclosure variation example content' : 'Show more disclosure variation example content'
+      }
       onToggle={onToggle}
       isExpanded={isExpanded}
       displaySize="lg"

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -21,7 +21,7 @@ export const ExpandableSectionIndented: React.FunctionComponent = () => {
       />
       <br />
       <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
+        toggleText={isExpanded ? 'Show less indented example content' : 'Show more indented example content'}
         onToggle={onToggle}
         isExpanded={isExpanded}
         isIndented

package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx

@@ -11,7 +11,7 @@ export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () =>
   return (
     <ExpandableSection
       variant={ExpandableSectionVariant.truncate}
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}
       onToggle={onToggle}
       isExpanded={isExpanded}
     >

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx

@@ -1,7 +1,7 @@
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
-  <ExpandableSection toggleText="Show more">
+  <ExpandableSection toggleText="Show more uncontrolled example content">
     This content is visible only when the component is expanded.
   </ExpandableSection>
 );

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx

@@ -1,7 +1,10 @@
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
-  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+  <ExpandableSection
+    toggleTextExpanded="Show less uncontrolled dynamic toggle example content"
+    toggleTextCollapsed="Show more uncontrolled dynamic toggle example content"
+  >
     This content is visible only when the component is expanded.
   </ExpandableSection>
 );

package/src/components/Form/FormFieldGroup.tsx

@@ -1,6 +1,6 @@
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupExpandableProps extends React.HTMLProps<HTMLDivElement> {
+export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */