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} > - +