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 = () => ( + +); 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('', () => { 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..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 * - * `` + * ``` + * + * ``` */ -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} > - +