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