@patternfly/react-core 6.0.0-alpha.100 → 6.0.0-alpha.102

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.0.0-alpha.99","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.0.0-alpha.101","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.0.0-alpha.99","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.0.0-alpha.101","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.0.0-alpha.99","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.0.0-alpha.101","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.100",
+  "version": "6.0.0-alpha.102",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.35",
-    "@patternfly/react-styles": "^6.0.0-alpha.34",
-    "@patternfly/react-tokens": "^6.0.0-alpha.34",
+    "@patternfly/react-icons": "^6.0.0-alpha.36",
+    "@patternfly/react-styles": "^6.0.0-alpha.35",
+    "@patternfly/react-tokens": "^6.0.0-alpha.35",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.205",
+    "@patternfly/patternfly": "6.0.0-alpha.210",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "aee9a75f90293e6533c2d7b59d7cf099b5f3d506"
+  "gitHead": "065953356048e1ee3036f266aaf16e479e94bc5e"
 }

package/src/components/Card/CardHeader.tsx

@@ -26,23 +26,29 @@ export interface CardHeaderSelectableActionsObject {
   hasNoOffset?: boolean;
   /** Additional classes added to the selectable actions wrapper */
   className?: string;
-  /** ID passed to the selectable or clickable input */
-  selectableActionId: string;
-  /** Adds an accessible label to the selectable or clickable input */
+  /** Custom ID passed to the selectable card's input or a clickable-only card's button/anchor.
+   * If omitted, a random unique ID will be assigned to a selectable card's input. */
+  selectableActionId?: string;
+  /** Adds an accessible name to the input of a selectable card or clickable button/anchor of a clickable-only card.
+   * This or selectableActionAriaLabelledby is required for clickable-only cards.
+   */
   selectableActionAriaLabel?: string;
-  /** Adds an accessible label to the selectable or clickable input by passing in a
-   * space separated list of id's.
+  /** A single or list of space-delimited ID's that provide an accessible name to the input of a selectable card
+   * or clickable button/anchor of a clickable-only card. This or selectableActionAriaLabelledby is required
+   * for clickable-only cards.
    */
   selectableActionAriaLabelledby?: string;
   /** Callback for when a selectable card input changes */
   onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
-  /** Action to call when clickable card is clicked */
-  onClickAction?: (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => void;
-  /** Link to navigate to when clickable card is clicked */
+  /** Action to call when a clickable-only card is clicked. This cannot be combined with the to prop. */
+  onClickAction?: (event: React.MouseEvent) => void;
+  /** Link to navigate to when a clickable-only card is clicked. This cannot be combined with the onClickAction prop. */
   to?: string;
-  /** Flag to indicate whether a clickable card's link should open in a new tab/window. */
+  /** Additional props spread to a selectable card input or clickable-only card's button/anchor. */
+  selectableActionProps?: any;
+  /** Flag to indicate whether a clickable-only card's link should open in a new tab/window. */
   isExternalLink?: boolean;
-  /** Name for the input element of a clickable or selectable card. */
+  /** Name for the input element of a selectable card. */
   name?: string;
   /** @deprecated Flag indicating whether the selectable card input is checked. We recommend using
    * the isSelected prop on the card component instead.
@@ -79,101 +85,117 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   toggleButtonProps,
   isToggleRightAligned,
   ...props
-}: CardHeaderProps) => (
-  <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
-      const cardHeaderToggle = (
-        <div className={css(styles.cardHeaderToggle)}>
-          <Button
-            variant="plain"
-            type="button"
-            onClick={(evt) => {
-              onExpand(evt, cardId);
-            }}
-            {...toggleButtonProps}
-            icon={
-              <span className={css(styles.cardHeaderToggleIcon)}>
-                <AngleRightIcon aria-hidden="true" />
-              </span>
-            }
-          />
-        </div>
-      );
+}: CardHeaderProps) => {
+  const uniqueId = React.useId();
 
-      const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-      if (actions?.actions && isClickableOrSelectableOnly) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `${
-            isClickable ? 'Clickable' : 'Selectable'
-          } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+  return (
+    <CardContext.Consumer>
+      {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
+        const cardHeaderToggle = (
+          <div className={css(styles.cardHeaderToggle)}>
+            <Button
+              variant="plain"
+              type="button"
+              onClick={(evt) => {
+                onExpand(evt, cardId);
+              }}
+              {...toggleButtonProps}
+              icon={
+                <span className={css(styles.cardHeaderToggleIcon)}>
+                  <AngleRightIcon aria-hidden="true" />
+                </span>
+              }
+            />
+          </div>
         );
-      }
 
-      const handleActionClick = (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => {
-        if (selectableActions?.onClickAction) {
-          selectableActions.onClickAction(event);
-        } else if (selectableActions?.to) {
-          window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
+        const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+        if (actions?.actions && isClickableOrSelectableOnly) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${
+              isClickable ? 'Clickable' : 'Selectable'
+            } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+          );
+        }
+
+        const isClickableOnlyCard = isClickable && !isSelectable;
+        if (
+          (isClickableOnlyCard || isSelectable) &&
+          !selectableActions?.selectableActionAriaLabel &&
+          !selectableActions?.selectableActionAriaLabelledby
+        ) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
+          );
         }
-      };
 
-      const getClickableSelectableProps = () => {
-        const baseProps = {
+        const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
+        const getSelectableProps = () => ({
           className: 'pf-m-standalone',
-          inputClassName: isClickable && !isSelectable && 'pf-v6-screen-reader',
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-          id: selectableActions.selectableActionId,
+          id: selectableActions.selectableActionId ?? `card-selectable-${uniqueId}`,
           name: selectableActions.name,
-          isDisabled: isCardDisabled
-        };
-        const isSelectableInputChecked = selectableActions.isChecked ?? isSelected;
+          isDisabled: isCardDisabled,
+          onChange: selectableActions.onChange,
+          isChecked: selectableActions.isChecked ?? isSelected,
+          ...selectableActions.selectableActionProps
+        });
 
-        if (isClickable && !isSelectable) {
-          return {
-            ...baseProps,
-            onClick: handleActionClick,
-            isChecked: isClicked
+        const isClickableLinkCard = selectableActions?.to !== undefined;
+        const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
+        const getClickableProps = () => {
+          const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
+          const baseProps = {
+            className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled),
+            id: selectableActions.selectableActionId,
+            'aria-label': selectableActions.selectableActionAriaLabel,
+            'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+            ...selectableActions.selectableActionProps
           };
-        }
-        if (isSelectable) {
-          return { ...baseProps, onChange: selectableActions.onChange, isChecked: isSelectableInputChecked };
-        }
 
-        return baseProps;
-      };
+          if (isClickableLinkCard) {
+            return {
+              ...baseProps,
+              href: selectableActions.to,
+              ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
+              ...(selectableActions.isExternalLink && { target: '_blank' })
+            };
+          }
+
+          return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
+        };
 
-      return (
-        <div
-          className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
-          id={id}
-          {...props}
-        >
-          {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {(actions || (selectableActions && (isClickable || isSelectable))) && (
-            <CardActions
-              className={actions?.className}
-              hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
-            >
-              {actions?.actions}
-              {selectableActions && (isClickable || isSelectable) && (
-                <CardSelectableActions className={selectableActions?.className}>
-                  {selectableActions?.variant === 'single' || (isClickable && !isSelectable) ? (
-                    <Radio {...getClickableSelectableProps()} />
-                  ) : (
-                    <Checkbox {...getClickableSelectableProps()} />
-                  )}
-                </CardSelectableActions>
-              )}
-            </CardActions>
-          )}
-          {children && <CardHeaderMain>{children}</CardHeaderMain>}
-          {onExpand && isToggleRightAligned && cardHeaderToggle}
-        </div>
-      );
-    }}
-  </CardContext.Consumer>
-);
+        return (
+          <div
+            className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
+            id={id}
+            {...props}
+          >
+            {onExpand && !isToggleRightAligned && cardHeaderToggle}
+            {(actions || (selectableActions && (isClickable || isSelectable))) && (
+              <CardActions
+                className={actions?.className}
+                hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+              >
+                {actions?.actions}
+                {selectableActions && (isClickable || isSelectable) && (
+                  <CardSelectableActions className={selectableActions?.className}>
+                    {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
+                    {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
+                  </CardSelectableActions>
+                )}
+              </CardActions>
+            )}
+            {children && <CardHeaderMain>{children}</CardHeaderMain>}
+            {onExpand && isToggleRightAligned && cardHeaderToggle}
+          </div>
+        );
+      }}
+    </CardContext.Consumer>
+  );
+};
 CardHeader.displayName = 'CardHeader';

package/src/components/Card/__tests__/CardHeader.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { CardHeader } from '../CardHeader';
+import { CardContext } from '../Card';
 
 describe('CardHeader', () => {
   test('onExpand adds the toggle button', () => {
@@ -13,3 +15,330 @@ describe('CardHeader', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+// TODO: check if hasNoOffset for actions/selectableActions and className for selectableActions render
+describe('Card with actions and selectableActions', () => {
+  test('Does not render selectable or clickable actions by default', () => {
+    render(<CardHeader>Test</CardHeader>);
+
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  test('Renders checkbox input when Card has isSelectable and selectableActions.variant = "multiple"', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+  test('Renders checkbox input by default when Card has isSelectable and selectableActions is passed with any props', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ className: 'test' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+  test('Renders radio input when Card has isSelectable and selectableActions.variant = "single"', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'single' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+  test('Renders default ID for selectable card input when selectableActions.selectableActionId is not passed', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox').getAttribute('id')).toMatch(/^card-selectable/);
+  });
+  test('Renders custom ID for selectable card input when selectableActions.selectableActionId is passed', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionId: 'custom-id' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'custom-id');
+  });
+  test('Renders name on a selectable card input', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'single', name: 'test' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('radio')).toHaveAttribute('name', 'test');
+  });
+  test('Renders a selectable card input as not checked by default', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+  test('Renders a selectable card input as checked when Card has isSelected = true', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true, isSelected: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+  test('Renders a selectable card input as checked when deprecated selectableActions.isChecked is true', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', isChecked: true }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+  test('Renders additional props on selectable card input when selectableActions.selectableActionProps is passed', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionProps: { style: { color: 'red' } } }}>
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAttribute('style');
+  });
+
+  test('Does not call onChange for selectable card when card is not clicked', async () => {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn();
+
+    render(
+      <>
+        <button>Test click</button>
+        <CardContext.Provider value={{ isSelectable: true }}>
+          <CardHeader selectableActions={{ variant: 'multiple', onChange: onChangeMock }}>Test</CardHeader>
+        </CardContext.Provider>
+      </>
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Test click' }));
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+  test('Calls onChange for selectable card when card is clicked', async () => {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', onChange: onChangeMock }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    const labelElement = document.querySelector('label');
+    await user.click(labelElement as HTMLElement);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
+  test('Renders button element when Card has isClickable and selectableActions.onClickAction is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ onClickAction: () => {} }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+  test('Renders anchor element when Card has isClickable and selectableActions.to is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+  });
+  test('Renders href when Card has isClickable and selectableActions.to is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#some-id' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#some-id');
+  });
+  test('Does not render ID on clickable element when selectableActions.selectableActionId is not passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).not.toHaveAttribute('id');
+  });
+  test('Renders ID on clickable element when selectableActions.selectableActionId is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionId: 'custom-id' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('id', 'custom-id');
+  });
+  test('Renders additional props on clickable element when selectableActions.selectableActionProps is passed', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionProps: { style: { color: 'red' } } }}>
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('style');
+  });
+  test('Does not render target="_blank" on clickable card anchor element by default"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).not.toHaveAttribute('target');
+  });
+  test('Renders target="_blank" on clickable card anchor element when selectableActions.isExternalLink is true"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', isExternalLink: true }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('target', '_blank');
+  });
+  test('Calls onClickAction for clickable card when card is clicked', async () => {
+    const user = userEvent.setup();
+    const onClickMock = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ onClickAction: onClickMock }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    await user.click(screen.getByRole('button'));
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  test('Throws error when Card is either clickable or selectable only and has actions prop passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader
+          actions={{ actions: <button>Toggle</button> }}
+          selectableActions={{ to: '#', selectableActionAriaLabel: 'Link' }}
+        >
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).toHaveBeenCalled();
+  });
+  test('Does not throw error when Card is both clickable and selectable and has actions prop passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isClickable: true, isSelectable: true }}>
+        <CardHeader
+          actions={{ actions: <button>Toggle</button> }}
+          selectableActions={{ to: '#', selectableActionAriaLabel: 'Link' }}
+        >
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).not.toHaveBeenCalled();
+  });
+  test('Throws error when Card has isClickable and selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby is not passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).toHaveBeenCalled();
+  });
+  test('Throws error when Card has isSelectable and selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby is not passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).toHaveBeenCalled();
+  });
+
+  test('Renders accessible name on selectable card input when selectableActions.selectableActionAriaLabel is passed', () => {
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionAriaLabel: accessibleName }}>
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName(accessibleName);
+  });
+  test('Renders accessible name on selectable card input when selectableActions.selectableActionAriaLabelledby is passed', () => {
+    const labelingId = 'labelling-id';
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionAriaLabelledby: labelingId }}>
+          <div id={labelingId}>{accessibleName}</div>
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName(accessibleName);
+  });
+  test('Renders accessible name on clickable card clickable element when selectableActions.selectableActionAriaLabel is passed', () => {
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionAriaLabel: accessibleName }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAccessibleName(accessibleName);
+  });
+  test('Renders accessible name on clickable card clickable element when selectableActions.selectableActionAriaLabelledby is passed', () => {
+    const labelingId = 'labelling-id';
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionAriaLabelledby: labelingId }}>
+          <div id={labelingId}>{accessibleName}</div>
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAccessibleName(accessibleName);
+  });
+});