diff --git a/.changeset/dirty-garlics-kiss.md b/.changeset/dirty-garlics-kiss.md new file mode 100644 index 0000000000..98a9b569cc --- /dev/null +++ b/.changeset/dirty-garlics-kiss.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-radar': patch +--- + +Add names to blip entry links in the radar to improve accessibility diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx index 36f304330d..2935b29534 100644 --- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx +++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { screen } from '@testing-library/react'; +import { screen, within } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import userEvent from '@testing-library/user-event'; import GetBBoxPolyfill from '../../utils/polyfills/getBBox'; @@ -27,6 +27,7 @@ const minProps: Props = { y: 2, value: 2, color: 'red', + entryId: 'Typescript', }; const optionalProps: Props = { @@ -56,6 +57,11 @@ describe('RadarEntry', () => { expect(radarEntry).toBeInTheDocument(); expect(radarEntry.getAttribute('transform')).toBe(`translate(${x}, ${y})`); expect(screen.getByText(String(minProps.value))).toBeInTheDocument(); + expect( + within(radarEntry) + .getByText(String(minProps.value)) + .getAttribute('aria-labelledby'), + ).toBe(minProps.entryId); }); it('should render with description', async () => { @@ -73,6 +79,11 @@ describe('RadarEntry', () => { const radarDescription = screen.getByTestId('radar-description'); expect(radarDescription).toBeInTheDocument(); expect(screen.getByText(String(minProps.value))).toBeInTheDocument(); + expect( + within(radarEntry) + .getByText(String(minProps.value)) + .getAttribute('aria-labelledby'), + ).toBe(minProps.entryId); }); it('should render blip with url equal to # if description present', async () => { @@ -87,5 +98,11 @@ describe('RadarEntry', () => { ); expect(screen.getByRole('button')).toHaveAttribute('href', '#'); + const radarEntry = screen.getByTestId('radar-entry'); + expect( + within(radarEntry) + .getByText(String(minProps.value)) + .getAttribute('aria-labelledby'), + ).toBe(minProps.entryId); }); }); diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx index 66940cd1d7..b7f5ea5962 100644 --- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx +++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx @@ -23,6 +23,7 @@ import type { EntrySnapshot } from '../../utils/types'; export type Props = { x: number; y: number; + entryId: string; value: number; color: string; url?: string; @@ -76,6 +77,7 @@ const RadarEntry = (props: Props): JSX.Element => { url, links, value, + entryId, x, y, onMouseEnter, @@ -126,15 +128,16 @@ const RadarEntry = (props: Props): JSX.Element => { href="#" tabIndex={0} onKeyPress={toggle} + aria-labelledby={entryId} > {blip} ) : ( - + {blip} )} - + {value} diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx index 4273963690..11443769f2 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx @@ -21,6 +21,7 @@ import { RadarDescription } from '../RadarDescription'; import type { EntrySnapshot } from '../../utils/types'; type RadarLegendLinkProps = { + entryId: string; url?: string; description?: string; title?: string; @@ -31,6 +32,7 @@ type RadarLegendLinkProps = { }; export const RadarLegendLink = ({ + entryId, url, description, title, @@ -66,6 +68,7 @@ export const RadarLegendLink = ({ > {title} @@ -89,6 +92,7 @@ export const RadarLegendLink = ({ {title} diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx index 2005d21915..8942efa08e 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx @@ -63,6 +63,7 @@ export const RadarLegendRing = ({ > { x={entry.x || 0} y={entry.y || 0} color={entry.color || ''} + entryId={entry.id} value={(entry?.index || 0) + 1} url={entry.url} links={entry.links}