redhat-developer · its-mitesh-kumar · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026
@@ -0,0 +1,9 @@
+---
+'@red-hat-developer-hub/backstage-plugin-quickstart': patch
+---
+
+Fixed WCAG 2.1 AA accessibility violations:
+
+- Added accessible name to progress bar
+- Fixed invalid list structure (ul containing div elements)
+- Resolved nested interactive controls issue
@@ -17,6 +17,7 @@ export const quickstartTranslationRef: TranslationRef<
     readonly 'footer.progress': string;
     readonly 'footer.hide': string;
     readonly 'footer.notStarted': string;
+    readonly 'footer.progressBarLabel': string;
     readonly 'header.title': string;
     readonly 'header.subtitle': string;
     readonly 'content.emptyState.title': string;

@@ -103,6 +103,7 @@ export const quickstartTranslationRef: TranslationRef<
     readonly 'footer.progress': string;
     readonly 'footer.hide': string;
     readonly 'footer.notStarted': string;
+    readonly 'footer.progressBarLabel': string;
     readonly 'header.title': string;
     readonly 'header.subtitle': string;
     readonly 'content.emptyState.title': string;

@@ -103,7 +103,7 @@ describe('Quickstart', () => {
 
       // Complete first admin item
       const expandButtons = screen.getAllByRole('button', {
-        name: /expand item/i,
+        name: /expand.*details/i,
       });
       fireEvent.click(expandButtons[0]);
 
@@ -131,7 +131,7 @@ describe('Quickstart', () => {
 
       // Complete first developer item
       const expandButtons = screen.getAllByRole('button', {
-        name: /expand item/i,
+        name: /expand.*details/i,
       });
       fireEvent.click(expandButtons[0]);
 

@@ -117,10 +117,10 @@ describe('QuickstartContent', () => {
     );
 
     const expandIcon1 = screen.getAllByRole('button', {
-      name: /expand item/i,
+      name: /expand.*details/i,
     })[0];
     const expandIcon2 = screen.getAllByRole('button', {
-      name: /expand item/i,
+      name: /expand.*details/i,
     })[1];
 
     fireEvent.click(expandIcon1);

@@ -77,10 +77,10 @@ describe('QuickstartItem)', () => {
     ).toBeInTheDocument();
   });
 
-  it('calls handleOpen when expand/collapse icon is clicked', async () => {
+  it('calls handleOpen when expand/collapse item is clicked', async () => {
     await renderItem(false);
     const toggleBtn = screen.getByRole('button', {
-      name: /expand item/i,
+      name: /expand.*details/i,
     });
     fireEvent.click(toggleBtn);
     expect(mockHandleOpen).toHaveBeenCalled();

@@ -67,7 +67,10 @@ export const QuickstartItem = ({
   }, [stepCompleted, setProgress]);
 
   return (
-    <Box sx={{ marginBottom: theme => `${theme.spacing(0.2)}` }}>
+    <Box
+      component="li"
+      sx={{ marginBottom: theme => `${theme.spacing(0.2)}`, listStyle: 'none' }}
+    >
       <ListItem
         key={itemKey}
         onClick={handleOpen}
@@ -122,11 +125,8 @@ export const QuickstartItem = ({
           }}
         />
         <IconButton
-          aria-label={
-            open
-              ? t('item.collapseButtonAriaLabel')
-              : t('item.expandButtonAriaLabel')
-          }
+          aria-hidden="true"
+          tabIndex={-1}
           sx={{
             ...(open
               ? { color: theme => theme.palette.text.primary }

@@ -33,7 +33,11 @@ export const QuickstartFooter = ({
 
   return (
     <Box>
-      <LinearProgress variant="determinate" value={progress} />
+      <LinearProgress
+        variant="determinate"
+        value={progress}
+        aria-label={t('footer.progressBarLabel')}
+      />
       <Box
         sx={{
           display: 'flex',

@@ -61,6 +61,7 @@ const quickstartTranslationDe = createTranslationMessages({
     'footer.progress': '{{progress}}% Fortschritt',
     'footer.notStarted': 'Nicht begonnen',
     'footer.hide': 'Ausblenden',
+    'footer.progressBarLabel': 'Schnellstart-Fortschritt',
     'content.emptyState.title':
       'Schnellstart-Inhalte sind für Ihre Rolle nicht verfügbar.',
     'item.expandAriaLabel': '{{title}} Details erweitern',

@@ -61,6 +61,7 @@ const quickstartTranslationEs = createTranslationMessages({
     'footer.progress': '{{progress}}% de progreso',
     'footer.notStarted': 'No iniciado',
     'footer.hide': 'Ocultar',
+    'footer.progressBarLabel': 'Progreso de inicio rápido',
     'content.emptyState.title':
       'El contenido de inicio rápido no está disponible para tu rol.',
     'item.expandAriaLabel': 'Expandir detalles de {{title}}',

@@ -66,6 +66,7 @@ const quickstartTranslationFr = createTranslationMessages({
     'footer.progress': '{{progress}}% de progrès',
     'footer.notStarted': 'Non démarré',
     'footer.hide': 'Cacher',
+    'footer.progressBarLabel': 'Progression du démarrage rapide',
     'content.emptyState.title':
       "Le contenu de démarrage rapide n'est pas disponible pour votre rôle.",
     'item.expandAriaLabel': 'Développer les détails de {{title}}',

@@ -68,6 +68,7 @@ const quickstartTranslationIt = createTranslationMessages({
     'footer.progress': '{{progress}}% di avanzamento',
     'footer.notStarted': 'Non iniziato',
     'footer.hide': 'Nascondi',
+    'footer.progressBarLabel': "Avanzamento dell'avvio rapido",
     'content.emptyState.title':
       'Contenuto di avvio rapido non disponibile per il ruolo utente.',
     'item.expandAriaLabel': 'Espandi i dettagli di {{title}}',

@@ -66,6 +66,7 @@ const quickstartTranslationJa = createTranslationMessages({
     'footer.progress': '進捗 {{progress}}%',
     'footer.notStarted': '開始されていません',
     'footer.hide': '非表示',
+    'footer.progressBarLabel': 'クイックスタートの進捗',
     'content.emptyState.title':
       '現在のロールではクイックスタートコンテンツを利用できません。',
     'item.expandAriaLabel': '{{title}} の詳細を展開',

@@ -86,6 +86,7 @@ export const quickstartMessages = {
     progress: '{{progress}}% progress',
     notStarted: 'Not started',
     hide: 'Hide',
+    progressBarLabel: 'Quickstart progress',
   },
   content: {
     emptyState: {