@patternfly/react-core 6.3.1-prerelease.2 → 6.3.1-prerelease.20

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.3.1-prerelease.1","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.3.1-prerelease.19","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.3.1-prerelease.1","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.3.1-prerelease.19","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.3.1-prerelease.1","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.3.1-prerelease.19","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.2",
+  "version": "6.3.1-prerelease.20",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0",
-    "@patternfly/react-styles": "^6.3.0",
-    "@patternfly/react-tokens": "^6.3.0",
+    "@patternfly/react-icons": "^6.3.1-prerelease.1",
+    "@patternfly/react-styles": "^6.3.1-prerelease.1",
+    "@patternfly/react-tokens": "^6.3.1-prerelease.1",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.41",
+    "@patternfly/patternfly": "6.3.0-prerelease.78",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "8d65eb8ad40d4d01963d6c3280f48fe3cd709056"
+  "gitHead": "0c3218ffa84a0359f3b6242c118d1620b30278c9"
 }

package/src/components/Alert/AlertGroup.tsx

@@ -1,7 +1,8 @@
-import { Component } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { canUseDOM } from '../../helpers';
 import { AlertGroupInline } from './AlertGroupInline';
+import { useHasAnimations } from '../../helpers';
 
 export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>, 'className'> {
   /** Additional classes added to the AlertGroup */
@@ -26,78 +27,73 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   'aria-label'?: string;
 }
 
-interface AlertGroupState {
-  container: HTMLElement;
-}
-
-class AlertGroup extends Component<AlertGroupProps, AlertGroupState> {
-  static displayName = 'AlertGroup';
-  state = {
-    container: undefined
-  } as AlertGroupState;
-
-  componentDidMount() {
-    const container = document.createElement('div');
-    const target: HTMLElement = this.getTargetElement();
-    this.setState({ container });
-    target.appendChild(container);
-  }
+export const AlertGroup: React.FunctionComponent<AlertGroupProps> = ({
+  className,
+  children,
+  hasAnimations: hasAnimationsProp,
+  isToast,
+  isLiveRegion,
+  onOverflowClick,
+  overflowMessage,
+  'aria-label': ariaLabel,
 
-  componentWillUnmount() {
-    const target: HTMLElement = this.getTargetElement();
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
-  }
+  appendTo,
+  ...props
+}: AlertGroupProps) => {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const [isContainerReady, setIsContainerReady] = useState(false);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
-  getTargetElement() {
-    const appendTo = this.props.appendTo;
+  const getTargetElement = () => {
     if (typeof appendTo === 'function') {
       return appendTo();
     }
     return appendTo || document.body;
-  }
+  };
+
+  useEffect(() => {
+    if (isToast && canUseDOM) {
+      const container = document.createElement('div');
+      const target = getTargetElement();
+      containerRef.current = container;
+      target.appendChild(container);
+      setIsContainerReady(true);
 
-  render() {
-    const {
-      className,
-      children,
-      hasAnimations = false,
-      isToast,
-      isLiveRegion,
-      onOverflowClick,
-      overflowMessage,
-      'aria-label': ariaLabel,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      appendTo, // do not pass down to ul
-      ...props
-    } = this.props;
-    const alertGroup = (
-      <AlertGroupInline
-        onOverflowClick={onOverflowClick}
-        className={className}
-        isToast={isToast}
-        isLiveRegion={isLiveRegion}
-        overflowMessage={overflowMessage}
-        aria-label={ariaLabel}
-        hasAnimations={hasAnimations}
-        {...props}
-      >
-        {children}
-      </AlertGroupInline>
-    );
-    if (!this.props.isToast) {
-      return alertGroup;
+      return () => {
+        if (containerRef.current) {
+          target.removeChild(containerRef.current);
+          containerRef.current = null;
+        }
+        setIsContainerReady(false);
+      };
     }
+  }, [isToast, appendTo]);
 
-    const container = this.state.container;
+  const alertGroup = (
+    <AlertGroupInline
+      onOverflowClick={onOverflowClick}
+      className={className}
+      isToast={isToast}
+      isLiveRegion={isLiveRegion}
+      overflowMessage={overflowMessage}
+      aria-label={ariaLabel}
+      hasAnimations={hasAnimations}
+      {...props}
+    >
+      {children}
+    </AlertGroupInline>
+  );
 
-    if (!canUseDOM || !container) {
-      return null;
-    }
+  if (!isToast) {
+    return alertGroup;
+  }
+
+  const container = containerRef.current;
 
-    return ReactDOM.createPortal(alertGroup, container);
+  if (!canUseDOM || !container || !isContainerReady) {
+    return null;
   }
-}
 
-export { AlertGroup };
+  return ReactDOM.createPortal(alertGroup, container);
+};
+AlertGroup.displayName = 'AlertGroup';

package/src/components/Alert/AlertGroupInline.tsx

@@ -4,17 +4,19 @@ import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
 import { AlertGroupProps } from './AlertGroup';
 import { AlertProps } from '../Alert';
 import { AlertGroupContext } from './AlertGroupContext';
+import { useHasAnimations } from '../../helpers';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
   children,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   isToast,
   isLiveRegion,
   onOverflowClick,
   overflowMessage,
   ...props
 }: AlertGroupProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [handleTransitionEnd, setHandleTransitionEnd] = useState<() => void>(() => () => {});
 
   const updateTransitionEnd = (onTransitionEnd: () => void) => {

package/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { Alert } from '../../Alert';
 import { AlertGroup } from '../../Alert';
 import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 test('Alert Group renders without children', () => {
   render(
@@ -56,14 +57,16 @@ test('Standard Alert Group is not a toast alert group', () => {
   expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
 });
 
-test('Toast Alert Group contains expected modifier class', () => {
+test('Toast Alert Group contains expected modifier class', async () => {
   render(
     <AlertGroup isToast aria-label="group label">
       <Alert variant="warning" title="alert title" />
     </AlertGroup>
   );
 
-  expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+  // Wait for the portal to be created and rendered
+  const alertGroup = await screen.findByLabelText('group label');
+  expect(alertGroup).toHaveClass('pf-m-toast');
 });
 
 test('Calls the callback set by updateTransitionEnd when transition ends and animations are enabled', async () => {
@@ -90,8 +93,11 @@ test('Calls the callback set by updateTransitionEnd when transition ends and ani
     </AlertGroup>
   );
 
-  await user.click(screen.getByLabelText('Close'));
+  const closeButton = await screen.findByLabelText('Close');
+  await user.click(closeButton);
   expect(mockCallback).not.toHaveBeenCalled();
+  // fireEvent is needed here because transitionEnd is a browser event that occurs automatically
+  // when CSS transitions complete, not a user interaction that userEvent can simulate
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalled();
 });
@@ -120,9 +126,54 @@ test('Does not call the callback set by updateTransitionEnd when transition ends
     </AlertGroup>
   );
 
-  await user.click(screen.getByLabelText('Close'));
+  const closeButton = await screen.findByLabelText('Close');
+  await user.click(closeButton);
   expect(mockCallback).toHaveBeenCalledTimes(1);
   // The transitionend event firing should not cause the callback to be called again
+  // fireEvent is needed here because transitionEnd is a browser event that occurs automatically
+  // when CSS transitions complete, not a user interaction that userEvent can simulate
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalledTimes(1);
 });
+
+describe('Animation context behavior', () => {
+  test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <AlertGroup>
+          <Alert title="Test Alert" />
+        </AlertGroup>
+      </AnimationsProvider>
+    );
+
+    // Should apply animation class when animations are enabled via context
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).toHaveClass('pf-m-offstage-top');
+  });
+
+  test('local hasAnimations prop takes precedence over context', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <AlertGroup hasAnimations={false}>
+          <Alert title="Test Alert" />
+        </AlertGroup>
+      </AnimationsProvider>
+    );
+
+    // Should not apply animation class when local hasAnimations=false overrides context
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).not.toHaveClass('pf-m-offstage-top');
+  });
+
+  test('works without AnimationsProvider (backward compatibility)', () => {
+    render(
+      <AlertGroup>
+        <Alert title="Test Alert" />
+      </AlertGroup>
+    );
+
+    // Should not apply animation class when no context and no local hasAnimations
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).not.toHaveClass('pf-m-offstage-top');
+  });
+});

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -49,6 +49,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   hoverTip?: string;
   /** Tooltip message to display when clicking the copy button */
   clickTip?: string;
+  /** Aria-label to use on the copy button */
+  copyAriaLabel?: string;
   /** Aria-label to use on the TextInput. */
   textAriaLabel?: string;
   /** Aria-label to use on the ClipboardCopyToggle. */
@@ -194,6 +196,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       truncation,
       ouiaId,
       ouiaSafe,
+      copyAriaLabel,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -250,8 +253,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                       maxWidth={maxWidth}
                       position={position}
                       id={`copy-button-${id}`}
-                      textId={`text-input-${id}`}
-                      aria-label={hoverTip}
+                      aria-label={copyAriaLabel ?? hoverTip}
                       onClick={(event: any) => {
                         onCopy(event, copyableText);
                         this.setState({ copied: true });
@@ -285,7 +287,6 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                         }
                       }}
                       id={`${toggleIdPrefix}${id}`}
-                      textId={`${textIdPrefix}${id}`}
                       contentId={`${contentIdPrefix}${id}`}
                       aria-label={toggleAriaLabel}
                     />
@@ -304,8 +305,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     maxWidth={maxWidth}
                     position={position}
                     id={`copy-button-${id}`}
-                    textId={`text-input-${id}`}
-                    aria-label={hoverTip}
+                    aria-label={copyAriaLabel ?? hoverTip}
                     onClick={(event: any) => {
                       onCopy(event, this.state.expanded ? this.state.textWhenExpanded : copyableText);
                       this.setState({ copied: true });

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -11,8 +11,8 @@ export interface ClipboardCopyButtonProps
   children: React.ReactNode;
   /** ID of the copy button */
   id: string;
-  /** ID of the content that is being copied */
-  textId: string;
+  /** @deprecated ID of the content that is being copied */
+  textId?: string;
   /** Additional classes added to the copy button */
   className?: string;
   /** Exit delay on the copy button tooltip */
@@ -55,7 +55,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   position = 'top',
   'aria-label': ariaLabel = 'Copyable input',
   id,
-  textId,
   children,
   variant = 'control',
   onTooltipHidden = () => {},
@@ -86,7 +85,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         aria-label={ariaLabel}
         className={className}
         id={id}
-        aria-labelledby={`${id} ${textId}`}
         icon={<CopyIcon />}
         {...props}
         ref={triggerRef}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -7,7 +7,6 @@ export interface ClipboardCopyToggleProps
   extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
   onClick: (event: React.MouseEvent) => void;
   id: string;
-  textId: string;
   contentId: string;
   isExpanded?: boolean;
   className?: string;
@@ -16,7 +15,6 @@ export interface ClipboardCopyToggleProps
 export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyToggleProps> = ({
   onClick,
   id,
-  textId,
   contentId,
   isExpanded = false,
   ...props
@@ -26,7 +24,6 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     variant="control"
     onClick={onClick}
     id={id}
-    aria-labelledby={`${id} ${textId}`}
     aria-controls={isExpanded ? contentId : undefined}
     aria-expanded={isExpanded}
     {...props}

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

@@ -265,6 +265,22 @@ test('Passes position to ClipboardCopyButton when variant is inline-compact', ()
   expect(screen.getByText('position: bottom')).toBeVisible();
 });
 
+test('Passes copyAriaLabel to ClipboardCopyButton', () => {
+  render(<ClipboardCopy copyAriaLabel="Copy text">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('button-ariaLabel: Copy text')).toBeVisible();
+});
+
+test('Passes copyAriaLabel over hoverTip to ClipboardCopyButton when both are provided', () => {
+  render(
+    <ClipboardCopy copyAriaLabel="Copy text" hoverTip="Hover tip">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('button-ariaLabel: Copy text')).toBeVisible();
+});
+
 test('Passes toggleAriaLabel to ClipboardCopyToggle when variant is expansion', () => {
   render(
     <ClipboardCopy variant="expansion" toggleAriaLabel="toggle label">

package/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx

@@ -21,8 +21,7 @@ jest.mock('../../Tooltip', () => ({
 const requiredProps = {
   onClick: jest.fn(),
   children: 'Button content',
-  id: 'button-id',
-  textId: 'text-id'
+  id: 'button-id'
 };
 
 // Must be kept as first test to avoid Button's ouiaId updating in snapshots
@@ -37,37 +36,15 @@ test('Renders with passed id prop', () => {
   expect(screen.getByRole('button')).toHaveAttribute('id', 'button-id');
 });
 
-test('Renders with aria-labelledby with passed id and textId prop values', () => {
+test('Renders with aria-label', () => {
   render(
     <>
-      <div id="text-id">Copyable text</div>
-      <ClipboardCopyButton {...requiredProps} />
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
-});
-
-test('Renders with concatenated aria-label by default', () => {
-  render(
-    <>
-      <div id="text-id">Copyable text</div>
-      <ClipboardCopyButton {...requiredProps} />
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
-});
-
-test('Renders with concatenated aria-label when custom aria-label is passed', () => {
-  render(
-    <>
-      <div id="text-id">Copyable text</div>
-      <ClipboardCopyButton aria-label="Custom label" {...requiredProps} />
+      <div>Copyable text</div>
+      <ClipboardCopyButton aria-label="Copy" {...requiredProps} />
     </>
   );
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('Custom label Copyable text');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Copy');
 });
 
 test('Passes className to Button', () => {

package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 const onClickMock = jest.fn();
 const requiredProps = {
   id: 'main-id',
-  textId: 'text-id',
   contentId: 'content-id',
   onClick: onClickMock
 };
@@ -33,15 +32,15 @@ test('Renders with id prop', () => {
   expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id);
 });
 
-test('Renders with aria-labelledby concatenated from id and textId props', () => {
+test('Renders with aria-label', () => {
   render(
     <>
       <ClipboardCopyToggle aria-label="Toggle content" {...requiredProps} />
-      <span id={requiredProps.textId}>Test content</span>
+      <span>Test content</span>
     </>
   );
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content');
 });
 
 test('Does not render with aria-controls when isExpanded is false', () => {

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-34"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-36"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -29,7 +29,6 @@ exports[`Matches snapshot 1`] = `
     </a>
     <button
       aria-label="Copyable input"
-      aria-labelledby="button-id text-id"
       class="pf-v6-c-button pf-m-control"
       data-ouia-component-id="OUIA-Generated-Button-control-1"
       data-ouia-component-type="PF6/Button"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    aria-labelledby="main-id text-id"
     class="pf-v6-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
     data-ouia-component-type="PF6/Button"

package/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx

@@ -1,7 +1,7 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 
 export const ClipboardCopyBasic: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied">
+  <ClipboardCopy copyAriaLabel="Copy basic example" hoverTip="Copy" clickTip="Copied">
     This is editable
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx

@@ -1,7 +1,13 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyExpanded: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    toggleAriaLabel="Show content for expanded example"
+    copyAriaLabel="Copy expanded example"
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
     expansion.
   </ClipboardCopy>

package/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx

@@ -7,7 +7,13 @@ const text = [
 ];
 
 export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    copyAriaLabel="Copy expanded example with array"
+    toggleAriaLabel="Show content for expanded example with array"
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     {text.join(' ')}
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx

@@ -1,6 +1,6 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 export const ClipboardCopyInlineCompact: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+  <ClipboardCopy copyAriaLabel="Copy inline compact example" hoverTip="Copy" clickTip="Copied" variant="inline-compact">
     2.3.4-2-redhat
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx

@@ -1,7 +1,13 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 
 export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
+  <ClipboardCopy
+    copyAriaLabel="Copy inline compact code example"
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant="inline-compact"
+    isCode
+  >
     2.3.4-2-redhat
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx

@@ -7,7 +7,12 @@ export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = ()
     <br />
     Lorem ipsum{' '}
     {
-      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      <ClipboardCopy
+        copyAriaLabel="Copy inline compact basic example"
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant="inline-compact"
+      >
         2.3.4-2-redhat
       </ClipboardCopy>
     }
@@ -17,7 +22,12 @@ export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = ()
     <br />
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
     {
-      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      <ClipboardCopy
+        copyAriaLabel="Copy inline compact long copy string example"
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant="inline-compact"
+      >
         https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
       </ClipboardCopy>
     }{' '}
@@ -27,7 +37,13 @@ export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = ()
     <br />
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
     {
-      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+      <ClipboardCopy
+        copyAriaLabel="Copy inline compact long copy string in block example"
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant="inline-compact"
+        isBlock
+      >
         https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
       </ClipboardCopy>
     }{' '}