@patternfly/react-core 4.224.9 → 4.224.10

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         My Project
       </button>
@@ -21,6 +22,7 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         OpenShift Cluster
       </button>
@@ -30,6 +32,7 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         Production Ansible
       </button>
@@ -39,6 +42,7 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         AWS
       </button>
@@ -48,6 +52,7 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         Azure
       </button>
@@ -68,6 +73,7 @@ exports[`Renders ContextSelectorMenuList open 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         My Project
       </button>
@@ -77,6 +83,7 @@ exports[`Renders ContextSelectorMenuList open 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         OpenShift Cluster
       </button>
@@ -86,6 +93,7 @@ exports[`Renders ContextSelectorMenuList open 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         Production Ansible
       </button>
@@ -95,6 +103,7 @@ exports[`Renders ContextSelectorMenuList open 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         AWS
       </button>
@@ -104,6 +113,7 @@ exports[`Renders ContextSelectorMenuList open 1`] = `
     >
       <button
         class="pf-c-context-selector__menu-list-item"
+        role="menuitem"
       >
         Azure
       </button>

package/src/components/DataList/examples/DataListCompact.tsx

@@ -3,24 +3,24 @@ import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCel
 
 export const DataListCompact: React.FunctionComponent = () => (
   <DataList aria-label="Compact data list example" isCompact>
-    <DataListItem aria-labelledby="simple-item1">
+    <DataListItem aria-labelledby="compact-item1">
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell key="primary content">
-              <span id="simple-item1">Primary content</span>
+              <span id="compact-item1">Primary content</span>
             </DataListCell>,
             <DataListCell key="secondary content">Secondary content</DataListCell>
           ]}
         />
       </DataListItemRow>
     </DataListItem>
-    <DataListItem aria-labelledby="simple-item2">
+    <DataListItem aria-labelledby="compact-item2">
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell isFilled={false} key="secondary content fill">
-              <span id="simple-item2">Secondary content (pf-m-no-fill)</span>
+              <span id="compact-item2">Secondary content (pf-m-no-fill)</span>
             </DataListCell>,
             <DataListCell isFilled={false} alignRight key="secondary content align">
               Secondary content (pf-m-align-right pf-m-no-fill)

package/src/components/DataList/examples/DataListControllingText.tsx

@@ -9,13 +9,13 @@ import {
 } from '@patternfly/react-core';
 
 export const DataListControllingText: React.FunctionComponent = () => (
-  <DataList aria-label="Simple data list example">
-    <DataListItem aria-labelledby="simple-item1">
+  <DataList aria-label="Controlling text data list example">
+    <DataListItem aria-labelledby="controlling-text-item1">
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell key="primary content" wrapModifier={DataListWrapModifier.breakWord}>
-              <span id="simple-item1">Primary content</span>
+              <span id="controlling-text-item1">Primary content</span>
             </DataListCell>,
             <DataListCell key="secondary content" wrapModifier={DataListWrapModifier.truncate}>
               Really really really really really really really really really really really really really really long

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -10,7 +10,8 @@ import {
   DataListItemCells,
   DragDrop,
   Draggable,
-  Droppable
+  Droppable,
+  getUniqueId
 } from '@patternfly/react-core';
 
 interface ItemType {
@@ -20,7 +21,7 @@ interface ItemType {
 
 const getItems = (count: number) =>
   Array.from({ length: count }, (_, idx) => idx).map(idx => ({
-    id: `item-${idx}`,
+    id: `draggable-item-${idx}`,
     content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
   }));
 
@@ -60,27 +61,29 @@ export const DataListDraggable: React.FunctionComponent = () => {
     }
   }
 
+  const uniqueId = getUniqueId();
+
   return (
     <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>
       <Droppable hasNoWrapper>
         <DataList aria-label="draggable data list example" isCompact>
           {items.map(({ id, content }) => (
             <Draggable key={id} hasNoWrapper>
-              <DataListItem aria-labelledby={id} ref={React.createRef()}>
+              <DataListItem aria-labelledby={`draggable-${id}`} ref={React.createRef()}>
                 <DataListItemRow>
                   <DataListControl>
                     <DataListDragButton
                       aria-label="Reorder"
-                      aria-labelledby={id}
-                      aria-describedby="Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                      aria-labelledby={`draggable-${id}`}
+                      aria-describedby={`description-${uniqueId}`}
                       aria-pressed="false"
                     />
-                    <DataListCheck aria-labelledby={id} name={id} otherControls />
+                    <DataListCheck aria-labelledby={`draggable-${id}`} name={id} otherControls />
                   </DataListControl>
                   <DataListItemCells
                     dataListCells={[
                       <DataListCell key={id}>
-                        <span id={id}>{content}</span>
+                        <span id={`draggable-${id}`}>{content}</span>
                       </DataListCell>
                     ]}
                   />
@@ -93,6 +96,10 @@ export const DataListDraggable: React.FunctionComponent = () => {
       <div className="pf-screen-reader" aria-live="assertive">
         {liveText}
       </div>
+      <div className="pf-screen-reader" id={`description-${uniqueId}`}>
+        Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
+        the drag, or any other key to cancel the drag operation.
+      </div>
     </DragDrop>
   );
 };

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -104,7 +104,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
             </DataListAction>
           </DataListItemRow>
           <DataListContent
-            aria-label="Primary Content Details"
+            aria-label="First expandable content details"
             id="ex-expand1"
             isHidden={!expanded.includes('ex-toggle1')}
           >
@@ -164,7 +164,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
             </DataListAction>
           </DataListItemRow>
           <DataListContent
-            aria-label="Primary Content Details"
+            aria-label="Second expandable content details"
             id="ex-expand2"
             isHidden={!expanded.includes('ex-toggle2')}
           >
@@ -224,7 +224,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
             </DataListAction>
           </DataListItemRow>
           <DataListContent
-            aria-label="Primary Content Details"
+            aria-label="Third expandable content details"
             id="ex-expand3"
             isHidden={!expanded.includes('ex-toggle3')}
             hasNoPadding

package/src/components/DataList/examples/DataListSmGridBreakpoint.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
 
 export const DataListSmGridBreakpoint: React.FunctionComponent = () => (
-  <DataList aria-label="Simple data list example" gridBreakpoint="sm">
-    <DataListItem aria-labelledby="simple-item1">
+  <DataList aria-label="Small grid breakpoint list example" gridBreakpoint="sm">
+    <DataListItem aria-labelledby="sm-grid-item1">
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell key="primary content">
-              <span id="simple-item1">Primary content</span>
+              <span id="sm-grid-item1">Primary content</span>
             </DataListCell>,
             <DataListCell key="secondary content">
               Really really really really really really really really really really really really really really long

package/src/components/DualListSelector/DualListSelector.tsx

@@ -6,7 +6,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { DualListSelectorPane } from './DualListSelectorPane';
-import { getUniqueId, PickOptional } from '../../helpers';
+import { GenerateId, PickOptional } from '../../helpers';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
 import {
   flattenTree,
@@ -140,7 +140,6 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     chosenOptions: [],
     chosenOptionsTitle: 'Chosen options',
     chosenOptionsSearchAriaLabel: 'Chosen search input',
-    id: getUniqueId('dual-list-selector'),
     controlsAriaLabel: 'Selector controls',
     addAllAriaLabel: 'Add all',
     addSelectedAriaLabel: 'Add selected',
@@ -678,94 +677,99 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
 
     return (
       <DualListSelectorContext.Provider value={{ isTree }}>
-        <div className={css(styles.dualListSelector, className)} id={id} {...props}>
-          {children === '' ? (
-            <>
-              <DualListSelectorPane
-                isSearchable={isSearchable}
-                onFilterUpdate={this.onFilterUpdate}
-                searchInputAriaLabel={availableOptionsSearchAriaLabel}
-                filterOption={filterOption}
-                onSearchInputChanged={onAvailableOptionsSearchInputChanged}
-                status={availableOptionsStatusToDisplay}
-                title={availableOptionsTitle}
-                options={available}
-                selectedOptions={isTree ? availableTreeOptionsChecked : availableOptionsSelected}
-                onOptionSelect={this.onOptionSelect}
-                onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false)}
-                actions={availableOptionsActions}
-                id={`${id}-available-pane`}
-                isDisabled={isDisabled}
-              />
-              <DualListSelectorControlsWrapper aria-label={controlsAriaLabel}>
-                <DualListSelectorControl
-                  isDisabled={
-                    (isTree ? availableTreeOptionsChecked.length === 0 : availableOptionsSelected.length === 0) ||
-                    isDisabled
-                  }
-                  onClick={isTree ? this.addTreeSelected : this.addSelected}
-                  ref={this.addSelectedButtonRef}
-                  aria-label={addSelectedAriaLabel}
-                  tooltipContent={addSelectedTooltip}
-                  tooltipProps={addSelectedTooltipProps}
-                >
-                  <AngleRightIcon />
-                </DualListSelectorControl>
-                <DualListSelectorControl
-                  isDisabled={availableOptions.length === 0 || isDisabled}
-                  onClick={isTree ? this.addAllTreeVisible : this.addAllVisible}
-                  ref={this.addAllButtonRef}
-                  aria-label={addAllAriaLabel}
-                  tooltipContent={addAllTooltip}
-                  tooltipProps={addAllTooltipProps}
-                >
-                  <AngleDoubleRightIcon />
-                </DualListSelectorControl>
-                <DualListSelectorControl
-                  isDisabled={chosenOptions.length === 0 || isDisabled}
-                  onClick={isTree ? this.removeAllTreeVisible : this.removeAllVisible}
-                  aria-label={removeAllAriaLabel}
-                  ref={this.removeAllButtonRef}
-                  tooltipContent={removeAllTooltip}
-                  tooltipProps={removeAllTooltipProps}
-                >
-                  <AngleDoubleLeftIcon />
-                </DualListSelectorControl>
-                <DualListSelectorControl
-                  onClick={isTree ? this.removeTreeSelected : this.removeSelected}
-                  isDisabled={
-                    (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) || isDisabled
-                  }
-                  ref={this.removeSelectedButtonRef}
-                  aria-label={removeSelectedAriaLabel}
-                  tooltipContent={removeSelectedTooltip}
-                  tooltipProps={removeSelectedTooltipProps}
-                >
-                  <AngleLeftIcon />
-                </DualListSelectorControl>
-              </DualListSelectorControlsWrapper>
-              <DualListSelectorPane
-                isChosen
-                isSearchable={isSearchable}
-                onFilterUpdate={this.onFilterUpdate}
-                searchInputAriaLabel={chosenOptionsSearchAriaLabel}
-                filterOption={filterOption}
-                onSearchInputChanged={onChosenOptionsSearchInputChanged}
-                title={chosenOptionsTitle}
-                status={chosenOptionsStatusToDisplay}
-                options={chosen}
-                selectedOptions={isTree ? chosenTreeOptionsChecked : chosenOptionsSelected}
-                onOptionSelect={this.onOptionSelect}
-                onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true)}
-                actions={chosenOptionsActions}
-                id={`${id}-chosen-pane`}
-                isDisabled={isDisabled}
-              />
-            </>
-          ) : (
-            children
+        <GenerateId>
+          {randomId => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children === '' ? (
+                <>
+                  <DualListSelectorPane
+                    isSearchable={isSearchable}
+                    onFilterUpdate={this.onFilterUpdate}
+                    searchInputAriaLabel={availableOptionsSearchAriaLabel}
+                    filterOption={filterOption}
+                    onSearchInputChanged={onAvailableOptionsSearchInputChanged}
+                    status={availableOptionsStatusToDisplay}
+                    title={availableOptionsTitle}
+                    options={available}
+                    selectedOptions={isTree ? availableTreeOptionsChecked : availableOptionsSelected}
+                    onOptionSelect={this.onOptionSelect}
+                    onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false)}
+                    actions={availableOptionsActions}
+                    id={`${id || randomId}-available-pane`}
+                    isDisabled={isDisabled}
+                  />
+                  <DualListSelectorControlsWrapper aria-label={controlsAriaLabel}>
+                    <DualListSelectorControl
+                      isDisabled={
+                        (isTree ? availableTreeOptionsChecked.length === 0 : availableOptionsSelected.length === 0) ||
+                        isDisabled
+                      }
+                      onClick={isTree ? this.addTreeSelected : this.addSelected}
+                      ref={this.addSelectedButtonRef}
+                      aria-label={addSelectedAriaLabel}
+                      tooltipContent={addSelectedTooltip}
+                      tooltipProps={addSelectedTooltipProps}
+                    >
+                      <AngleRightIcon />
+                    </DualListSelectorControl>
+                    <DualListSelectorControl
+                      isDisabled={availableOptions.length === 0 || isDisabled}
+                      onClick={isTree ? this.addAllTreeVisible : this.addAllVisible}
+                      ref={this.addAllButtonRef}
+                      aria-label={addAllAriaLabel}
+                      tooltipContent={addAllTooltip}
+                      tooltipProps={addAllTooltipProps}
+                    >
+                      <AngleDoubleRightIcon />
+                    </DualListSelectorControl>
+                    <DualListSelectorControl
+                      isDisabled={chosenOptions.length === 0 || isDisabled}
+                      onClick={isTree ? this.removeAllTreeVisible : this.removeAllVisible}
+                      aria-label={removeAllAriaLabel}
+                      ref={this.removeAllButtonRef}
+                      tooltipContent={removeAllTooltip}
+                      tooltipProps={removeAllTooltipProps}
+                    >
+                      <AngleDoubleLeftIcon />
+                    </DualListSelectorControl>
+                    <DualListSelectorControl
+                      onClick={isTree ? this.removeTreeSelected : this.removeSelected}
+                      isDisabled={
+                        (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) ||
+                        isDisabled
+                      }
+                      ref={this.removeSelectedButtonRef}
+                      aria-label={removeSelectedAriaLabel}
+                      tooltipContent={removeSelectedTooltip}
+                      tooltipProps={removeSelectedTooltipProps}
+                    >
+                      <AngleLeftIcon />
+                    </DualListSelectorControl>
+                  </DualListSelectorControlsWrapper>
+                  <DualListSelectorPane
+                    isChosen
+                    isSearchable={isSearchable}
+                    onFilterUpdate={this.onFilterUpdate}
+                    searchInputAriaLabel={chosenOptionsSearchAriaLabel}
+                    filterOption={filterOption}
+                    onSearchInputChanged={onChosenOptionsSearchInputChanged}
+                    title={chosenOptionsTitle}
+                    status={chosenOptionsStatusToDisplay}
+                    options={chosen}
+                    selectedOptions={isTree ? chosenTreeOptionsChecked : chosenOptionsSelected}
+                    onOptionSelect={this.onOptionSelect}
+                    onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true)}
+                    actions={chosenOptionsActions}
+                    id={`${id || randomId}-chosen-pane`}
+                    isDisabled={isDisabled}
+                  />
+                </>
+              ) : (
+                children
+              )}
+            </div>
           )}
-        </div>
+        </GenerateId>
       </DualListSelectorContext.Provider>
     );
   }

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -76,7 +76,7 @@ DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapp
 
 export const DualListSelectorControlsWrapper = React.forwardRef(
   (props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
-    <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+    <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} role="group" {...props} />
   )
 );
 

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
+  /** Content rendered inside the dual list selector list */
   children?: React.ReactNode;
 }
 
@@ -31,13 +32,18 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
     onOptionSelect(e, index, id);
   };
 
+  const hasOptions = () =>
+    options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
+
   return (
     <ul
       className={css(styles.dualListSelectorList)}
-      role={isTree ? 'tree' : 'listbox'}
-      aria-multiselectable="true"
-      aria-labelledby={ariaLabelledBy}
-      aria-activedescendant={focusedOption}
+      {...(hasOptions() && {
+        role: isTree ? 'tree' : 'listbox',
+        'aria-multiselectable': true,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-activedescendant': focusedOption
+      })}
       aria-disabled={isDisabled ? 'true' : undefined}
       {...props}
     >

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -35,7 +35,7 @@ export interface DualListSelectorTreeItemData {
   isDisabled?: boolean;
 }
 
-export interface DualListSelectorTreeProps {
+export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
   /** Data of the tree view */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
   /** ID of the tree view */
@@ -46,8 +46,9 @@ export interface DualListSelectorTreeProps {
   hasBadges?: boolean;
   /** Sets the default expanded behavior */
   defaultAllExpanded?: boolean;
-  /** Callback fired when an option is checked */
+  /** Flag indicating if the dual list selector tree is in the disabled state */
   isDisabled?: boolean;
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,

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

@@ -99,6 +99,7 @@ exports[`DualListSelector basic 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -248,11 +249,7 @@ exports[`DualListSelector basic 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="firstTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -360,6 +357,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -510,12 +508,8 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
           aria-disabled="true"
-          aria-labelledby="disabledTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -633,6 +627,7 @@ exports[`DualListSelector with actions 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -954,6 +949,7 @@ exports[`DualListSelector with custom status 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -1103,11 +1099,7 @@ exports[`DualListSelector with custom status 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="thirdTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -1227,6 +1219,7 @@ exports[`DualListSelector with search inputs 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -1389,11 +1382,7 @@ exports[`DualListSelector with search inputs 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="secondTest-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="listbox"
         />
       </div>
     </div>
@@ -1577,6 +1566,7 @@ exports[`DualListSelector with tree 1`] = `
     <div
       aria-label="Selector controls"
       class="pf-c-dual-list-selector__controls"
+      role="group"
       tabindex="0"
     >
       <div
@@ -1726,11 +1716,7 @@ exports[`DualListSelector with tree 1`] = `
         tabindex="0"
       >
         <ul
-          aria-activedescendant=""
-          aria-labelledby="tree-test-chosen-pane-status"
-          aria-multiselectable="true"
           class="pf-c-dual-list-selector__list"
-          role="tree"
         />
       </div>
     </div>

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -8,6 +8,8 @@ propComponents:
     'DualListSelectorPane',
     'DualListSelectorControl',
     'DualListSelectorControlsWrapper',
+    'DualListSelectorList',
+    'DualListSelectorListItem',
     'DualListSelectorTree',
     'DualListSelectorTreeItemData',
   ]
@@ -44,7 +46,7 @@ import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pfic
 
 ### With tree
 
-```ts file="./DualListSelectorTree.tsx"
+```ts file="./DualListSelectorTreeExample.tsx"
 ```
 
 ### Composable dual list selector

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

@@ -151,7 +151,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           )}
         </DualListSelectorList>
       </DualListSelectorPane>
-      <DualListSelectorControlsWrapper aria-label="Selector controls">
+      <DualListSelectorControlsWrapper>
         <DualListSelectorControl
           isDisabled={!availableOptions.some(option => option.selected)}
           onClick={() => moveSelected(true)}

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

@@ -121,7 +121,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           )}
         </DualListSelectorList>
       </DualListSelectorPane>
-      <DualListSelectorControlsWrapper aria-label="Selector controls">
+      <DualListSelectorControlsWrapper>
         <DualListSelectorControl
           isDisabled={!availableOptions.some(option => option.selected)}
           onClick={() => moveSelected(true)}