@patternfly/react-core 6.2.1-prerelease.7 → 6.2.1-prerelease.9

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.7",
+  "version": "6.2.1-prerelease.9",
   "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,7 +46,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.1-prerelease.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",
@@ -60,8 +60,8 @@
     "fs-extra": "^11.3.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a871a671931ed6e48419509ce2129e879656a84c"
+  "gitHead": "77cc1748f29487ca5cbcac4ebf00039479bc46f9"
 }

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/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/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. */

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
 
-export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface InternalFormFieldGroupProps 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/List/List.tsx

@@ -49,12 +49,14 @@ export const List: React.FunctionComponent<ListProps> = ({
   type = OrderType.number,
   ref = null,
   component = ListComponent.ul,
+  'aria-label': ariaLabel,
   ...props
 }: ListProps) =>
   component === ListComponent.ol ? (
     <ol
       ref={ref as React.Ref<HTMLOListElement>}
       type={type}
+      aria-label={ariaLabel}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
@@ -71,6 +73,7 @@ export const List: React.FunctionComponent<ListProps> = ({
   ) : (
     <ul
       ref={ref as React.Ref<HTMLUListElement>}
+      aria-label={ariaLabel}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(

package/src/components/List/ListItem.tsx

@@ -2,18 +2,21 @@ import styles from '@patternfly/react-styles/css/components/List/list';
 import { css } from '@patternfly/react-styles';
 
 export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-  /** Icon for the list item */
-  icon?: React.ReactNode | null;
+  /** Additional classes added to the list item */
+  className?: string;
   /** Anything that can be rendered inside of list item */
   children: React.ReactNode;
+  /** Icon for the list item */
+  icon?: React.ReactNode | null;
 }
 
 export const ListItem: React.FunctionComponent<ListItemProps> = ({
-  icon = null,
+  className,
   children = null,
+  icon = null,
   ...props
 }: ListItemProps) => (
-  <li className={css(icon && styles.listItem)} {...props}>
+  <li className={css(icon && styles.listItem, className)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
     <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>