fix(core/link-button): disabled link-button focus and screen reader behavior - #2662
fix(core/link-button): disabled link-button focus and screen reader behavior#2662lakshmi-priya-b wants to merge 4 commits into
Conversation
|
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough
ChangesLink button accessibility
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 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 updates the LinkButton component to dynamically manage aria-disabled and tabindex attributes based on its disabled state, and introduces a new component test suite (link-button.ct.ts) covering accessibility, rendering, and keyboard navigation. The feedback suggests optimizing the attribute values in link-button.tsx by using undefined instead of 'false' or 0 when enabled to prevent unnecessary DOM clutter and incorrect focus behavior. Additionally, it is recommended to expand the axe-based accessibility test to include the disabled state of the component to ensure comprehensive coverage.
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: 2
🤖 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/link-button/link-button.tsx`:
- Around line 43-44: Add a packages/core changeset documenting the
consumer-visible accessibility and keyboard behavior change in the
ix-link-button component, specifically the disabled state’s aria-disabled and
tabindex handling. Use the repository’s standard changeset format and select the
appropriate release type; do not alter the implementation unless needed to
reference the change accurately.
- Around line 43-44: Update the disabled state in the LinkButton component’s
anchor rendering to add role="link" when disabled removes href, preserving its
link semantics. In
packages/core/src/components/link-button/test/link-button.ct.ts lines 50-58,
update the disabled-item assertion to use getByRole('link', ...) instead of the
current selector.
🪄 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 Plus
Run ID: 7a825db7-1a69-4d40-9e93-af93cb4f9daa
📒 Files selected for processing (2)
packages/core/src/components/link-button/link-button.tsxpackages/core/src/components/link-button/test/link-button.ct.ts
|
1 participant
💡 What is the current behavior?
A disabled link button can still receive keyboard focus via Tab.
It lacks an exposed disabled state for assistive technologies.
NVDA may announce the URL from the anchor (title) rather than only the intended label.
JIRA : IX-4344
🆕 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
Bug Fixes