-
Notifications
You must be signed in to change notification settings - Fork 860
feat(eslint-plugin): add new @elastic/eui/accessible-interactive-element rule
#9093
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.
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
Conversation
💚 Build Succeeded |
💚 Build Succeeded
|
| const tabIndexAttribute = node.attributes.find( | ||
| (attr): attr is TSESTree.JSXAttribute => | ||
| attr.type === 'JSXAttribute' && | ||
| attr.name.type === 'JSXIdentifier' && | ||
| attr.name.name === 'tabIndex' | ||
| ); | ||
|
|
||
|
|
||
| if (tabIndexAttribute && (Number(extractAttrValue(context, tabIndexAttribute)) || 0) === -1) { | ||
| context.report({ | ||
| node: node, | ||
| messageId: 'disallowTabIndex', | ||
| data: { component: componentName }, | ||
| fix: fixer => fixer.remove(tabIndexAttribute), | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
doubt:
So we cannot reuse findAttrValue here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, maybe name not so clear but here for fix method we need ref to tabIndexAttribute
weronikaolejniczak
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 🙌🏻 Thanks for contributing 💚
- `@elastic/eui`: `v107.0.0` ⏩ `v107.0.1` - `@elastic/eslint-plugin-eui`: `v2.4.0` ⏩ `v2.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes Related to elastic/eui#9100 - Updated snapshot f90ae29 - Added missing `aria-label` for `EuiBetaBadge` - [Reporting] 6d10edd - [ML] ce58009 - Added new translation key, ran `node scripts/i18n_check` — is there anything else that should be done in this regard? ## Package updates ### `@elastic/eui` [`v107.0.1`](https://github.com/elastic/eui/releases/v107.0.1) **Bug fixes** - Fixed `prismjs` theme in `EuiCodeBlock` to improve highlighting for the `yaml` language ([#9089](elastic/eui#9089)) - Fixed a visual bug on `EuiTable` where the border for rows in dark mode wasn't applied correctly ([#9115](elastic/eui#9115)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.2 ([#9102](elastic/eui#9102)) **Accessibility** - Fixed incorrect role attribute on `EuiIcon` and `EuiBetaBadge` ([#9100](elastic/eui#9100)) - Make `EuiBasicTable` respect user's reduced motion setting by not animating when in loading state. ([#9095](elastic/eui#9095)) ### `@elastic/eslint-plugin-eui` [`v2.5.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v250) - Added new `accessible-interactive-element` rule. ([#9093](elastic/eui#9093)) - Added new `tooltip-focusable-anchor` rule. ([#9051](elastic/eui#9051)) - Excluded `EuiButtonEmpty` from the `no-unnamed-interactive-element` rule. ([#9046](elastic/eui#9046)) **Bug fixes** - Fixed `no-css-color` rule to allow CSS keywords like `currentcolor`, `transparent`, and `inherit` ([#9092](elastic/eui#9092)) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
Motivation
Ensure interactive EUI components (like e.g.
EuiLink,EuiButton,EuiRadio) remain accessible by prohibitingtabIndex={-1}, which removes them from keyboard navigation.Screen
Tests