Merge pull request #19522 from acll19/improve-tech-radar-accessibility

[tech-radar] Adds discernible names to blip links in the radar

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);
   });
 });

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}
         </a>
       ) : (
-        <WithLink url={url} className={classes.link}>
+        <WithLink url={url} className={classes.link} aria-labelledby={entryId}>
           {blip}
         </WithLink>
       )}
-      <text y={3} className={classes.text}>
+      <text aria-labelledby={entryId} y={3} className={classes.text}>
         {value}
       </text>
     </g>

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 = ({
         >
           <Typography
             component="span"
+            id={entryId}
             className={active ? classes.activeEntry : classes.entry}
           >
             {title}
@@ -89,6 +92,7 @@ export const RadarLegendLink = ({
     <WithLink url={url} className={classes.entryLink}>
       <Typography
         component="span"
+        id={entryId}
         className={active ? classes.activeEntry : classes.entry}
       >
         {title}

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -63,6 +63,7 @@ export const RadarLegendRing = ({
             >
               <RadarLegendLink
                 classes={classes}
+                entryId={entry.id}
                 url={entry.url}
                 title={entry.title}
                 description={entry.description}

plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx

@@ -71,6 +71,7 @@ const RadarPlot = (props: Props): JSX.Element => {
             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}