Skip to content

feat(eslint-plugin): add new @elastic/eui/sr_output_disabled_tooltip rule #8848

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

Jump to bottom
Merged
alexwizp merged 5 commits into from
Jul 9, 2025
Merged

feat(eslint-plugin): add new @elastic/eui/sr_output_disabled_tooltip rule #8848

alexwizp merged 5 commits into from
Jul 9, 2025

Conversation

@alexwizp
Copy link
Contributor

@alexwizp alexwizp commented Jul 8, 2025 •
edited
Loading

Summary

This PR introduces a new ESLint rule to improve form validation consistency in EUI:

- @elastic/eui/sr_output_disabled_tooltip

Ensure disableScreenReaderOutput is set when EuiToolTip content matches EuiButtonIcon "aria-label".

Problem

EuiToolTip should include disableScreenReaderOutput attribute when its content matches the "aria-label" of EuiButtonicon to avoid redundant announcements.

Screen

image

@alexwizp alexwizp marked this pull request as ready for review July 8, 2025 12:38
@alexwizp alexwizp requested a review from a team as a code owner July 8, 2025 12:38
@elasticmachine
Copy link
Collaborator

elasticmachine commented Jul 8, 2025

💚 Build Succeeded

History

@elasticmachine
Copy link
Collaborator

elasticmachine commented Jul 8, 2025

💚 Build Succeeded

@weronikaolejniczak weronikaolejniczak self-requested a review July 8, 2025 13:26
@alexwizp alexwizp mentioned this pull request Jul 8, 2025
Merged
weronikaolejniczak
weronikaolejniczak approved these changes Jul 9, 2025
View reviewed changes
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks good, the tests are passing 🟢 I appreciate the constants! I see there are many cases that could benefit from the rule (example). I also don't see any other components that we could add to buttonComponents at the moment.

Thanks for contributing!

@alexwizp alexwizp merged commit 07b1256 into elastic:main Jul 9, 2025
6 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Jul 11, 2025
Merged
weronikaolejniczak added a commit to elastic/kibana that referenced this pull request Jul 15, 2025
@weronikaolejniczak
chore: update @elastic/eslint-plugin-eui to v2.1.0 (#227638)
e73fbdc 
`@elastic/eslint-plugin-eui`: `2.0.0` ⏩ `2.1.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

This PR updates the `@elastic/eslint-plugin-eui` version to latest:
[`v2.1.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.1.0)

### `@elastic/eui/require-aria-label-for-modals` (fixed with GenAI:
#227623)

Ensures that EUI modal components (`EuiModal`, `EuiFlyout`,
`EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop
for accessibility. This helps screen reader users understand the purpose
and content of modal dialogs.

### `@elastic/eui/consistent-is-invalid-props` (auto-fix available)

Ensures that form control components within `EuiFormRow` components have
matching `isInvalid` prop values. This maintains consistent validation
state between parent form rows and their child form controls, leading to
a more predictable and accessible user experience.

### `@elastic/eui/sr_output_disabled_tooltip` (auto-fix available)

Ensures `disableScreenReaderOutput` is set when `EuiToolTip` content
matches `EuiButtonIcon`'s `aria-label`.

> [!NOTE]
> `@elastic/eui/sr_output_disabled_tooltip` will be renamed to
`@elastic/eui/sr-output-disabled-tooltip` for consistent rule naming.

## Package updates

### `@elastic/eslint-plugin-eui`

- Added new `sr_output_disabled_tooltip` rule.
([#8848](elastic/eui#8848))
- Added new `consistent-is-invalid-props` rule.
([#8843](elastic/eui#8843))
- Added new `require-aria-label-for-modals` rule.
([#8811](elastic/eui#8811))
alexwizp added a commit to elastic/kibana that referenced this pull request Jul 16, 2025
@alexwizp
Auto-fix violations of the @elastic/eui/sr_output_disabled_tooltip ES…
e3e50ea 
…Lint rule (#227044)

## Summary

This PR applies the auto-fix for the newly introduced
`@elastic/eui/sr_output_disabled_tooltip` ESLint rule across the
codebase. The rule ensures proper accessibility behavior by adding
`disableScreenReaderOutput` prop to `EuiToolTip` components when their
content duplicates the trigger button's `aria-label`.

## Changes
- Auto-fixed instances where `EuiToolTip` components need
`disableScreenReaderOutput` prop to prevent redundant screen reader
announcements

## Related
- elastic/eui#8848
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 16, 2025
@alexwizp
Auto-fix violations of the @elastic/eui/sr_output_disabled_tooltip ES…
a80a354 
…Lint rule (elastic#227044)

## Summary

This PR applies the auto-fix for the newly introduced
`@elastic/eui/sr_output_disabled_tooltip` ESLint rule across the
codebase. The rule ensures proper accessibility behavior by adding
`disableScreenReaderOutput` prop to `EuiToolTip` components when their
content duplicates the trigger button's `aria-label`.

## Changes
- Auto-fixed instances where `EuiToolTip` components need
`disableScreenReaderOutput` prop to prevent redundant screen reader
announcements

## Related
- elastic/eui#8848

(cherry picked from commit e3e50ea)
alexwizp added a commit to alexwizp/kibana that referenced this pull request Jul 18, 2025
@alexwizp
Auto-fix violations of the @elastic/eui/sr_output_disabled_tooltip ES…
80fc981 
…Lint rule (elastic#227044)

## Summary

This PR applies the auto-fix for the newly introduced
`@elastic/eui/sr_output_disabled_tooltip` ESLint rule across the
codebase. The rule ensures proper accessibility behavior by adding
`disableScreenReaderOutput` prop to `EuiToolTip` components when their
content duplicates the trigger button's `aria-label`.

## Changes
- Auto-fixed instances where `EuiToolTip` components need
`disableScreenReaderOutput` prop to prevent redundant screen reader
announcements

## Related
- elastic/eui#8848

(cherry picked from commit e3e50ea)

# Conflicts:
#	x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/summary/index.tsx
alexwizp added a commit to alexwizp/kibana that referenced this pull request Jul 18, 2025
@alexwizp
Auto-fix violations of the @elastic/eui/sr_output_disabled_tooltip ES…
626c28d 
…Lint rule (elastic#227044)

## Summary

This PR applies the auto-fix for the newly introduced
`@elastic/eui/sr_output_disabled_tooltip` ESLint rule across the
codebase. The rule ensures proper accessibility behavior by adding
`disableScreenReaderOutput` prop to `EuiToolTip` components when their
content duplicates the trigger button's `aria-label`.

## Changes
- Auto-fixed instances where `EuiToolTip` components need
`disableScreenReaderOutput` prop to prevent redundant screen reader
announcements

## Related
- elastic/eui#8848

(cherry picked from commit e3e50ea)

# Conflicts:
#	src/platform/packages/private/kbn-esql-editor/src/editor_footer/keyboard_shortcuts.tsx
#	src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.tsx
#	src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx
#	src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx
#	src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/field_with_actions/field_hover_popover_action.tsx
#	x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx
#	x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/header/index.tsx
#	x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/summary/index.tsx
#	x-pack/solutions/security/plugins/threat_intelligence/public/modules/query_bar/components/filter_in.tsx
Bluefinger pushed a commit to Bluefinger/kibana that referenced this pull request Jul 22, 2025
@weronikaolejniczak @Bluefinger
chore: update @elastic/eslint-plugin-eui to v2.1.0 (elastic#227638)
02c99f0 
`@elastic/eslint-plugin-eui`: `2.0.0` ⏩ `2.1.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

This PR updates the `@elastic/eslint-plugin-eui` version to latest:
[`v2.1.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.1.0)

### `@elastic/eui/require-aria-label-for-modals` (fixed with GenAI:
elastic#227623)

Ensures that EUI modal components (`EuiModal`, `EuiFlyout`,
`EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop
for accessibility. This helps screen reader users understand the purpose
and content of modal dialogs.

### `@elastic/eui/consistent-is-invalid-props` (auto-fix available)

Ensures that form control components within `EuiFormRow` components have
matching `isInvalid` prop values. This maintains consistent validation
state between parent form rows and their child form controls, leading to
a more predictable and accessible user experience.

### `@elastic/eui/sr_output_disabled_tooltip` (auto-fix available)

Ensures `disableScreenReaderOutput` is set when `EuiToolTip` content
matches `EuiButtonIcon`'s `aria-label`.

> [!NOTE]
> `@elastic/eui/sr_output_disabled_tooltip` will be renamed to
`@elastic/eui/sr-output-disabled-tooltip` for consistent rule naming.

## Package updates

### `@elastic/eslint-plugin-eui`

- Added new `sr_output_disabled_tooltip` rule.
([elastic#8848](elastic/eui#8848))
- Added new `consistent-is-invalid-props` rule.
([elastic#8843](elastic/eui#8843))
- Added new `require-aria-label-for-modals` rule.
([elastic#8811](elastic/eui#8811))
Bluefinger pushed a commit to Bluefinger/kibana that referenced this pull request Jul 22, 2025
@alexwizp @Bluefinger
Auto-fix violations of the @elastic/eui/sr_output_disabled_tooltip ES…
29c6b69 
…Lint rule (elastic#227044)

## Summary

This PR applies the auto-fix for the newly introduced
`@elastic/eui/sr_output_disabled_tooltip` ESLint rule across the
codebase. The rule ensures proper accessibility behavior by adding
`disableScreenReaderOutput` prop to `EuiToolTip` components when their
content duplicates the trigger button's `aria-label`.

## Changes
- Auto-fixed instances where `EuiToolTip` components need
`disableScreenReaderOutput` prop to prevent redundant screen reader
announcements

## Related
- elastic/eui#8848
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
@weronikaolejniczak @kertal
chore: update @elastic/eslint-plugin-eui to v2.1.0 (elastic#227638)
87f3a27 
`@elastic/eslint-plugin-eui`: `2.0.0` ⏩ `2.1.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

This PR updates the `@elastic/eslint-plugin-eui` version to latest:
[`v2.1.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.1.0)

### `@elastic/eui/require-aria-label-for-modals` (fixed with GenAI:
elastic#227623)

Ensures that EUI modal components (`EuiModal`, `EuiFlyout`,
`EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop
for accessibility. This helps screen reader users understand the purpose
and content of modal dialogs.

### `@elastic/eui/consistent-is-invalid-props` (auto-fix available)

Ensures that form control components within `EuiFormRow` components have
matching `isInvalid` prop values. This maintains consistent validation
state between parent form rows and their child form controls, leading to
a more predictable and accessible user experience.

### `@elastic/eui/sr_output_disabled_tooltip` (auto-fix available)

Ensures `disableScreenReaderOutput` is set when `EuiToolTip` content
matches `EuiButtonIcon`'s `aria-label`.

> [!NOTE]
> `@elastic/eui/sr_output_disabled_tooltip` will be renamed to
`@elastic/eui/sr-output-disabled-tooltip` for consistent rule naming.

## Package updates

### `@elastic/eslint-plugin-eui`

- Added new `sr_output_disabled_tooltip` rule.
([elastic#8848](elastic/eui#8848))
- Added new `consistent-is-invalid-props` rule.
([elastic#8843](elastic/eui#8843))
- Added new `require-aria-label-for-modals` rule.
([elastic#8811](elastic/eui#8811))
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
@alexwizp @kertal
Auto-fix violations of the @elastic/eui/sr_output_disabled_tooltip ES…
c488497 
…Lint rule (elastic#227044)

## Summary

This PR applies the auto-fix for the newly introduced
`@elastic/eui/sr_output_disabled_tooltip` ESLint rule across the
codebase. The rule ensures proper accessibility behavior by adding
`disableScreenReaderOutput` prop to `EuiToolTip` components when their
content duplicates the trigger button's `aria-label`.

## Changes
- Auto-fixed instances where `EuiToolTip` components need
`disableScreenReaderOutput` prop to prevent redundant screen reader
announcements

## Related
- elastic/eui#8848
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@weronikaolejniczak weronikaolejniczak weronikaolejniczak approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@alexwizp @elasticmachine @weronikaolejniczak