@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/DragDrop/examples/DragDropBasic.tsx

@@ -14,7 +14,7 @@ interface SourceType {
 interface DestinationType extends SourceType {}
 
 const getItems = (count: number) =>
-  Array.from({ length: count }, (_, idx) => idx).map(idx => ({
+  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({
     id: `item-${idx}`,
     content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
   }));

package/src/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -14,7 +14,7 @@ interface SourceType {
 interface DestinationType extends SourceType {}
 
 const getItems = (count: number, startIndex: number) =>
-  Array.from({ length: count }, (_, idx) => idx + startIndex).map(idx => ({
+  Array.from({ length: count }, (_, idx) => idx + startIndex).map((idx) => ({
     id: `item-${idx}`,
     content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
   }));

package/src/components/Drawer/Drawer.tsx

@@ -4,7 +4,8 @@ import { css } from '@patternfly/react-styles';
 
 export enum DrawerColorVariant {
   default = 'default',
-  light200 = 'light-200'
+  light200 = 'light-200',
+  noBackground = 'no-background'
 }
 
 export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {

package/src/components/Drawer/DrawerContent.tsx

@@ -12,7 +12,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'default';
+  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
@@ -31,6 +31,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
         className={css(
           styles.drawerContent,
           colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
           className
         )}
         ref={drawerContentRef}

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -36,7 +36,7 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'default';
+  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
 }
 let isResizing: boolean = null;
 let newSize: number = 0;
@@ -257,6 +257,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             hasNoBorder && styles.modifiers.noBorder,
             formatBreakpointMods(widths, styles),
             colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+            colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
             className
           )}
           ref={panel}

package/src/components/Drawer/DrawerSection.tsx

@@ -9,7 +9,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
   /** Color variant of the background of the drawer Section */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'default';
+  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -23,6 +23,7 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
     className={css(
       styles.drawerSection,
       colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+      colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
       className
     )}
     {...props}

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

@@ -22,7 +22,11 @@ test('renders dropdown', () => {
 });
 
 test('passes children', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(
+    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
 
   expect(screen.getByText('Dropdown children')).toBeVisible();
 });
@@ -112,7 +116,7 @@ test('passes zIndex to popper', () => {
 test('does not pass isOpen to popper by default', () => {
   render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
-  expect(screen.getByText('isOpen: undefined')).toBeVisible();
+  expect(screen.getByText('isVisible: undefined')).toBeVisible();
 });
 
 test('passes isOpen to popper', () => {
@@ -122,7 +126,7 @@ test('passes isOpen to popper', () => {
     </Dropdown>
   );
 
-  expect(screen.getByText('isOpen: true')).toBeVisible();
+  expect(screen.getByText('isVisible: true')).toBeVisible();
 });
 
 /* no default tests for callback props
@@ -134,7 +138,7 @@ test('passes onSelect callback', async () => {
 
   const onSelect = jest.fn();
   render(
-    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
+    <Dropdown isOpen onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );

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

@@ -2,40 +2,62 @@
 
 exports[`match snapshot 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    data-testid="mock-wrapper"
+  >
     <div
-      class="customClass"
-      data-ouia-component-id="dropdown"
-      data-ouia-component-type="PF5/Dropdown"
-      data-ouia-safe="true"
-      data-testid="menu-mock"
+      data-testid="popper"
     >
-      <div>
+      <div
+        class="customClass"
+        data-ouia-component-id="dropdown"
+        data-ouia-component-type="PF5/Dropdown"
+        data-ouia-safe="true"
+        data-testid="menu-mock"
+      >
         <div>
-          Dropdown children
+          <div>
+            Dropdown children
+          </div>
         </div>
       </div>
+      <div>
+        Mock item
+      </div>
+      <p>
+        isPlain: true
+      </p>
+      <p>
+        isScrollable: true
+      </p>
+      <p>
+        minWidth: undefined
+      </p>
     </div>
-    <div>
-      Mock item
-    </div>
     <p>
-      isPlain: true
+      zIndex: 9999
+    </p>
+    <p>
+      isVisible: true
+    </p>
+    <p>
+      enableFlip: undefined
     </p>
     <p>
-      isScrollable: true
+      placement: undefined
+    </p>
+    <p>
+      appendTo: undefined
+    </p>
+    <p>
+      distance: undefined
+    </p>
+    <p>
+      flipBehavior: undefined
     </p>
     <p>
       minWidth: undefined
     </p>
-  </div>
-  <p>
-    zIndex: 9999
-  </p>
-  <p>
-    isOpen: true
-  </p>
-  <div>
     <button>
       Dropdown
     </button>

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -46,7 +46,13 @@ export const DropdownBasic: React.FunctionComponent = () => {
         <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
-        <DropdownItem value={4} isAriaDisabled key="aria-disabled link" to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+        <DropdownItem
+          value={4}
+          isAriaDisabled
+          key="aria-disabled link"
+          to="#default-link5"
+          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+        >
           Aria-disabled Link
         </DropdownItem>
         <Divider component="li" key="separator" />

package/src/components/DualListSelector/DualListSelector.tsx

@@ -134,7 +134,7 @@ interface DualListSelectorState {
   chosenTreeFilteredOptions: string[];
 }
 
-export class DualListSelector extends React.Component<DualListSelectorProps, DualListSelectorState> {
+class DualListSelector extends React.Component<DualListSelectorProps, DualListSelectorState> {
   static displayName = 'DualListSelector';
   private addAllButtonRef = React.createRef<HTMLButtonElement>();
   private addSelectedButtonRef = React.createRef<HTMLButtonElement>();
@@ -791,3 +791,5 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     );
   }
 }
+
+export { DualListSelector };

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -70,7 +70,7 @@ export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeP
   ...props
 }: DualListSelectorTreeProps) => {
   const dataToRender = typeof data === 'function' ? data() : data;
-  const tree = dataToRender.map(item => (
+  const tree = dataToRender.map((item) => (
     <DualListSelectorTreeItem
       key={item.id}
       text={item.text}

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -94,7 +94,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           onClick={
             isDisabled
               ? undefined
-              : evt => {
+              : (evt) => {
                   onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
                   setFocusedOption(id);
                 }
@@ -104,7 +104,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             {children && (
               <div
                 className={css(styles.dualListSelectorItemToggle)}
-                onClick={e => {
+                onClick={(e) => {
                   if (children) {
                     setIsExpanded(!isExpanded);
                   }
@@ -138,7 +138,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={elem => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}

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

@@ -53,11 +53,11 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
 
   const moveAll = (fromAvailable: boolean) => {
     if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
     } else {
-      setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
     }
   };
 
@@ -96,8 +96,8 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
     <DualListSelector>
       <DualListSelectorPane
         title="Available"
-        status={`${availableOptions.filter(option => option.selected && option.isVisible).length} of ${
-          availableOptions.filter(option => option.isVisible).length
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
         } options selected`}
       >
         <DualListSelectorList>
@@ -107,7 +107,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
                 key={index}
                 isSelected={option.selected}
                 id={`composable-drag-drop-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
               >
                 {option.text}
               </DualListSelectorListItem>
@@ -117,7 +117,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
-          isDisabled={!availableOptions.some(option => option.selected)}
+          isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
         >
@@ -139,7 +139,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
         </DualListSelectorControl>
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some(option => option.selected)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
         >
           <AngleLeftIcon />
@@ -154,8 +154,8 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
       >
         <DualListSelectorPane
           title="Chosen"
-          status={`${chosenOptions.filter(option => option.selected && option.isVisible).length} of ${
-            chosenOptions.filter(option => option.isVisible).length
+          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+            chosenOptions.filter((option) => option.isVisible).length
           } options selected`}
           isChosen
         >
@@ -167,7 +167,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
                     <DualListSelectorListItem
                       isSelected={option.selected}
                       id={`composable-drag-drop-chosen-option-${index}`}
-                      onOptionSelect={e => onOptionSelect(e, index, true)}
+                      onOptionSelect={(e) => onOptionSelect(e, index, true)}
                       isDraggable
                     >
                       {option.text}

package/src/components/DualListSelector/treeUtils.ts

@@ -2,7 +2,7 @@ import { DualListSelectorTreeItemData } from './DualListSelectorTree';
 
 export function flattenTree(tree: DualListSelectorTreeItemData[]): string[] {
   let result = [] as string[];
-  tree.forEach(item => {
+  tree.forEach((item) => {
     if (item.children) {
       result = result.concat(flattenTree(item.children));
     } else {
@@ -14,7 +14,7 @@ export function flattenTree(tree: DualListSelectorTreeItemData[]): string[] {
 
 export function flattenTreeWithFolders(tree: DualListSelectorTreeItemData[]): string[] {
   let result = [] as string[];
-  tree.forEach(item => {
+  tree.forEach((item) => {
     result.push(item.id);
     if (item.children) {
       result = result.concat(flattenTreeWithFolders(item.children));
@@ -25,7 +25,7 @@ export function flattenTreeWithFolders(tree: DualListSelectorTreeItemData[]): st
 
 export function filterFolders(tree: DualListSelectorTreeItemData[], inputList: string[]): string[] {
   let result = [] as string[];
-  tree.forEach(item => {
+  tree.forEach((item) => {
     if (item.children) {
       result = result.concat(filterFolders(item.children, inputList));
     } else {
@@ -44,8 +44,8 @@ export function filterTreeItems(item: DualListSelectorTreeItemData, inputList: s
   if (item.children) {
     return (
       (item.children = item.children
-        .map(opt => Object.assign({}, opt))
-        .filter(child => filterTreeItems(child, inputList))).length > 0
+        .map((opt) => Object.assign({}, opt))
+        .filter((child) => filterTreeItems(child, inputList))).length > 0
     );
   }
 }
@@ -54,8 +54,8 @@ export function filterTreeItemsWithoutFolders(item: DualListSelectorTreeItemData
   if (item.children) {
     return (
       (item.children = item.children
-        .map(opt => Object.assign({}, opt))
-        .filter(child =>
+        .map((opt) => Object.assign({}, opt))
+        .filter((child) =>
           child.children ? filterTreeItemsWithoutFolders(child, inputList) : filterTreeItems(child, inputList)
         )).length > 0
     );
@@ -70,8 +70,8 @@ export function filterRestTreeItems(item: DualListSelectorTreeItemData, inputLis
   if (item.children) {
     const child =
       (item.children = item.children
-        .map(opt => Object.assign({}, opt))
-        .filter(child => filterRestTreeItems(child, inputList))).length > 0;
+        .map((opt) => Object.assign({}, opt))
+        .filter((child) => filterRestTreeItems(child, inputList))).length > 0;
     return child;
   }
 

package/src/components/EmptyState/EmptyStateActions.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from "@patternfly/react-styles/css/components/EmptyState/empty-state";
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 export interface EmptyStateActionsProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the empty state actions */

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce } from '../../helpers/util';
+import { debounce, getUniqueId } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
@@ -23,6 +23,12 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * property's value should match the contenId property of the expandable section toggle sub-component.
    */
   contentId?: string;
+  /** Id of the toggle of the expandable section, which provides an accessible name to the
+   * expandable section content via the aria-labelledby attribute. When the isDetached property
+   * is also passed in, the value of this property must match the toggleId property of the
+   * expandable section toggle sub-component.
+   */
+  toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
   /** Forces active state. */
@@ -75,7 +81,7 @@ const setLineClamp = (lines: number, element: HTMLDivElement) => {
   element.style.setProperty(lineClamp.name, lines.toString());
 };
 
-export class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
+class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
   constructor(props: ExpandableSectionProps) {
     super(props);
@@ -102,7 +108,6 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    contentId: '',
     variant: 'default'
   };
 
@@ -191,13 +196,24 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       isWidthLimited,
       isIndented,
       contentId,
+      toggleId,
       variant,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       ...props
     } = this.props;
+
+    if (isDetached && !toggleId) {
+      /* eslint-disable no-console */
+      console.warn(
+        'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.'
+      );
+    }
+
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
+    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
+    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -219,6 +235,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         className={css(styles.expandableSectionToggle)}
         type="button"
         aria-expanded={propOrStateIsExpanded}
+        aria-controls={uniqueContentId}
+        id={uniqueToggleId}
         onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
       >
         {variant !== ExpandableSectionVariant.truncate && (
@@ -250,7 +268,9 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           ref={this.expandableContentRef}
           className={css(styles.expandableSectionContent)}
           hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={contentId}
+          id={uniqueContentId}
+          aria-labelledby={uniqueToggleId}
+          role="region"
         >
           {children}
         </div>
@@ -259,3 +279,5 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     );
   }
 }
+
+export { ExpandableSection };

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -16,6 +16,10 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
    * property should match the contentId property of the main expandable section component.
    */
   contentId?: string;
+  /** Id of the toggle. The value passed into this property should match the aria-labelledby
+   * property of the main expandable section component.
+   */
+  toggleId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
   /** @beta Flag to determine toggle styling when the expandable content is truncated. */
@@ -32,6 +36,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   isExpanded = false,
   onToggle,
   contentId,
+  toggleId,
   direction = 'down',
   hasTruncatedContent = false,
   ...props
@@ -52,6 +57,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       aria-expanded={isExpanded}
       aria-controls={contentId}
       onClick={() => onToggle(!isExpanded)}
+      id={toggleId}
     >
       {!hasTruncatedContent && (
         <span

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

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
-const props = {};
+const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
 test('ExpandableSection', () => {
   const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
@@ -14,7 +14,12 @@ test('ExpandableSection', () => {
 });
 
 test('Renders ExpandableSection expanded', () => {
-  const { asFragment } = render(<ExpandableSection isExpanded> test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} isExpanded>
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -29,17 +34,22 @@ test('ExpandableSection onToggle called', async () => {
 });
 
 test('Renders Uncontrolled ExpandableSection', () => {
-  const { asFragment } = render(<ExpandableSection toggleText="Show More"> test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} toggleText="Show More">
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('Detached ExpandableSection renders successfully', () => {
   const { asFragment } = render(
     <React.Fragment>
-      <ExpandableSection {...props} isExpanded isDetached contentId="test">
+      <ExpandableSection isExpanded isDetached {...props}>
         test
       </ExpandableSection>
-      <ExpandableSectionToggle isExpanded contentId="test" direction="up">
+      <ExpandableSectionToggle isExpanded direction="up" {...props}>
         Toggle text
       </ExpandableSectionToggle>
     </React.Fragment>
@@ -58,7 +68,7 @@ test('Disclosure ExpandableSection', () => {
 
 test('Renders ExpandableSection indented', () => {
   const { asFragment } = render(
-    <ExpandableSection isExpanded isIndented>
+    <ExpandableSection {...props} isExpanded isIndented>
       {' '}
       test{' '}
     </ExpandableSection>
@@ -67,27 +77,56 @@ test('Renders ExpandableSection indented', () => {
 });
 
 test('Does not render with pf-m-truncate class when variant is not passed', () => {
-  render(<ExpandableSection {...props}>test</ExpandableSection>);
+  render(<ExpandableSection>test</ExpandableSection>);
 
   expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
 });
 
 test('Does not render with pf-m-truncate class when variant is not truncate', () => {
+  render(<ExpandableSection variant={ExpandableSectionVariant.default}>test</ExpandableSection>);
+
+  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+});
+
+test('Renders with pf-m-truncate class when variant is truncate', () => {
+  render(<ExpandableSection variant={ExpandableSectionVariant.truncate}>test</ExpandableSection>);
+
+  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+});
+
+test('Renders with value passed to contentId', () => {
   render(
-    <ExpandableSection variant={ExpandableSectionVariant.default} {...props}>
-      test
+    <ExpandableSection data-testid="test-id" contentId="custom-id">
+      Test
     </ExpandableSection>
   );
 
-  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+  const wrapper = screen.getByTestId('test-id');
+  const content = wrapper.querySelector('#custom-id');
+  expect(content).toBeInTheDocument();
 });
 
-test('Renders with pf-m-truncate class when variant is truncate', () => {
+test('Renders with value passed to toggleId', () => {
   render(
-    <ExpandableSection variant={ExpandableSectionVariant.truncate} {...props}>
-      test
+    <ExpandableSection data-testid="test-id" toggleId="custom-id">
+      Test
     </ExpandableSection>
   );
 
-  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+  const wrapper = screen.getByTestId('test-id');
+  const toggle = wrapper.querySelector('#custom-id');
+  expect(toggle).toBeVisible();
+});
+
+test('Renders with ARIA attributes when contentId and toggleId are passed', () => {
+  render(
+    <ExpandableSection data-testid="test-id" {...props}>
+      Test
+    </ExpandableSection>
+  );
+
+  const wrapper = screen.getByTestId('test-id');
+
+  expect(wrapper).toContainHTML('aria-labelledby="toggle-id"');
+  expect(wrapper).toContainHTML('aria-controls="content-id"');
 });