Include aria label for copy button

Signed-off-by: Omar Babativa <obabativa@vmware.com>

.changeset/tender-cycles-shout.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Improve accessibility for CopyTextButton

packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx

@@ -40,3 +40,10 @@ export const LongerTooltipDelay = () => (
     tooltipDelay={3000}
   />
 );
+
+export const WithAriaLabel = () => (
+  <CopyTextButton
+    text="The text to copy to clipboard"
+    ariaLabel="This is an aria label"
+  />
+);

packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx

@@ -55,13 +55,14 @@ const apis = [[errorApiRef, mockErrorApi] as const] as const;
 
 describe('<CopyTextButton />', () => {
   it('renders without exploding', async () => {
-    const { getByTitle, queryByText } = await renderInTestApp(
+    const { getByTitle, queryByText, getByLabelText } = await renderInTestApp(
       <TestApiProvider apis={apis}>
         <CopyTextButton {...props} />
       </TestApiProvider>,
     );
     expect(getByTitle('mockTooltip')).toBeInTheDocument();
     expect(queryByText('mockTooltip')).not.toBeInTheDocument();
+    expect(getByLabelText('Copy text')).toBeInTheDocument();
   });
 
   it('displays tooltip and copy the text on click', async () => {
@@ -99,4 +100,13 @@ describe('<CopyTextButton />', () => {
     );
     expect(mockErrorApi.post).toHaveBeenCalledWith(error);
   });
+
+  it('aria-label', async () => {
+    const { getByLabelText } = await renderInTestApp(
+      <TestApiProvider apis={apis}>
+        <CopyTextButton {...props} ariaLabel="text for aria-label" />
+      </TestApiProvider>,
+    );
+    expect(getByLabelText('text for aria-label')).toBeInTheDocument();
+  });
 });

packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx

@@ -49,6 +49,10 @@ export interface CopyTextButtonProps {
   tooltipText?: string;
 }
 
+type LabelledCopyTextButtonProps = CopyTextButtonProps & {
+  ariaLabel?: string;
+};
+
 /**
  * Copy text button with visual feedback
  *
@@ -62,13 +66,18 @@ export interface CopyTextButtonProps {
  *
  * @example
  *
- * `<CopyTextButton text="My text that I want to be copied to the clipboard" />`
+ * ```
+ * <CopyTextButton
+ *   text="My text that I want to be copied to the clipboard"
+ *   ariaLabel="Accessible label for this button" />
+ * ```
  */
-export function CopyTextButton(props: CopyTextButtonProps) {
+export function CopyTextButton(props: LabelledCopyTextButtonProps) {
   const {
     text,
     tooltipDelay = 1000,
     tooltipText = 'Text copied to clipboard',
+    ariaLabel = 'Copy text',
   } = props;
   const errorApi = useApi(errorApiRef);
   const [open, setOpen] = useState(false);
@@ -96,7 +105,7 @@ export function CopyTextButton(props: CopyTextButtonProps) {
         onClose={() => setOpen(false)}
         open={open}
       >
-        <IconButton onClick={handleCopyClick}>
+        <IconButton onClick={handleCopyClick} aria-label={ariaLabel}>
           <CopyIcon />
         </IconButton>
       </Tooltip>