From ce586cc2f9f420258f6b41e3221c7474672c1275 Mon Sep 17 00:00:00 2001
From: fullsend-code
 <278716306+fullsend-ai-coder[bot]@users.noreply.github.com>
Date: Thu, 25 Jun 2026 16:32:37 +0000
Subject: [PATCH] feat(#3580): enable accessibility checks and fix a11y issues

Remove the skipFailures option from runAccessibilityTests so that
accessibility violations always cause test failures instead of
being silently ignored.

Fix WCAG 2.0/2.1 AA violations across the extensions plugin:

- PluginCard: add role="link", tabIndex, keyboard handler, and
  aria-label to the clickable card for keyboard accessibility
- PluginIcon: add role="img" and aria-label to CardMedia elements
  so screen readers announce plugin icons
- RowActions: add aria-label to all IconButton components; replace
  nested IconButton+Switch with standalone Switch using inputProps
  aria-label to eliminate nested interactive elements
- Badges: replace title attr with aria-label on BadgeChip; add
  role="img" and aria-label to BadgeTriangle; mark decorative
  SVG icons with aria-hidden
- TabPanel: add id and aria-labelledby to the tabpanel element;
  replace keyless Fragment with keyed Box in inner map

Update PluginIcon tests to verify the new aria-label attribute
on both icon and fallback-icon states.

Closes #3580
---
 .../e2e-tests/utils/accessibility.ts          | 11 ++--
 .../extensions/src/components/Badges.tsx      |  9 +++-
 .../InstalledPackages/RowActions.tsx          | 51 +++++++++++++------
 .../extensions/src/components/PluginCard.tsx  | 16 +++++-
 .../src/components/PluginIcon.test.tsx        | 14 +++--
 .../extensions/src/components/PluginIcon.tsx  |  7 +++
 .../extensions/src/components/TabPanel.tsx    | 40 ++++++++-------
 7 files changed, 99 insertions(+), 49 deletions(-)

diff --git a/workspaces/extensions/e2e-tests/utils/accessibility.ts b/workspaces/extensions/e2e-tests/utils/accessibility.ts
index 586d0c10c3..ed38579fa1 100644
--- a/workspaces/extensions/e2e-tests/utils/accessibility.ts
+++ b/workspaces/extensions/e2e-tests/utils/accessibility.ts
@@ -21,7 +21,6 @@ export async function runAccessibilityTests(
   page: Page,
   testInfo: TestInfo,
   attachName = 'accessibility-scan-results.json',
-  options: { skipFailures?: boolean } = { skipFailures: true },
 ) {
   const accessibilityScanResults = await new AxeBuilder({ page })
     .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
@@ -32,10 +31,8 @@ export async function runAccessibilityTests(
     contentType: 'application/json',
   });
 
-  if (!options?.skipFailures) {
-    expect(
-      accessibilityScanResults.violations,
-      'Accessibility violations found',
-    ).toEqual([]);
-  }
+  expect(
+    accessibilityScanResults.violations,
+    'Accessibility violations found',
+  ).toEqual([]);
 }
diff --git a/workspaces/extensions/plugins/extensions/src/components/Badges.tsx b/workspaces/extensions/plugins/extensions/src/components/Badges.tsx
index ad4fe6cba3..0ad5fe9cca 100644
--- a/workspaces/extensions/plugins/extensions/src/components/Badges.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/Badges.tsx
@@ -116,7 +116,7 @@ export const BadgeChip = ({ plugin }: { plugin: ExtensionsPlugin }) => {
         label={options.label}
         variant="outlined"
         size="small"
-        title={options.tooltip}
+        aria-label={options.tooltip ?? options.label}
         sx={{
           cursor: 'pointer',
         }}
@@ -142,7 +142,11 @@ export const BadgeTriange = ({ plugin }: { plugin: ExtensionsPlugin }) => {
     <div style={{ position: 'relative' }}>
       <div style={{ position: 'absolute' }}>
         <Tooltip title={options.tooltip} placement="top" arrow>
-          <div style={{ width: size, height: size }}>
+          <div
+            style={{ width: size, height: size }}
+            role="img"
+            aria-label={options.tooltip}
+          >
             <div
               style={{
                 position: 'absolute',
@@ -153,6 +157,7 @@ export const BadgeTriange = ({ plugin }: { plugin: ExtensionsPlugin }) => {
               }}
             />
             <TaskAltIcon
+              aria-hidden="true"
               style={{
                 position: 'absolute',
                 top: 4,
diff --git a/workspaces/extensions/plugins/extensions/src/components/InstalledPackages/RowActions.tsx b/workspaces/extensions/plugins/extensions/src/components/InstalledPackages/RowActions.tsx
index 10a11f5302..23d3bb193a 100644
--- a/workspaces/extensions/plugins/extensions/src/components/InstalledPackages/RowActions.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/InstalledPackages/RowActions.tsx
@@ -74,6 +74,7 @@ export const DownloadPackageYaml = ({
       <IconButton
         size="small"
         disabled
+        aria-label={t('installedPackages.table.tooltips.downloadPackage')}
         sx={{ color: theme => theme.palette.action.disabled }}
       >
         <FileDownloadOutlinedIcon />
@@ -111,6 +112,7 @@ export const DownloadPackageYaml = ({
     <Tooltip title={t('installedPackages.table.tooltips.downloadPackage')}>
       <IconButton
         size="small"
+        aria-label={t('installedPackages.table.tooltips.downloadPackage')}
         sx={{ color: theme => theme.palette.text.primary }}
         onClick={async () => {
           try {
@@ -175,6 +177,7 @@ export const EditPackage = ({
       <IconButton
         size="small"
         disabled
+        aria-label={t('installedPackages.table.tooltips.editPackage')}
         sx={{ color: theme => theme.palette.action.disabled }}
       >
         <EditIcon />
@@ -199,6 +202,7 @@ export const EditPackage = ({
   const viewIcon = (
     <IconButton
       size="small"
+      aria-label={t('actions.view')}
       sx={{ color: theme => theme.palette.text.primary }}
       onClick={() =>
         navigate(packagePathWithSearchParams, {
@@ -252,6 +256,7 @@ export const EditPackage = ({
     <Tooltip title={t('installedPackages.table.tooltips.editPackage')}>
       <IconButton
         size="small"
+        aria-label={t('installedPackages.table.tooltips.editPackage')}
         sx={{ color: theme => theme.palette.text.primary }}
         onClick={() =>
           navigate(packagePathWithSearchParams, { state: { editAction: true } })
@@ -287,9 +292,16 @@ export const TogglePackage = ({
   );
   const disabledIcon = (
     <Box component="span" display="inline-flex">
-      <IconButton size="small" disabled>
-        {isPackageEnabled ? <Switch checked disabled /> : <Switch disabled />}
-      </IconButton>
+      <Switch
+        size="small"
+        checked={isPackageEnabled}
+        disabled
+        inputProps={{
+          'aria-label': isPackageEnabled
+            ? t('installedPackages.table.tooltips.disablePackage')
+            : t('installedPackages.table.tooltips.enablePackage'),
+        }}
+      />
     </Box>
   );
 
@@ -388,13 +400,16 @@ export const TogglePackage = ({
           : t('installedPackages.table.tooltips.enablePackage')
       }
     >
-      <IconButton
+      <Switch
         size="small"
-        sx={{ color: theme => theme.palette.text.primary }}
-        onClick={handleToggle}
-      >
-        {isPackageEnabled ? <Switch checked /> : <Switch />}
-      </IconButton>
+        checked={isPackageEnabled}
+        onChange={handleToggle}
+        inputProps={{
+          'aria-label': isPackageEnabled
+            ? t('installedPackages.table.tooltips.disablePackage')
+            : t('installedPackages.table.tooltips.enablePackage'),
+        }}
+      />
     </Tooltip>
   );
 };
@@ -410,13 +425,16 @@ export const UninstallPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
             : t('tooltips.missingDynamicArtifact' as any, { type: 'package' })
         }
       >
-        <IconButton
-          size="small"
-          disabled
-          sx={{ color: theme => theme.palette.action.disabled }}
-        >
-          <DeleteIcon />
-        </IconButton>
+        <Box component="span" display="inline-flex">
+          <IconButton
+            size="small"
+            disabled
+            aria-label={t('button.uninstall')}
+            sx={{ color: theme => theme.palette.action.disabled }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </Box>
       </Tooltip>
     );
   }
@@ -424,6 +442,7 @@ export const UninstallPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
   return (
     <IconButton
       size="small"
+      aria-label={t('button.uninstall')}
       sx={{ color: theme => theme.palette.text.primary }}
       onClick={() => {}}
     >
diff --git a/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx b/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx
index 57b546f931..a5cbc1605e 100644
--- a/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx
@@ -140,12 +140,26 @@ export const PluginCard = ({ plugin }: { plugin: ExtensionsPlugin }) => {
 
   return (
     <Card
+      component="article"
       variant="outlined"
+      role="link"
+      tabIndex={0}
+      aria-label={plugin.metadata.title ?? plugin.metadata.name}
       sx={{
         position: 'relative',
-        '&:hover': { backgroundColor: 'background.default', cursor: 'pointer' },
+        '&:hover, &:focus-visible': {
+          backgroundColor: 'background.default',
+          cursor: 'pointer',
+          outline: theme => `2px solid ${theme.palette.primary.main}`,
+        },
       }}
       onClick={() => navigate(pluginPath)}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          navigate(pluginPath);
+        }
+      }}
     >
       <BadgeTriange plugin={plugin} />
       <CardContent sx={{ backgroundColor: 'transparent' }}>
diff --git a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx
index b088b36693..18cff6c8ad 100644
--- a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx
@@ -38,20 +38,24 @@ const testPlugin: ExtensionsPlugin = {
 describe('PluginIcon', () => {
   it('should render without error', () => {
     const { getByRole } = render(<PluginIcon plugin={testPlugin} size={40} />);
-    expect(getByRole('img')).toBeInTheDocument();
-    expect(getByRole('img').style.backgroundImage).toEqual(
+    const img = getByRole('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('aria-label', 'APIs with Test plugin');
+    expect(img.style.backgroundImage).toEqual(
       'url("https://backstage.io/icons/test-plugin.png")',
     );
   });
 
-  it('should render no image when icon is missing', () => {
+  it('should render fallback icon when icon is missing', () => {
     const testPluginWithoutIcon = {
       ...testPlugin,
       spec: { ...testPlugin.spec, icon: undefined },
     };
-    const { queryAllByRole } = render(
+    const { getByRole } = render(
       <PluginIcon plugin={testPluginWithoutIcon} size={40} />,
     );
-    expect(queryAllByRole('img')).toHaveLength(0);
+    const img = getByRole('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('aria-label', 'APIs with Test plugin');
   });
 });
diff --git a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx
index b8ced5793b..d4ac88e11d 100644
--- a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx
@@ -28,9 +28,13 @@ export const PluginIcon = ({
 }) => {
   const icon = plugin?.spec?.icon;
 
+  const title = plugin?.metadata?.title ?? plugin?.metadata?.name ?? '';
+
   if (!icon) {
     return (
       <CardMedia
+        role="img"
+        aria-label={title}
         sx={{
           width: size,
           height: size,
@@ -39,6 +43,7 @@ export const PluginIcon = ({
         }}
       >
         <NoIconIcon
+          aria-hidden="true"
           sx={{
             width: size,
             height: size,
@@ -52,6 +57,8 @@ export const PluginIcon = ({
 
   return (
     <CardMedia
+      role="img"
+      aria-label={title}
       image={icon}
       sx={{
         width: size,
diff --git a/workspaces/extensions/plugins/extensions/src/components/TabPanel.tsx b/workspaces/extensions/plugins/extensions/src/components/TabPanel.tsx
index 508b778424..421b30dae2 100644
--- a/workspaces/extensions/plugins/extensions/src/components/TabPanel.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/TabPanel.tsx
@@ -78,6 +78,8 @@ export const TabPanel = ({
   return (
     <Box
       role="tabpanel"
+      id={`tabpanel-${index}`}
+      aria-labelledby={`tab-${index}`}
       sx={{ flex: 1, overflow: 'auto', p: 2, scrollbarWidth: 'thin' }}
     >
       <Typography component="div">
@@ -88,24 +90,26 @@ export const TabPanel = ({
               <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1 }}>
                 {Object.keys(item)[0]}
               </Typography>
-              {item?.[Object.keys(item)[0]]?.map?.(ex => (
-                <>
-                  <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 1 }}>
-                    {ex.title}
-                    {ex.content !== 'string' && (
-                      <Button
-                        sx={{ float: 'right' }}
-                        onClick={() =>
-                          handleApplyContent(ex.content, Object.keys(item)[0])
-                        }
-                      >
-                        {t('common.apply')}
-                      </Button>
-                    )}
-                  </Typography>
-                  <Markdown content={getExampleAsMarkdown(ex.content)} />
-                </>
-              ))}
+              {item?.[Object.keys(item)[0]]?.map?.(
+                (ex: { title: string; content: string }, exIdx: number) => (
+                  <Box key={exIdx}>
+                    <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 1 }}>
+                      {ex.title}
+                      {ex.content !== 'string' && (
+                        <Button
+                          sx={{ float: 'right' }}
+                          onClick={() =>
+                            handleApplyContent(ex.content, Object.keys(item)[0])
+                          }
+                        >
+                          {t('common.apply')}
+                        </Button>
+                      )}
+                    </Typography>
+                    <Markdown content={getExampleAsMarkdown(ex.content)} />
+                  </Box>
+                ),
+              )}
             </Box>
           ))
         ) : (