diff --git a/workspaces/quickstart/.changeset/legal-times-remain.md b/workspaces/quickstart/.changeset/legal-times-remain.md new file mode 100644 index 0000000000..ec2ce32680 --- /dev/null +++ b/workspaces/quickstart/.changeset/legal-times-remain.md @@ -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 diff --git a/workspaces/quickstart/plugins/quickstart/report-alpha.api.md b/workspaces/quickstart/plugins/quickstart/report-alpha.api.md index a10a0017ab..8fb4da97de 100644 --- a/workspaces/quickstart/plugins/quickstart/report-alpha.api.md +++ b/workspaces/quickstart/plugins/quickstart/report-alpha.api.md @@ -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; diff --git a/workspaces/quickstart/plugins/quickstart/report.api.md b/workspaces/quickstart/plugins/quickstart/report.api.md index a19fdb202d..0925aaab16 100644 --- a/workspaces/quickstart/plugins/quickstart/report.api.md +++ b/workspaces/quickstart/plugins/quickstart/report.api.md @@ -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; diff --git a/workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx b/workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx index 24aee88563..fd2a97e4e4 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..94097c956c 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..c96b41513e 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 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(); diff --git a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx index bbb031625e..4e37350f13 100644 --- a/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx +++ b/workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx @@ -67,7 +67,10 @@ export const QuickstartItem = ({ }, [stepCompleted, setProgress]); return ( - `${theme.spacing(0.2)}` }}> + `${theme.spacing(0.2)}`, listStyle: 'none' }} + >