Skip to content

fix(a11y): render workspace progress steps as spans instead of buttons #1623

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
olexii4 merged 1 commit into from
Jul 7, 2026
Merged

fix(a11y): render workspace progress steps as spans instead of buttons #1623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions packages/dashboard-frontend/src/__tests__/workspaceCreationTimeCheck.check.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,16 +196,16 @@ describe('Workspace creation time', () => {
);

// step 1: Initializing
const stepInitializing = screen.getByRole('button', { name: 'Initializing' });
const stepInitializing = screen.getByText('Initializing').closest('.pf-v6-c-wizard__nav-link');
expect(stepInitializing).toBeInTheDocument();
await waitFor(() => expect(stepInitializing).toHaveAttribute('aria-current', 'step'), {
timeout: 5000,
});

// step 2: Checking for the limit of running workspaces
const stepCheckingForLimit = screen.getByRole('button', {
name: 'Checking for the limit of running workspaces',
});
const stepCheckingForLimit = screen
.getByText('Checking for the limit of running workspaces')
.closest('.pf-v6-c-wizard__nav-link');
expect(stepCheckingForLimit).toBeInTheDocument();
await waitFor(() => expect(stepCheckingForLimit).toHaveAttribute('aria-current', 'step'), {
timeout: 5000,
Expand All @@ -215,18 +215,16 @@ describe('Workspace creation time', () => {
// skipping because it is never activated, but it's substeps are

// step 4: Waiting for workspace to start
const stepStartingWorkspace = screen.getByRole('button', {
name: 'Waiting for workspace to start',
});
const stepStartingWorkspace = screen
.getByText('Waiting for workspace to start')
.closest('.pf-v6-c-wizard__nav-link');
expect(stepStartingWorkspace).toBeInTheDocument();
await waitFor(() => expect(stepStartingWorkspace).toHaveAttribute('aria-current', 'step'), {
timeout: 5000,
});

// step 5: Open IDE
const stepOpenIde = screen.getByRole('button', {
name: 'Open IDE',
});
const stepOpenIde = screen.getByText('Open IDE').closest('.pf-v6-c-wizard__nav-link');
expect(stepOpenIde).toBeInTheDocument();
await waitFor(() => expect(stepOpenIde).toHaveAttribute('aria-current', 'step'), {
timeout: 5000,
Expand Down
65 changes: 12 additions & 53 deletions ...ntend/src/components/WorkspaceProgress/Wizard/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,125 +15,84 @@ exports[`WorkspaceProgressWizard component snapshot 1`] = `
<li
className="pf-v6-c-wizard__nav-item"
>
<button
aria-current={false}
aria-disabled={null}
<span
className="pf-v6-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
data-ouia-component-type="PF6/WizardNavItem"
data-ouia-safe={true}
disabled={false}
onClick={[Function]}
>
<span
className="pf-v6-c-wizard__nav-link-main"
>
initialize
</span>
</button>
</span>
</li>
<li
className="pf-v6-c-wizard__nav-item"
>
<button
<span
aria-current="step"
aria-disabled={null}
className="pf-v6-c-wizard__nav-link pf-m-current"
data-ouia-component-id="OUIA-Generated-WizardNavItem-2"
data-ouia-component-type="PF6/WizardNavItem"
data-ouia-safe={true}
disabled={false}
onClick={[Function]}
>
<span
className="pf-v6-c-wizard__nav-link-main"
>
limit-check
</span>
</button>
</span>
</li>
<li
className="pf-v6-c-wizard__nav-item"
>
<button
aria-current={false}
aria-disabled={null}
<span
className="pf-v6-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-3"
data-ouia-component-type="PF6/WizardNavItem"
data-ouia-safe={true}
disabled={false}
onClick={[Function]}
>
<span
className="pf-v6-c-wizard__nav-link-main"
>
create
</span>
</button>
</span>
<ol
className="pf-v6-c-wizard__nav-list"
role="list"
>
<li
className="pf-v6-c-wizard__nav-item"
>
<button
aria-current={false}
aria-disabled={true}
<span
className="pf-v6-c-wizard__nav-link pf-m-disabled"
data-ouia-component-id="OUIA-Generated-WizardNavItem-4"
data-ouia-component-type="PF6/WizardNavItem"
data-ouia-safe={true}
disabled={true}
onClick={[Function]}
>
<span
className="pf-v6-c-wizard__nav-link-main"
>
fetch
</span>
</button>
</span>
</li>
<li
className="pf-v6-c-wizard__nav-item"
>
<button
aria-current={false}
aria-disabled={true}
<span
className="pf-v6-c-wizard__nav-link pf-m-disabled"
data-ouia-component-id="OUIA-Generated-WizardNavItem-5"
data-ouia-component-type="PF6/WizardNavItem"
data-ouia-safe={true}
disabled={true}
onClick={[Function]}
>
<span
className="pf-v6-c-wizard__nav-link-main"
>
conflict-check
</span>
</button>
</span>
</li>
<li
className="pf-v6-c-wizard__nav-item"
>
<button
aria-current={false}
aria-disabled={true}
<span
className="pf-v6-c-wizard__nav-link pf-m-disabled"
data-ouia-component-id="OUIA-Generated-WizardNavItem-6"
data-ouia-component-type="PF6/WizardNavItem"
data-ouia-safe={true}
disabled={true}
onClick={[Function]}
>
<span
className="pf-v6-c-wizard__nav-link-main"
>
apply
</span>
</button>
</span>
</li>
</ol>
</li>
Expand Down
21 changes: 12 additions & 9 deletions packages/dashboard-frontend/src/components/WorkspaceProgress/Wizard/__tests__/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
import React from 'react';

import { Step, StepId } from '@/components/WorkspaceProgress';
import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
import getComponentRenderer from '@/services/__mocks__/getComponentRenderer';

import WorkspaceProgressWizard, { WorkspaceProgressWizardStep } from '..';

Expand Down Expand Up @@ -79,24 +79,27 @@ describe('WorkspaceProgressWizard', () => {

const { reRenderComponent } = renderComponent(activeStepId, steps, ref);

const buttonInitialize = screen.getByRole('button', { name: Step.INITIALIZE });
const buttonLimitCheck = screen.getByRole('button', { name: Step.LIMIT_CHECK });
const navLinks = document.querySelectorAll('.pf-v6-c-wizard__nav-link');
const spanInitialize = navLinks[0];
const spanLimitCheck = navLinks[1];

expect(buttonInitialize.className.split(' ')).toEqual(expect.arrayContaining(['pf-m-current']));
expect(buttonLimitCheck.className.split(' ')).not.toEqual(
expect(spanInitialize.tagName.toLowerCase()).toBe('span');
expect(spanInitialize.className.split(' ')).toEqual(expect.arrayContaining(['pf-m-current']));
expect(spanLimitCheck.className.split(' ')).not.toEqual(
expect.arrayContaining(['pf-m-current']),
);

const nextActiveStepId = Step.LIMIT_CHECK;
reRenderComponent(nextActiveStepId, steps, ref);

const nextButtonInitialize = screen.getByRole('button', { name: Step.INITIALIZE });
const nextButtonLimitCheck = screen.getByRole('button', { name: Step.LIMIT_CHECK });
const nextNavLinks = document.querySelectorAll('.pf-v6-c-wizard__nav-link');
const nextSpanInitialize = nextNavLinks[0];
const nextSpanLimitCheck = nextNavLinks[1];

expect(nextButtonInitialize.className.split(' ')).not.toEqual(
expect(nextSpanInitialize.className.split(' ')).not.toEqual(
expect.arrayContaining(['pf-m-current']),
);
expect(nextButtonLimitCheck.className.split(' ')).toEqual(
expect(nextSpanLimitCheck.className.split(' ')).toEqual(
expect.arrayContaining(['pf-m-current']),
);
});
Expand Down
56 changes: 30 additions & 26 deletions packages/dashboard-frontend/src/components/WorkspaceProgress/Wizard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* Red Hat, Inc. - initial API and implementation
*/

import { WizardNav, WizardNavItem } from '@patternfly/react-core';
import { WizardNav } from '@patternfly/react-core';
import wizardStyles from '@patternfly/react-styles/css/components/Wizard/wizard';
import React from 'react';

Expand All @@ -34,11 +34,6 @@ export type Props = {
};

class WorkspaceProgressWizard extends React.Component<Props> {
private handleGoToStepById() {
console.warn('Not implemented: handleGoToStepById');
return false;
}

public goToNext(): void {
const flattenedSteps = this.flattenSteps(this.props.steps);
// find the index of the next after the current active step
Expand Down Expand Up @@ -91,53 +86,62 @@ class WorkspaceProgressWizard extends React.Component<Props> {
return flattenedSteps.findIndex(step => step.id === stepId) + 1;
}

private navLinkClassName(isCurrent: boolean, isDisabled: boolean): string {
return [
wizardStyles.wizardNavLink,
isCurrent ? wizardStyles.modifiers.current : '',
isDisabled ? wizardStyles.modifiers.disabled : '',
]
.filter(Boolean)
.join(' ');
}

private buildWizardNav(
activeStepId: StepId,
steps: WorkspaceProgressWizardStep[],
): React.ReactElement {
const stepsWithDefaults = this.setDefaultValues(steps);
const flattenedSteps = this.flattenSteps(stepsWithDefaults);

return (
<WizardNav aria-label="Workspace Progress Steps">
{stepsWithDefaults.map(step => {
const { canJumpTo, name, steps = [], id } = step;
const flattenedStepNumber = this.getFlattenedStepsNumber(flattenedSteps, id);

const hasChildren = steps.length !== 0;
const allChildrenFinished = steps.every(subStep => subStep.isFinishedStep);
const showChildren = hasChildren && allChildrenFinished === false;

const hasActiveChild = steps.some(subStep => subStep.id === activeStepId);
const isCurrent = activeStepId === id || hasActiveChild;

return (
<WizardNavItem
key={id}
content={name}
stepIndex={flattenedStepNumber}
isCurrent={activeStepId === id || hasActiveChild}
isDisabled={!canJumpTo}
onClick={() => this.handleGoToStepById()}
>
<li key={id} className={wizardStyles.wizardNavItem}>
<span
className={this.navLinkClassName(isCurrent, !canJumpTo)}
aria-current={isCurrent ? 'step' : undefined}
>
<span className={wizardStyles.wizardNavLinkMain}>{name}</span>
</span>
{showChildren && (
<WizardNav isInnerList>
{steps.map(subStep => {
const { canJumpTo, name, id } = subStep;
const flattenedStepNumber = this.getFlattenedStepsNumber(flattenedSteps, id);
const isSubCurrent = activeStepId === id;

return (
<WizardNavItem
key={id}
content={name}
stepIndex={flattenedStepNumber}
isCurrent={activeStepId === id}
isDisabled={!canJumpTo}
onClick={() => this.handleGoToStepById()}
/>
<li key={id} className={wizardStyles.wizardNavItem}>
<span
className={this.navLinkClassName(isSubCurrent, !canJumpTo)}
aria-current={isSubCurrent ? 'step' : undefined}
>
<span className={wizardStyles.wizardNavLinkMain}>{name}</span>
</span>
</li>
);
})}
</WizardNav>
)}
</WizardNavItem>
</li>
);
})}
</WizardNav>
Expand Down
Loading
Loading