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

[olexii4]

What does this PR do?

Fixes workspace creation progress steps rendering as <button> elements instead of non-interactive labels.

PatternFly's WizardNavItem defaults to component="button", which is appropriate for navigable wizard steps but wrong for progress indicators that can't be clicked. The steps on the "Create Workspace" loader page (Initializing, Fetching devfile, etc.) are display-only — they already had pointer-events: none applied via CSS, but the underlying elements were still <button> with the associated role and class.

The fix replaces WizardNavItem with plain <li>/<span> elements that apply PatternFly's wizard nav CSS classes directly (pf-v6-c-wizard__nav-item, pf-v6-c-wizard__nav-link, pf-m-current, pf-m-disabled). The visual output is identical, but the elements are now semantically correct non-interactive labels.

Screenshot/screencast of this PR

What issues does this PR fix or reference?

fixes https://redhat.atlassian.net/browse/CRW-10924

Is it tested? How?

1. Deploy Eclipse Che with the dashboard image from this PR.
2. Open the "Create Workspace" page and click "Empty Workspace".
3. While the workspace initializes, right-click any step label (e.g. "Initializing") → Inspect. Verify the element is a <span>, not a <button>, and has no button role.
4. Verify the active step still shows the pf-m-current highlight and inactive steps are visually unchanged.

[che-bot]

Click here to review and test in web IDE:

[tolusha]

Hi! I'm che-ai-assistant — I help with your pull requests.

Available commands:

• /che-ai-assistant generate-che-doc — Generate a documentation PR based on this PR's changes
• /che-ai-assistant ok-pr-review — Run a comprehensive PR review (summary, code review, deep review, impact analysis)
• /che-ai-assistant check-pr-test-failures — Analyze failing CI checks, identify root causes, and suggest fixes
• /che-ai-assistant help — Show this help message

[github-actions]

Docker image build succeeded: quay.io/eclipse/che-dashboard:pr-1623 (linux/amd64, linux/arm64, linux/s390x)

kubectl patch command

kubectl patch -n eclipse-che "checluster/eclipse-che" --type=json -p="[{"op": "replace", "path": "/spec/components/dashboard/deployment", "value": {containers: [{image: "quay.io/eclipse/che-dashboard:pr-1623", name: che-dashboard}]}}]"

[github-actions]

Docker image build succeeded: quay.io/eclipse/che-dashboard:pr-1623 (linux/amd64, linux/arm64, linux/s390x)

kubectl patch command

kubectl patch -n eclipse-che "checluster/eclipse-che" --type=json -p="[{"op": "replace", "path": "/spec/components/dashboard/deployment", "value": {containers: [{image: "quay.io/eclipse/che-dashboard:pr-1623", name: che-dashboard}]}}]"

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.43%. Comparing base (9089260) to head (74d1daa).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1623      +/-   ##
==========================================
- Coverage   92.43%   92.43%   -0.01%     
==========================================
  Files         596      596              
  Lines       61158    61162       +4     
  Branches     4730     4733       +3     
==========================================
+ Hits        56530    56533       +3     
- Misses       4569     4570       +1     
  Partials       59       59              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[olexii4]

/che-ai-assistant ok-pr-review

Review is complete. Please check the review comments below.

[tolusha]

Review Summary

This is a clean, well-motivated accessibility fix that correctly addresses the semantic HTML issue. The PR replaces PatternFly's WizardNavItem (which renders interactive <button> elements) with plain <li>/<span> elements for display-only progress indicators.

Verdict: Approve with minor suggestions

OUIA test attributes removed - confirm with QE

The previous implementation rendered data-ouia-component-id and data-ouia-component-type attributes via WizardNavItem. If any automated UI testing framework (e.g., Cypress, Selenium suites, or OpenShift CI QE tests) depends on these OUIA selectors to locate wizard step elements, those tests will break.

Does it make sense to confirm with QE that no external tests rely on these attributes before merging?

Positive Feedback

• Excellent PR description with screenshot and manual testing steps
• Using @patternfly/react-styles CSS tokens rather than hardcoded class strings will track PatternFly updates automatically
• The navLinkClassName() helper is clean and avoids duplicating the class construction logic
• Removal of the no-op handleGoToStepById() method shows thoughtful curation
• The aria-current attribute correctly omits itself on non-current steps rather than rendering aria-current={false} - semantically better
• Overall the change is well-scoped, focused, and achieves the accessibility goal with minimal code

Review generated by Claude Code with ok-pr-review

[tolusha]

Additional code-specific feedback:

1. Wizard/index.tsx (substep rendering): Consider adding aria-disabled={!canJumpTo ? true : undefined} to the disabled substep spans for better screen reader support, maintaining parity with the previous WizardNavItem behavior.

2. Wizard/__tests__/index.spec.tsx:210: The test query using document.querySelectorAll('.pf-v6-c-wizard__nav-link') with positional indexing is fragile. Consider using test IDs or the getByText().closest() pattern used in workspaceCreationTimeCheck.check.tsx for better test resilience.

[olkornii]

Looks good for me with quay.io/eclipse/che-dashboard:pr-1623.

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: olexii4, olkornii

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment