From bafa9396e087b4d948cf33abef9237cdc16b2d20 Mon Sep 17 00:00:00 2001 From: fullsend-code <278716306+fullsend-ai-coder[bot]@users.noreply.github.com> Date: Thu, 25 Jun 2026 19:43:50 +0000 Subject: [PATCH] fix(#3589): enable a11y assertions and fix violations Remove the skipViolationsAssert option from runAccessibilityTests and its callers so that axe-core accessibility violations are always asserted in e2e tests. Fix the identified accessibility violations: - Replace nested IconButton inside ListItem[role="button"] with a non-interactive Box to eliminate the nested-interactive violation - Add aria-label to LinearProgress in QuickstartFooter for screen reader accessibility - Add progressBarAriaLabel translation key to all locale files (en, de, es, fr, it, ja) Update unit tests to find expand/collapse controls by the ListItem's aria-label pattern instead of the removed IconButton. Closes #3589 --- .../e2e-tests/quick-start-admin-guest.spec.ts | 3 --- .../e2e-tests/quick-start-developer.spec.ts | 1 - .../quickstart/e2e-tests/utils/accessibility.ts | 13 ++++--------- .../quickstart/src/components/Quickstart.test.tsx | 4 ++-- .../QuickstartContent/QuickstartContent.test.tsx | 4 ++-- .../QuickstartContent/QuickstartItem.test.tsx | 4 ++-- .../QuickstartContent/QuickstartItem.tsx | 15 +++++++-------- .../src/components/QuickstartFooter.tsx | 6 +++++- .../plugins/quickstart/src/translations/de.ts | 1 + .../plugins/quickstart/src/translations/es.ts | 1 + .../plugins/quickstart/src/translations/fr.ts | 1 + .../plugins/quickstart/src/translations/it.ts | 1 + .../plugins/quickstart/src/translations/ja.ts | 1 + .../plugins/quickstart/src/translations/ref.ts | 1 + 14 files changed, 28 insertions(+), 28 deletions(-) diff --git a/workspaces/quickstart/e2e-tests/quick-start-admin-guest.spec.ts b/workspaces/quickstart/e2e-tests/quick-start-admin-guest.spec.ts index f0b3746dfd..a78799c0c3 100644 --- a/workspaces/quickstart/e2e-tests/quick-start-admin-guest.spec.ts +++ b/workspaces/quickstart/e2e-tests/quick-start-admin-guest.spec.ts @@ -51,9 +51,6 @@ test.describe('Test Quick Start plugin', () => { page, testInfo, 'quick-start-accessibility.json', - { - skipViolationsAssert: true, - }, ); // Click and verify setupAuthentication step diff --git a/workspaces/quickstart/e2e-tests/quick-start-developer.spec.ts b/workspaces/quickstart/e2e-tests/quick-start-developer.spec.ts index d69e58ae16..b61df05384 100644 --- a/workspaces/quickstart/e2e-tests/quick-start-developer.spec.ts +++ b/workspaces/quickstart/e2e-tests/quick-start-developer.spec.ts @@ -109,7 +109,6 @@ test.describe('Test Quick Start plugin', () => { page, testInfo, 'quick-start-user-accessibility.json', - { skipViolationsAssert: true }, ); await uiHelper.verifyText(translations.header.subtitle); diff --git a/workspaces/quickstart/e2e-tests/utils/accessibility.ts b/workspaces/quickstart/e2e-tests/utils/accessibility.ts index 4854d7f9e3..f4ccda5496 100644 --- a/workspaces/quickstart/e2e-tests/utils/accessibility.ts +++ b/workspaces/quickstart/e2e-tests/utils/accessibility.ts @@ -20,9 +20,6 @@ export async function runAccessibilityTests( page: Page, testInfo: TestInfo, attachName = 'accessibility-scan-results.json', - options: { skipViolationsAssert?: boolean; attachName?: string } = { - skipViolationsAssert: false, - }, ) { const accessibilityScanResults = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) @@ -33,10 +30,8 @@ export async function runAccessibilityTests( contentType: 'application/json', }); - if (!options?.skipViolationsAssert) { - expect( - accessibilityScanResults.violations, - 'Accessibility violations found', - ).toEqual([]); - } + expect( + accessibilityScanResults.violations, + 'Accessibility violations found', + ).toEqual([]); } diff --git a/workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx b/workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx index 24aee88563..81209d292a 100644 --- a/workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx +++ b/workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx @@ -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]); diff --git a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartContent.test.tsx b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartContent.test.tsx index b0b26c4c1d..01d25baafb 100644 --- a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartContent.test.tsx +++ b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartContent.test.tsx @@ -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); diff --git a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.test.tsx b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.test.tsx index f2bdfd65ec..034400c887 100644 --- a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.test.tsx +++ b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.test.tsx @@ -77,10 +77,10 @@ describe('QuickstartItem)', () => { ).toBeInTheDocument(); }); - it('calls handleOpen when expand/collapse icon is clicked', async () => { + it('calls handleOpen when the item row is clicked', async () => { await renderItem(false); const toggleBtn = screen.getByRole('button', { - name: /expand item/i, + name: /expand test step details/i, }); fireEvent.click(toggleBtn); expect(mockHandleOpen).toHaveBeenCalled(); diff --git a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx index bbb031625e..e8b87b1667 100644 --- a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx +++ b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx @@ -25,7 +25,6 @@ import ListItemText from '@mui/material/ListItemText'; import { useEffect, useState } from 'react'; import { QuickstartItemIcon } from './QuickstartItemIcon'; import { QuickstartCtaLink } from './QuickstartCtaLink'; -import IconButton from '@mui/material/IconButton'; import { QuickstartItemData } from '../../types'; import { useTranslation } from '../../hooks/useTranslation'; import { getTranslatedTextWithFallback } from '../../utils'; @@ -121,20 +120,20 @@ export const QuickstartItem = ({ : { color: theme => theme.palette.text.secondary }), }} /> - + - +