fix(ClipboardCopy): Adjust aria-labels on buttons

Remove aria-labelled by from copy and expand buttons in favor of aria-label. In case of copy button, add new prop for aria-label and pull from hoverTip if not provided. Long term, we will want to further separate these two in a breaking release.

Author: rebeccaalpert

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

packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -11,8 +11,6 @@ export interface ClipboardCopyButtonProps
   children: React.ReactNode;
   /** ID of the copy button */
   id: string;
-  /** 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 +53,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   position = 'top',
   'aria-label': ariaLabel = 'Copyable input',
   id,
-  textId,
   children,
   variant = 'control',
   onTooltipHidden = () => {},
@@ -86,7 +83,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         aria-label={ariaLabel}
         className={className}
         id={id}
-        aria-labelledby={`${id} ${textId}`}
         icon={<CopyIcon />}
         {...props}
         ref={triggerRef}

packages/react-core/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}

packages/react-core/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', () => {

packages/react-core/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', () => {

packages/react-core/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"

packages/react-core/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"

packages/react-core/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>
 );

packages/react-core/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>

packages/react-core/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>
 );