Skip to content

[EuiFlyout] Add aria-modal to overlay flyouts#8591

Merged
mgadewoll merged 3 commits intoelastic:mainfrom
mgadewoll:flyout/add-aria-modal-for-overlay-flyout
Apr 15, 2025
Merged

[EuiFlyout] Add aria-modal to overlay flyouts#8591
mgadewoll merged 3 commits intoelastic:mainfrom
mgadewoll:flyout/add-aria-modal-for-overlay-flyout

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Apr 14, 2025 •
edited by weronikaolejniczak
Loading

Summary

This PR ensures that for overlay flyouts (that essentially behave as modals with role="dialog") also have the appropriate aria-modal applied.

QA

  • verify that EuiFlyout with type="overlay" (default) have aria-modal="true" applied in the DOM

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@mgadewoll mgadewoll self-assigned this Apr 14, 2025
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Apr 14, 2025

💚 Build Succeeded

cc @mgadewoll

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Apr 14, 2025

Preview staging links for this PR:

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Apr 14, 2025

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review April 14, 2025 17:02
@mgadewoll mgadewoll requested a review from a team as a code owner April 14, 2025 17:02
@weronikaolejniczak weronikaolejniczak self-requested a review April 15, 2025 06:00
weronikaolejniczak
weronikaolejniczak approved these changes Apr 15, 2025
View reviewed changes
Copy link
Copy Markdown
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.

LGTM! 👍🏻

@mgadewoll mgadewoll merged commit 18507ca into elastic:main Apr 15, 2025
7 checks passed
This was referenced Apr 22, 2025
Merged
Merged
mgadewoll added a commit to elastic/kibana that referenced this pull request Apr 24, 2025
@mgadewoll @elasticmachine
Upgrade EUI to v101.4.0 (#218778)
d2d2765 
`101.3.0` ⏩ `101.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)

## Changes

This PR only updates tests and snapshots related to changes on EUI side:
- updated `aria-current="true"` to `aria-current="page"`
- updated icon usage `userAvatar` to `user`

## Package updates

### `@elastic/eui`

#### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0)

- Spread `labelProps` to the `label` element in `EuiCheckableCard`
([#8586](elastic/eui#8586))
- Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon`
([#8580](elastic/eui#8580))
- Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`,
`EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize
their internal Emotion styles
([#8565](elastic/eui#8565))
- Updated global `border.radius.medium` token value for default
`Borealis` theme to `4px`
([#8563](elastic/eui#8563))
- Updated `EuiProvider` to build themes including `highContrastMode`
([#8558](elastic/eui#8558))

**Accessibility**

- Removed the `aria-label` attribute from the `ul` element in
`EuiPagination` to avoid duplicate screen reader output
([#8597](elastic/eui#8597))
- Set a more specific `aria-current="page"` on list items in
`EuiPagination` ([#8597](elastic/eui#8597))
- Added `aria-modal` to `EuiFlyout` with `type="overlay"`
([#8591](elastic/eui#8591))

**Dependency updates**

- Updated `@elastic/prismjs-esql` to v1.1.0
([#8587](elastic/eui#8587))

### `@elastic/eui-theme-borealis@0.2.0`

- Updated component tokens to use `computed` values to ensure correct
inheritance from theme overrides
([#8558](elastic/eui#8558))
- Added `overrides.HCM` to `euiThemeBorealis` to support theme internal
overrides ([#8558](elastic/eui#8558))
- Updated `border.radius.medium` token value to `4px`
([#8563](elastic/eui#8563))

### `@elastic/eui-theme-common@0.2.0`

- Added support for theme `overrides` as optional part of
`EuiThemeShape` ([#8558](elastic/eui#8558))
- Updated `getComputed` to support high contrast mode overrides defined
on `overrides.HCM` ([#8558](elastic/eui#8558))

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
mgadewoll added a commit to mgadewoll/kibana that referenced this pull request Apr 24, 2025
@mgadewoll
Upgrade EUI to v101.4.0 (elastic#218778)
65e2098 
`101.3.0` ⏩ `101.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)

## Changes

This PR only updates tests and snapshots related to changes on EUI side:
- updated `aria-current="true"` to `aria-current="page"`
- updated icon usage `userAvatar` to `user`

## Package updates

### `@elastic/eui`

#### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0)

- Spread `labelProps` to the `label` element in `EuiCheckableCard`
([elastic#8586](elastic/eui#8586))
- Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon`
([elastic#8580](elastic/eui#8580))
- Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`,
`EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize
their internal Emotion styles
([elastic#8565](elastic/eui#8565))
- Updated global `border.radius.medium` token value for default
`Borealis` theme to `4px`
([elastic#8563](elastic/eui#8563))
- Updated `EuiProvider` to build themes including `highContrastMode`
([elastic#8558](elastic/eui#8558))

**Accessibility**

- Removed the `aria-label` attribute from the `ul` element in
`EuiPagination` to avoid duplicate screen reader output
([elastic#8597](elastic/eui#8597))
- Set a more specific `aria-current="page"` on list items in
`EuiPagination` ([elastic#8597](elastic/eui#8597))
- Added `aria-modal` to `EuiFlyout` with `type="overlay"`
([elastic#8591](elastic/eui#8591))

**Dependency updates**

- Updated `@elastic/prismjs-esql` to v1.1.0
([elastic#8587](elastic/eui#8587))

### `@elastic/eui-theme-borealis@0.2.0`

- Updated component tokens to use `computed` values to ensure correct
inheritance from theme overrides
([elastic#8558](elastic/eui#8558))
- Added `overrides.HCM` to `euiThemeBorealis` to support theme internal
overrides ([elastic#8558](elastic/eui#8558))
- Updated `border.radius.medium` token value to `4px`
([elastic#8563](elastic/eui#8563))

### `@elastic/eui-theme-common@0.2.0`

- Added support for theme `overrides` as optional part of
`EuiThemeShape` ([elastic#8558](elastic/eui#8558))
- Updated `getComputed` to support high contrast mode overrides defined
on `overrides.HCM` ([elastic#8558](elastic/eui#8558))

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit d2d2765)

# Conflicts:
#	x-pack/solutions/security/plugins/security_solution/public/explore/components/paginated_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/components/paginated_table/index.test.tsx
#	x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/uncommon_process_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_dns_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_http_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_top_countries_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_top_n_flow_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/tls_table/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/users_table/__snapshots__/index.test.tsx.snap
mgadewoll added a commit to elastic/kibana that referenced this pull request Apr 24, 2025
@mgadewoll
[8.19] Upgrade EUI to v101.4.0 (#218823)
a2d08ab 
`101.3.0` ⏩ `101.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)

>[!IMPORTANT]
This PR is a direct sibling to this [upgrade
PR](#218778) to `main`. The
difference is that it adds a standalone EUI package with the previous
"Amsterdam" theme.
Apart from the theme difference, **there are no further changes added**.

## Changes

This PR only updates tests and snapshots related to changes on EUI side:
- updated `aria-current="true"` to `aria-current="page"`
- updated icon usage `userAvatar` to `user`

## Package updates

### `@elastic/eui`

#### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0)

- Spread `labelProps` to the `label` element in `EuiCheckableCard`
([#8586](elastic/eui#8586))
- Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon`
([#8580](elastic/eui#8580))
- Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`,
`EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize
their internal Emotion styles
([#8565](elastic/eui#8565))
- Updated global `border.radius.medium` token value for default
`Borealis` theme to `4px`
([#8563](elastic/eui#8563))
- Updated `EuiProvider` to build themes including `highContrastMode`
([#8558](elastic/eui#8558))

**Accessibility**

- Removed the `aria-label` attribute from the `ul` element in
`EuiPagination` to avoid duplicate screen reader output
([#8597](elastic/eui#8597))
- Set a more specific `aria-current="page"` on list items in
`EuiPagination` ([#8597](elastic/eui#8597))
- Added `aria-modal` to `EuiFlyout` with `type="overlay"`
([#8591](elastic/eui#8591))

**Dependency updates**

- Updated `@elastic/prismjs-esql` to v1.1.0
([#8587](elastic/eui#8587))

### `@elastic/eui-theme-borealis@0.2.0`

- Updated component tokens to use `computed` values to ensure correct
inheritance from theme overrides
([#8558](elastic/eui#8558))
- Added `overrides.HCM` to `euiThemeBorealis` to support theme internal
overrides ([#8558](elastic/eui#8558))
- Updated `border.radius.medium` token value to `4px`
([#8563](elastic/eui#8563))

### `@elastic/eui-theme-common@0.2.0`

- Added support for theme `overrides` as optional part of
`EuiThemeShape` ([#8558](elastic/eui#8558))
- Updated `getComputed` to support high contrast mode overrides defined
on `overrides.HCM` ([#8558](elastic/eui#8558))
akowalska622 pushed a commit to akowalska622/kibana that referenced this pull request May 29, 2025
@mgadewoll @elasticmachine @akowalska622
Upgrade EUI to v101.4.0 (elastic#218778)
cbb283f 
`101.3.0` ⏩ `101.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)

## Changes

This PR only updates tests and snapshots related to changes on EUI side:
- updated `aria-current="true"` to `aria-current="page"`
- updated icon usage `userAvatar` to `user`

## Package updates

### `@elastic/eui`

#### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0)

- Spread `labelProps` to the `label` element in `EuiCheckableCard`
([elastic#8586](elastic/eui#8586))
- Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon`
([elastic#8580](elastic/eui#8580))
- Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`,
`EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize
their internal Emotion styles
([elastic#8565](elastic/eui#8565))
- Updated global `border.radius.medium` token value for default
`Borealis` theme to `4px`
([elastic#8563](elastic/eui#8563))
- Updated `EuiProvider` to build themes including `highContrastMode`
([elastic#8558](elastic/eui#8558))

**Accessibility**

- Removed the `aria-label` attribute from the `ul` element in
`EuiPagination` to avoid duplicate screen reader output
([elastic#8597](elastic/eui#8597))
- Set a more specific `aria-current="page"` on list items in
`EuiPagination` ([elastic#8597](elastic/eui#8597))
- Added `aria-modal` to `EuiFlyout` with `type="overlay"`
([elastic#8591](elastic/eui#8591))

**Dependency updates**

- Updated `@elastic/prismjs-esql` to v1.1.0
([elastic#8587](elastic/eui#8587))

### `@elastic/eui-theme-borealis@0.2.0`

- Updated component tokens to use `computed` values to ensure correct
inheritance from theme overrides
([elastic#8558](elastic/eui#8558))
- Added `overrides.HCM` to `euiThemeBorealis` to support theme internal
overrides ([elastic#8558](elastic/eui#8558))
- Updated `border.radius.medium` token value to `4px`
([elastic#8563](elastic/eui#8563))

### `@elastic/eui-theme-common@0.2.0`

- Added support for theme `overrides` as optional part of
`EuiThemeShape` ([elastic#8558](elastic/eui#8558))
- Updated `getComputed` to support high contrast mode overrides defined
on `overrides.HCM` ([elastic#8558](elastic/eui#8558))

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
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

@mgadewoll mgadewoll

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@mgadewoll @elasticmachine @kibanamachine @weronikaolejniczak