@patternfly/react-core 4.224.9 → 4.224.12

package/src/components/ContextSelector/ContextSelector.tsx

@@ -9,15 +9,11 @@ import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
-import { FocusTrap } from '../../helpers';
+import { FocusTrap, getUniqueId } from '../../helpers';
 import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
-// seed for the aria-labelledby ID
-let currentId = 0;
-const newId = currentId++;
-
 export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>, OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
@@ -66,6 +62,8 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
    * appended inline, e.g. `menuAppendTo="parent"`
    */
   isFlipEnabled?: boolean;
+  /** Id of the context selector */
+  id?: string;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
@@ -108,9 +106,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   };
 
   render() {
-    const toggleId = `pf-context-selector-toggle-id-${newId}`;
-    const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
-    const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
     const {
       children,
       className,
@@ -133,14 +128,21 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       footer,
       disableFocusTrap,
       isFlipEnabled,
+      id,
       ...props
     } = this.props;
+
+    const uniqueId = id || getUniqueId();
+    const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
+    const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+
     const menuContainer = (
       <div
         className={css(styles.contextSelectorMenu)}
         // This removes the `position: absolute`styling from the `.pf-c-context-selector__menu`
         // allowing the menu to flip correctly
         {...(isFlipEnabled && { style: { position: 'revert' } })}
+        id={uniqueId}
       >
         {isOpen && (
           <FocusTrap
@@ -155,12 +157,11 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
                   placeholder={searchInputPlaceholder}
                   onChange={onSearchInputChange}
                   onKeyPress={this.onEnterPressed}
-                  aria-labelledby={searchButtonId}
+                  aria-label={searchButtonAriaLabel}
                 />
                 <Button
                   variant={ButtonVariant.control}
                   aria-label={searchButtonAriaLabel}
-                  id={searchButtonId}
                   onClick={onSearchButtonClick}
                 >
                   <SearchIcon aria-hidden="true" />

package/src/components/ContextSelector/ContextSelectorMenuList.tsx

@@ -29,7 +29,8 @@ export class ContextSelectorMenuList extends React.Component<ContextSelectorMenu
     return React.Children.map(this.props.children, (child, index) =>
       React.cloneElement(child as React.ReactElement<any>, {
         sendRef: this.sendRef,
-        index
+        index,
+        role: 'menuitem'
       })
     );
   }

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

@@ -16,12 +16,12 @@ const items = [
 
 describe('ContextSelector', () => {
   test('Renders ContextSelector', () => {
-    const { asFragment } = render(<ContextSelector>{items}</ContextSelector>);
+    const { asFragment } = render(<ContextSelector id="render">{items}</ContextSelector>);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders ContextSelector open', () => {
-    const { asFragment } = render(<ContextSelector isOpen>{items}</ContextSelector>);
+    const { asFragment } = render(<ContextSelector isOpen id="render-open">{items}</ContextSelector>);
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -10,9 +10,9 @@ exports[`ContextSelector Renders ContextSelector 1`] = `
   >
     <button
       aria-expanded="false"
-      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
+      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
       class="pf-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-0"
+      id="pf-context-selector-toggle-id-render"
       type="button"
     >
       <span
@@ -50,9 +50,9 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
+      aria-labelledby="pf-context-selector-label-id-render-open pf-context-selector-toggle-id-render-open"
       class="pf-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-0"
+      id="pf-context-selector-toggle-id-render-open"
       type="button"
     >
       <span
@@ -78,6 +78,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
     </button>
     <div
       class="pf-c-context-selector__menu"
+      id="render-open"
     >
       <div>
         <div
@@ -87,9 +88,8 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
             class="pf-c-input-group"
           >
             <input
-              aria-describedby="pf-context-selector-search-button-id-0"
               aria-invalid="false"
-              aria-labelledby="pf-context-selector-search-button-id-0"
+              aria-label="Search menu items"
               class="pf-c-form-control"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
               data-ouia-component-type="PF4/TextInput"
@@ -105,7 +105,6 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
               data-ouia-component-id="OUIA-Generated-Button-control-1"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
-              id="pf-context-selector-search-button-id-0"
               type="button"
             >
               <svg
@@ -133,6 +132,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               My Project
             </button>
@@ -142,6 +142,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               OpenShift Cluster
             </button>
@@ -151,6 +152,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               Production Ansible
             </button>
@@ -160,6 +162,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               AWS
             </button>
@@ -169,6 +172,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               Azure
             </button>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-interface DraggableItemPosition {
+export interface DraggableItemPosition {
   /** Parent droppableId */
   droppableId: string;
   /** Index of item in parent Droppable */

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