From ae746946f79bd17e99c5458d070b6b10561b8483 Mon Sep 17 00:00:00 2001
From: Omar Babativa <obabativa@vmware.com>
Date: Fri, 8 Jul 2022 15:59:33 -0500
Subject: [PATCH 1/3] Include aria label for copy button

Signed-off-by: Omar Babativa <obabativa@vmware.com>
---
 .changeset/tender-cycles-shout.md                 |  5 +++++
 .../CopyTextButton/CopyTextButton.stories.tsx     |  7 +++++++
 .../CopyTextButton/CopyTextButton.test.tsx        | 12 +++++++++++-
 .../components/CopyTextButton/CopyTextButton.tsx  | 15 ++++++++++++---
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/tender-cycles-shout.md

diff --git a/.changeset/tender-cycles-shout.md b/.changeset/tender-cycles-shout.md
new file mode 100644
index 0000000000..aca42f18c7
--- /dev/null
+++ b/.changeset/tender-cycles-shout.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Improve accessibility for CopyTextButton
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx
index c1834091b5..ac56ad0e30 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx
+++ b/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"
+  />
+);
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx
index 462bfb36cb..14e5d54cb7 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx
+++ b/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();
+  });
 });
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
index 670c21f10c..485c389b5d 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
+++ b/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>

From 9386402764ed7cfe99591034c641a5ba0edff46f Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Wed, 13 Jul 2022 11:30:50 +0200
Subject: [PATCH 2/3] chore: fix up code review comments Signed-off-by: blam
 <ben@blam.sh>

---
 .changeset/tender-cycles-shout.md                           | 2 +-
 .../components/CopyTextButton/CopyTextButton.stories.tsx    | 2 +-
 .../src/components/CopyTextButton/CopyTextButton.test.tsx   | 2 +-
 .../src/components/CopyTextButton/CopyTextButton.tsx        | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.changeset/tender-cycles-shout.md b/.changeset/tender-cycles-shout.md
index aca42f18c7..b5b069759f 100644
--- a/.changeset/tender-cycles-shout.md
+++ b/.changeset/tender-cycles-shout.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/core-components': minor
+'@backstage/core-components': patch
 ---
 
 Improve accessibility for CopyTextButton
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx
index ac56ad0e30..3e6435ddad 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx
+++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx
@@ -44,6 +44,6 @@ export const LongerTooltipDelay = () => (
 export const WithAriaLabel = () => (
   <CopyTextButton
     text="The text to copy to clipboard"
-    ariaLabel="This is an aria label"
+    aria-label="This is an aria label"
   />
 );
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx
index 14e5d54cb7..e6448ce5ee 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx
+++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx
@@ -104,7 +104,7 @@ describe('<CopyTextButton />', () => {
   it('aria-label', async () => {
     const { getByLabelText } = await renderInTestApp(
       <TestApiProvider apis={apis}>
-        <CopyTextButton {...props} ariaLabel="text for aria-label" />
+        <CopyTextButton {...props} aria-label="text for aria-label" />
       </TestApiProvider>,
     );
     expect(getByLabelText('text for aria-label')).toBeInTheDocument();
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
index 485c389b5d..2a6543b9cd 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
+++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
@@ -50,7 +50,7 @@ export interface CopyTextButtonProps {
 }
 
 type LabelledCopyTextButtonProps = CopyTextButtonProps & {
-  ariaLabel?: string;
+  'aria-label'?: string;
 };
 
 /**
@@ -69,7 +69,7 @@ type LabelledCopyTextButtonProps = CopyTextButtonProps & {
  * ```
  * <CopyTextButton
  *   text="My text that I want to be copied to the clipboard"
- *   ariaLabel="Accessible label for this button" />
+ *   arial-label="Accessible label for this button" />
  * ```
  */
 export function CopyTextButton(props: LabelledCopyTextButtonProps) {
@@ -77,7 +77,7 @@ export function CopyTextButton(props: LabelledCopyTextButtonProps) {
     text,
     tooltipDelay = 1000,
     tooltipText = 'Text copied to clipboard',
-    ariaLabel = 'Copy text',
+    'aria-label': ariaLabel = 'Copy text',
   } = props;
   const errorApi = useApi(errorApiRef);
   const [open, setOpen] = useState(false);

From db41d20e99e93743f281172f6b993a810fad84e9 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Wed, 13 Jul 2022 11:35:39 +0200
Subject: [PATCH 3/3] chore: slight refactor Signed-off-by: blam <ben@blam.sh>

---
 packages/core-components/api-report.md              |  1 +
 .../components/CopyTextButton/CopyTextButton.tsx    | 13 +++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 302ef7ef7d..4e3820967a 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -190,6 +190,7 @@ export function CopyTextButton(props: CopyTextButtonProps): JSX.Element;
 
 // @public
 export interface CopyTextButtonProps {
+  'aria-label'?: string;
   text: string;
   tooltipDelay?: number;
   tooltipText?: string;
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
index 2a6543b9cd..bd900a931d 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
+++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
@@ -47,11 +47,16 @@ export interface CopyTextButtonProps {
    * Default: "Text copied to clipboard"
    */
   tooltipText?: string;
-}
 
-type LabelledCopyTextButtonProps = CopyTextButtonProps & {
+  /**
+   * Text to use as aria-label prop on the button
+   *
+   * @remarks
+   *
+   * Default: "Copy text"
+   */
   'aria-label'?: string;
-};
+}
 
 /**
  * Copy text button with visual feedback
@@ -72,7 +77,7 @@ type LabelledCopyTextButtonProps = CopyTextButtonProps & {
  *   arial-label="Accessible label for this button" />
  * ```
  */
-export function CopyTextButton(props: LabelledCopyTextButtonProps) {
+export function CopyTextButton(props: CopyTextButtonProps) {
   const {
     text,
     tooltipDelay = 1000,