@patternfly/react-core 6.2.1-prerelease.0 → 6.2.1-prerelease.10

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.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.9","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.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.9","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.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.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.0",
+  "version": "6.2.1-prerelease.10",
   "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": "97ad43e3ca0bad9b75b9c5963d5d6e6de6895bbf"
+  "gitHead": "90ff9367d3999b6f80ee32f43b25e00eaf0fe6e0"
 }

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/DatePicker/DatePicker.tsx

@@ -161,7 +161,9 @@ const DatePickerBase = (
   }, [value]);
 
   const applyValidators = (date: Date) => {
-    setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
+    const validatorResults = validators.map((validator) => validator(date));
+    const validatorsToApply = validatorResults.filter((validator) => validator !== '');
+    setErrorText(validatorsToApply.join('\n') || '');
   };
 
   const onTextInput = (event: React.FormEvent<HTMLInputElement>, value: string) => {

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

@@ -11,19 +11,57 @@ test('disabled date picker', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
+test('Does not render aria-invalid input when multiple validators return empty strings', async () => {
   const user = userEvent.setup();
 
   const rangeValidator = (_date: Date) => '';
+  const rangeValidatorB = (_date: Date) => '';
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
 
+test('Does not render helper text when multiple validators return empty strings', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (_date: Date) => '';
   const rangeValidatorB = (_date: Date) => '';
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.queryByText(': error status;')).not.toBeInTheDocument();
+});
+
+test('Renders helper text when at least 1 validator returns a string', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (_date: Date) => 'Some error.';
+  const rangeValidatorB = (_date: Date) => '';
   render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
   await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByText('Some error.')).toBeVisible();
+  expect(screen.getByText(': error status;')).toBeInTheDocument();
+});
 
+test('Renders helper text when more than 1 validator returns a string', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (_date: Date) => 'Some error.';
+  const rangeValidatorB = (_date: Date) => 'Another error.';
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
+
+  await user.click(screen.getByRole('textbox'));
   await user.click(document.body);
-  expect(screen.getByRole('textbox')).not.toBeInvalid();
+
+  expect(screen.getByText('Some error. Another error.')).toBeVisible();
+  expect(screen.getByText(': error status;')).toBeInTheDocument();
 });
 
 test('Error state can be cleared from outside', async () => {

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-7"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-4"
+            data-ouia-component-id="OUIA-Generated-Button-control-7"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -185,7 +185,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-8"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"

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