fix(core/workflow): handle space/enter interactivity and add proper a11y semantics - #2647
fix(core/workflow): handle space/enter interactivity and add proper a11y semantics#2647lakshmi-priya-b wants to merge 3 commits into
Conversation
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughWorkflow steps now handle Enter and Space selection on the interactive step element, expose updated ARIA and tab semantics, use theme-based focus styling, and include accessibility and keyboard regression tests. ChangesWorkflow step accessibility
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant InteractiveStep
participant WorkflowStep
User->>InteractiveStep: Press Enter or Space
InteractiveStep->>WorkflowStep: Trigger onKeyDown
WorkflowStep->>WorkflowStep: Prevent default and call onStepClick
WorkflowStep-->>InteractiveStep: Apply selected state
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces accessibility and keyboard navigation improvements to the workflow step components, including ARIA roles, dynamic labels, and support for Space and Enter key selection, backed by new component tests. The review feedback highlights a critical bug in getStepLabel where the aria-label is repeatedly appended with the status on subsequent renders, suggesting a caching mechanism. Additionally, the feedback notes a missing changeset for these user-facing accessibility changes and recommends exposing a customizable prop for the 'Step indicator' label instead of hardcoding it.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/workflow-step/workflow-step.tsx`:
- Around line 188-196: Update the role attribute in the workflow-step render
logic to use JavaScript undefined when this.clickable is false, so the role
attribute is omitted; preserve role="button" for clickable steps and follow the
existing aria-disabled and aria-current pattern.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 0fe542b7-9673-455e-8555-49b5685a938c
📒 Files selected for processing (3)
packages/core/src/components/workflow-step/workflow-step.scsspackages/core/src/components/workflow-step/workflow-step.tsxpackages/core/src/components/workflow-steps/test/workflow-steps.ct.ts
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/core/src/components/workflow-step/workflow-step.tsx (3)
188-196: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd a changeset for this consumer-visible behavior change.
This PR changes keyboard activation, focusability, and ARIA semantics of
ix-workflow-step. These changes are user-facing and consumer-relevant.Add a changeset for the affected package. If the change is internal-only, document that justification explicitly.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/workflow-step/workflow-step.tsx` around lines 188 - 196, Add a changeset for the package containing ix-workflow-step, documenting the consumer-visible keyboard activation, focusability, and ARIA semantics changes with the appropriate release impact. Do not classify this as internal-only unless the changeset explicitly justifies that classification.Source: Path instructions
188-196: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd Storybook coverage for
workflow-stepinteraction states.No Storybook story exists for
workflow-step. Cover the new focus states, disabled semantics, and keyboard activation.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/workflow-step/workflow-step.tsx` around lines 188 - 196, Add Storybook coverage for the workflow-step component, using its existing story/component conventions. Include stories or controls demonstrating focused and selected states, disabled semantics, clickable versus non-clickable behavior, and keyboard activation through the onKeyDown interaction.Source: Path instructions
141-146: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winReturn before suppressing activation keys on non-interactive steps.
tabIndex="-1"allows programmatic focus, butonKeyDown()suppresses Space and Enter for disabled or non-clickable steps without selecting them. Return fromdisabledor!clickablestates before callingpreventDefault().Proposed fix
onKeyDown(event: KeyboardEvent) { + if (this.disabled || !this.clickable) { + return; + } if (event.key === ' ' || event.key === 'Enter') { event.preventDefault(); this.onStepClick(); } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/workflow-step/workflow-step.tsx` around lines 141 - 146, Update onKeyDown in the workflow step component to return immediately when the step is disabled or not clickable, before handling Space or Enter and calling preventDefault(). Preserve activation behavior for interactive steps.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/workflow-step/workflow-step.tsx`:
- Around line 188-196: Add a changeset for the package containing
ix-workflow-step, documenting the consumer-visible keyboard activation,
focusability, and ARIA semantics changes with the appropriate release impact. Do
not classify this as internal-only unless the changeset explicitly justifies
that classification.
- Around line 188-196: Add Storybook coverage for the workflow-step component,
using its existing story/component conventions. Include stories or controls
demonstrating focused and selected states, disabled semantics, clickable versus
non-clickable behavior, and keyboard activation through the onKeyDown
interaction.
- Around line 141-146: Update onKeyDown in the workflow step component to return
immediately when the step is disabled or not clickable, before handling Space or
Enter and calling preventDefault(). Preserve activation behavior for interactive
steps.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 8fc14b46-dc63-443c-ba0f-c2699c4b03b6
📒 Files selected for processing (1)
packages/core/src/components/workflow-step/workflow-step.tsx
1 participant
💡 What is the current behavior?
JIRA : [IX-4340]
🆕 What is the new behavior?
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support
Summary by CodeRabbit
Accessibility Improvements
Bug Fixes
Tests