fix(#3587): remove a11y violation filter and fix list violation

workspaces/homepage/e2e-tests/utils/accessibility.ts

@@ -17,21 +17,6 @@
 import AxeBuilder from '@axe-core/playwright';
 import { expect, Page, TestInfo } from '@playwright/test';
 
-/**
- * Rule IDs to ignore when APP_MODE is 'nfs'. Used for known issues in the NFS
- * app (e.g. list structure in third-party or shared components).
- */
-const NFS_IGNORED_VIOLATION_IDS = ['list'];
-
-function getFilteredViolations(
-  violations: Awaited<ReturnType<AxeBuilder['analyze']>>['violations'],
-): Awaited<ReturnType<AxeBuilder['analyze']>>['violations'] {
-  if (process.env.APP_MODE !== 'nfs') {
-    return violations;
-  }
-  return violations.filter(v => !NFS_IGNORED_VIOLATION_IDS.includes(v.id));
-}
-
 export async function runAccessibilityTests(
   page: Page,
   testInfo: TestInfo,
@@ -46,8 +31,8 @@ export async function runAccessibilityTests(
     contentType: 'application/json',
   });
 
-  const violationsToAssert = getFilteredViolations(
+  expect(
     accessibilityScanResults.violations,
-  );
-  expect(violationsToAssert, 'Accessibility violations found').toEqual([]);
+    'Accessibility violations found',
+  ).toEqual([]);
 }

workspaces/homepage/plugins/homepage/report-alpha.api.md

@@ -14,30 +14,30 @@ export const homePageModule: FrontendModule;
 export const homepageTranslationRef: TranslationRef<
   'plugin.homepage',
   {
-    readonly 'header.local': string;
     readonly 'header.welcome': string;
     readonly 'header.welcomePersonalized': string;
-    readonly 'search.placeholder': string;
+    readonly 'header.local': string;
     readonly 'homePage.empty': string;
+    readonly 'search.placeholder': string;
     readonly 'quickAccess.title': string;
-    readonly 'quickAccess.error': string;
     readonly 'quickAccess.fetchError': string;
+    readonly 'quickAccess.error': string;
     readonly 'featuredDocs.title': string;
     readonly 'featuredDocs.learnMore': string;
     readonly 'starredEntities.title': string;
     readonly 'recentlyVisited.title': string;
     readonly 'topVisited.title': string;
-    readonly 'templates.title': string;
-    readonly 'templates.error': string;
     readonly 'templates.empty': string;
+    readonly 'templates.title': string;
     readonly 'templates.fetchError': string;
+    readonly 'templates.error': string;
     readonly 'templates.emptyDescription': string;
     readonly 'templates.register': string;
     readonly 'templates.viewAll': string;
-    readonly 'onboarding.guest': string;
     readonly 'onboarding.greeting.goodMorning': string;
     readonly 'onboarding.greeting.goodAfternoon': string;
     readonly 'onboarding.greeting.goodEvening': string;
+    readonly 'onboarding.guest': string;
     readonly 'onboarding.getStarted.title': string;
     readonly 'onboarding.getStarted.description': string;
     readonly 'onboarding.getStarted.buttonText': string;
@@ -50,11 +50,11 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'onboarding.learn.description': string;
     readonly 'onboarding.learn.buttonText': string;
     readonly 'onboarding.learn.ariaLabel': string;
-    readonly 'entities.title': string;
-    readonly 'entities.error': string;
     readonly 'entities.close': string;
     readonly 'entities.empty': string;
+    readonly 'entities.title': string;
     readonly 'entities.fetchError': string;
+    readonly 'entities.error': string;
     readonly 'entities.emptyDescription': string;
     readonly 'entities.register': string;
     readonly 'entities.description': string;

workspaces/homepage/plugins/homepage/src/components/QuickAccessCard.tsx

@@ -15,24 +15,113 @@
  */
 
 import type { ReactNode } from 'react';
+import { useState } from 'react';
 
-import { CodeSnippet, WarningPanel } from '@backstage/core-components';
-import { ComponentAccordion, HomePageToolkit } from '@backstage/plugin-home';
+import { CodeSnippet, Link, WarningPanel } from '@backstage/core-components';
 
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { useQuickAccessLinks } from '../hooks/useQuickAccessLinks';
 import { useTranslation } from '../hooks/useTranslation';
 import { QuickAccessIcon } from './QuickAccessIcon';
 
+import type { Tool } from '@backstage/plugin-home';
+
 /** @public */
 export interface QuickAccessCardProps {
   title?: string;
   titleKey?: string;
   path?: string;
 }
 
+/**
+ * Accessible toolkit grid that renders tools inside a proper `<ul>/<li>`
+ * structure. Replaces the upstream `HomePageToolkit` which places `<a>`
+ * elements directly inside `<ul>`, violating the axe `list` rule.
+ */
+const QuickAccessToolkit = ({
+  title,
+  tools,
+  expanded = false,
+}: {
+  title: string;
+  tools: Tool[];
+  expanded?: boolean;
+}) => {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+
+  return (
+    <Accordion
+      expanded={isExpanded}
+      onChange={(_e, expandedValue) => setIsExpanded(expandedValue)}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>{title}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <List
+          sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            textAlign: 'center',
+            padding: 0,
+          }}
+        >
+          {tools.map(tool => (
+            <ListItem
+              key={tool.url}
+              sx={{ width: 'auto', padding: 0, margin: 0.5 }}
+            >
+              <Link
+                to={tool.url}
+                style={{ textDecoration: 'none' }}
+                aria-label={tool.label}
+              >
+                <ListItemIcon
+                  sx={{
+                    width: '64px',
+                    height: '64px',
+                    borderRadius: '50px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    boxShadow: 1,
+                    bgcolor: 'background.default',
+                  }}
+                >
+                  {tool.icon}
+                </ListItemIcon>
+                <ListItemText
+                  secondaryTypographyProps={{
+                    sx: {
+                      mt: 1,
+                      width: '72px',
+                      fontSize: '0.9em',
+                      lineHeight: '1.25',
+                      overflowWrap: 'break-word',
+                      color: 'text.secondary',
+                    },
+                  }}
+                  secondary={tool.label}
+                />
+              </Link>
+            </ListItem>
+          ))}
+        </List>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
 /** @public */
 export const QuickAccessCardContent = ({
   path,
@@ -68,18 +157,14 @@ export const QuickAccessCardContent = ({
     content = (
       <>
         {data.map(item => (
-          <HomePageToolkit
+          <QuickAccessToolkit
             key={item.title}
             title={item.title}
+            expanded={item.isExpanded}
             tools={item.links.map(link => ({
               ...link,
               icon: <QuickAccessIcon icon={link.iconUrl} alt={link.label} />,
             }))}
-            Renderer={(
-              renderProps, // NOSONAR
-            ) => (
-              <ComponentAccordion expanded={item.isExpanded} {...renderProps} />
-            )}
           />
         ))}
       </>