diff --git a/.changeset/tender-cycles-shout.md b/.changeset/tender-cycles-shout.md
new file mode 100644
index 0000000000..b5b069759f
--- /dev/null
+++ b/.changeset/tender-cycles-shout.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Improve accessibility for CopyTextButton
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.stories.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.stories.tsx
index c1834091b5..3e6435ddad 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 = () => (
+
+);
diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.test.tsx
index 462bfb36cb..e6448ce5ee 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('', () => {
it('renders without exploding', async () => {
- const { getByTitle, queryByText } = await renderInTestApp(
+ const { getByTitle, queryByText, getByLabelText } = await renderInTestApp(
,
);
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('', () => {
);
expect(mockErrorApi.post).toHaveBeenCalledWith(error);
});
+
+ it('aria-label', async () => {
+ const { getByLabelText } = await renderInTestApp(
+
+
+ ,
+ );
+ 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..bd900a931d 100644
--- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
+++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx
@@ -47,6 +47,15 @@ export interface CopyTextButtonProps {
* Default: "Text copied to clipboard"
*/
tooltipText?: string;
+
+ /**
+ * Text to use as aria-label prop on the button
+ *
+ * @remarks
+ *
+ * Default: "Copy text"
+ */
+ 'aria-label'?: string;
}
/**
@@ -62,13 +71,18 @@ export interface CopyTextButtonProps {
*
* @example
*
- * ``
+ * ```
+ *
+ * ```
*/
export function CopyTextButton(props: CopyTextButtonProps) {
const {
text,
tooltipDelay = 1000,
tooltipText = 'Text copied to clipboard',
+ 'aria-label': ariaLabel = 'Copy text',
} = props;
const errorApi = useApi(errorApiRef);
const [open, setOpen] = useState(false);
@@ -96,7 +110,7 @@ export function CopyTextButton(props: CopyTextButtonProps) {
onClose={() => setOpen(false)}
open={open}
>
-
+