feat(eslint-plugin): add new `@elastic/eui/callout-announce-on-mount` rule by paulinashakirova · Pull Request #9005 · elastic/eui

paulinashakirova · 2025-09-10T20:04:06Z

Summary

This PR introduces a new ESLint rule

@elastic/eui/callout-announce-on-mount

Problem

When callouts appear dynamically (e.g., after user interactions, form validation errors, or status changes), screen readers may not announce their content to users.
The announceOnMount prop ensures these messages are properly announced to users with assistive technologies.

Screen.Recording.2025-09-10.at.21.22.15.mov

alexwizp · 2025-09-11T10:13:39Z

packages/eslint-plugin/src/rules/a11y/callout_announce_on_mount.ts

+    schema: [],
+    messages: {
+      missingAnnounceOnMount: [
+        'EuiCallout should have "announceOnMount" prop when conditionally rendered for better accessibility.',


please replace EuiCallout -> CALLOUT_COMPONENT (for all places) + in description

alexwizp · 2025-09-11T10:14:25Z

packages/eslint-plugin/src/rules/a11y/callout_announce_on_mount.ts

+    };
+  },
+  meta: {
+    type: 'suggestion',


let's set problem?

alexwizp · 2025-09-11T10:15:52Z

packages/eslint-plugin/src/rules/a11y/callout_announce_on_mount.ts

+          return;
+        }
+        if (isInConditionalRendering(node)) {
+          const hasSpread = openingElement.attributes.some(a => a.type === 'JSXSpreadAttribute');


can we reuse packages/eslint-plugin/src/utils/has_spread.ts

alexwizp · 2025-09-11T10:16:18Z

packages/eslint-plugin/src/rules/a11y/callout_announce_on_mount.ts

+
+export const CallOutAnnounceOnMount = ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    function isInConditionalRendering(node: TSESTree.JSXElement): boolean {


candidate for moving into packages/eslint-plugin/src/utils/

packages/eslint-plugin/changelogs/upcoming/9005.md

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

elasticmachine · 2025-09-12T17:32:28Z

💚 Build Succeeded

History

💚 Build #1218 succeeded f0a211c
💚 Build #1204 succeeded f2a9d89

cc @paulinashakirova

elasticmachine · 2025-09-12T18:11:55Z

💚 Build Succeeded

Buildkite Build
Commit: 7c054ad

History

💚 Build #4697 succeeded f0a211c
💚 Build #4686 succeeded f2a9d89

cc @paulinashakirova

weronikaolejniczak

LGTM 🟢 Thanks for contributing @paulinashakirova! 🥳

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([elastic#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([elastic#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([elastic#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([elastic#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([elastic#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([elastic#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([elastic#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([elastic#8973](elastic/eui#8973))

…ceOnMount` in conditional rendered instances (#235054) ## Summary This PR introduces fix for our new eslint rule [`@elastic/eui/callout-announce-on-mount`](elastic/eui#9005). ### Problem tldr; When callouts appear dynamically (e.g., after user interactions, form validation errors, or status changes), screen readers may not announce their content to users. The `announceOnMount` prop ensures these messages are properly announced to users with assistive technologies. #### Please double check your code - to make sure that if `EuiCallout` appears dynamically after a user interaction, the `announceOnMount` is NOT set to false. I did my best, but might have missed some because of my lacking context. > [!NOTE] > If `EuiCallOut` is inside a condition, announceOnMount must be set explicitly. --------- Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com> Co-authored-by: Davis McPhee <davismcphee@hotmail.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>

…ceOnMount` in conditional rendered instances (elastic#235054) ## Summary This PR introduces fix for our new eslint rule [`@elastic/eui/callout-announce-on-mount`](elastic/eui#9005). ### Problem tldr; When callouts appear dynamically (e.g., after user interactions, form validation errors, or status changes), screen readers may not announce their content to users. The `announceOnMount` prop ensures these messages are properly announced to users with assistive technologies. #### Please double check your code - to make sure that if `EuiCallout` appears dynamically after a user interaction, the `announceOnMount` is NOT set to false. I did my best, but might have missed some because of my lacking context. > [!NOTE] > If `EuiCallOut` is inside a condition, announceOnMount must be set explicitly. --------- Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com> Co-authored-by: Davis McPhee <davismcphee@hotmail.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>

[a11y] Add a rule for conditionally rendered EuiCallOut

23e41c1

paulinashakirova self-assigned this Sep 10, 2025

paulinashakirova added the accessibility label Sep 10, 2025

paulinashakirova added 2 commits September 10, 2025 22:06

add changelog file

fcf010f

Merge branch 'main' into eslint-rule-announceOnMount-callout

f2a9d89

paulinashakirova changed the title ~~[a11y] Add a rule for conditionally rendered EuiCallOut~~ feat(eslint-plugin): add new @elastic/eui/callout-announce-on-mount rule Sep 10, 2025

alexwizp reviewed Sep 11, 2025

View reviewed changes

paulinashakirova added 3 commits September 12, 2025 14:30

resolve comments

7ddbcfb

style: add comma because of merge conflict

9e3652c

Merge branch 'main' into eslint-rule-announceOnMount-callout

f0a211c

paulinashakirova marked this pull request as ready for review September 12, 2025 12:40

paulinashakirova requested a review from a team as a code owner September 12, 2025 12:40

weronikaolejniczak reviewed Sep 12, 2025

View reviewed changes

packages/eslint-plugin/changelogs/upcoming/9005.md Outdated Show resolved Hide resolved

Update packages/eslint-plugin/changelogs/upcoming/9005.md

7c054ad

Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>

weronikaolejniczak approved these changes Sep 12, 2025

View reviewed changes

weronikaolejniczak merged commit e702a59 into elastic:main Sep 15, 2025
5 checks passed

paulinashakirova mentioned this pull request Sep 15, 2025

[a11y] Fix EuiCallout eslint rule errors by adding a new prop announceOnMount in conditional rendered instances elastic/kibana#235054

Merged

weronikaolejniczak mentioned this pull request Sep 15, 2025

[EUI] Upgrade EUI to v106.6.0 elastic/kibana#235106

Merged

paulinashakirova mentioned this pull request Sep 17, 2025

(eslint-plugin) Add a note when to explicitly set announceOnMount={false} #9031

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(eslint-plugin): add new `@elastic/eui/callout-announce-on-mount` rule#9005

feat(eslint-plugin): add new `@elastic/eui/callout-announce-on-mount` rule#9005
weronikaolejniczak merged 7 commits intoelastic:mainfrom
paulinashakirova:eslint-rule-announceOnMount-callout

paulinashakirova commented Sep 10, 2025 •

edited

Loading

Uh oh!

alexwizp Sep 11, 2025 •

edited

Loading

Uh oh!

alexwizp Sep 11, 2025

Uh oh!

alexwizp Sep 11, 2025

Uh oh!

alexwizp Sep 11, 2025

Uh oh!

Uh oh!

elasticmachine commented Sep 12, 2025

Uh oh!

elasticmachine commented Sep 12, 2025

Uh oh!

weronikaolejniczak left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

paulinashakirova commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Uh oh!

alexwizp Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexwizp Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexwizp Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexwizp Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Sep 12, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 12, 2025

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

paulinashakirova commented Sep 10, 2025 •

edited

Loading

alexwizp Sep 11, 2025 •

edited

Loading