fix(tool_tip): stop propagation on escape key down by weronikaolejniczak · Pull Request #8140 · elastic/eui

weronikaolejniczak · 2024-11-14T15:48:48Z

Summary

When we have EuiIconTip (consequently, EuiTooltip) within EuiFlyout and with the tooltip open we click "Escape" key, the flyout gets closed. The reason is, the escape keydown event is propagated from the tooltip and captured by the flyout as its parent. Simple event.stopPropagation() inside EuiTooltip seemed to do the trick.

closes #8130

QA

Test path:

Run Storybook locally: yarn storybook.
Find the component EuiFlyout.
Close the flyout with the escape key.
Change the EuiFlyoutBody to contain a EuiToolTip as children.
Focus the tooltip and close it with the Escape key. The flyout should not close, the tooltip - yes.
With the tooltip closed, click Escape key again to close the flyout.

Screen.Recording.2024-11-27.at.12.43.26.mov

Manual QA of other focus-trap elements

EuiModal

Screen.Recording.2024-11-27.at.12.37.48.mov

EuiPopover

Screen.Recording.2024-11-27.at.12.42.35.mov

EuiDataGrid fullscreen

Screen.Recording.2024-11-27.at.12.44.14.mov

General checklist

Browser QA
- ~~Checked in both light and dark modes~~ (not applicable)
- Checked in mobile (not applicable)
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation (not applicable)
- Props have proper autodocs (using @default if default values are missing) and playground toggles (not applicable)
- ~~Checked Code Sandbox works for any docs examples~~ (not applicable)
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests (not applicable)
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)

cee-chen

This LGTM (awesome work with the E2E test!) - but I'll defer to @mgadewoll for any final comments since I believe she solved a similar bug/issue recently. My only other thought is we might also want to either QA or write a test for the following other focus trap components:

modals
popovers
various fullscreen modes (EuiDataGrid fullscreen, EuiImage fullscreen, EuiCodeBlock fullscreen(?) - not sure that last one can even have a tooltip)

weronikaolejniczak · 2024-11-22T21:19:40Z

Thanks for the great suggestion, Cee! 🌈 I focused so much on fixing that one test case I forgot about the other overlay elements that might suffer the same issue.

I updated the description with the screen recordings from the manual QA. EuiImage and EuiCodeBlock don't seem to allow for additional children in the fullscreen mode.

One doubt I have - is the stopPropagation in the tooltip the only point-of-failure for all these cases? If so, is it okay that we're adding (rather) expensive Cypress tests for each affected component? We could switch to RTL but then we need to remember it works with a dumb-downed DOM implementation, maybe not the best fit for asserting keyboard navigation and overlay elements.

If we agree to add the automated tests after all, I'll work on that first thing Monday!

cee-chen · 2024-11-22T22:17:43Z

I'm fine with skipping the automated Cypress tests for each focus trap use case - flyouts are likely our biggest use-case in any case. EuiDataGrid might be the second most likely use-case in production. I'm also fine with manual QA only for the cases I noted, I just want to make sure someone tested it :) It might also be nice for future devs to add an inline comment next to the flyout Cypress test noting which other edge cases to manually QA.

mgadewoll · 2024-11-25T09:18:26Z

packages/eui/src/components/tool_tip/tool_tip.tsx


  onEscapeKey = (event: React.KeyboardEvent<HTMLSpanElement>) => {
    if (event.key === keys.ESCAPE) {
+      event.stopPropagation();


One thing: This means the Escape key will never propagate. We might rather want to stop propagation only conditionally when it's visible.
If the tooltip is closed it would be expected that Escape closes the Flyout, otherwise users would first need to move off the tooltip anchor to be able to close it or would even be stuck in wrapper elements where there is no other element to navigate too. 🤔

static - blocking

Screen.Recording.2024-11-25.at.10.14.42.mov

conditional

Screen.Recording.2024-11-25.at.10.15.13.mov

@mgadewoll that's true, the way I understood it is if the tooltip trigger is focused, the Escape shouldn't close the wrapping element. Is it something we can consult with an accessibility contractor? Or maybe it's something obvious that I'm not aware about 😅

While the tooltip is open, I'd agree that it should not close any wrapping element. But while it's closed I'd think it's more useful to free up the Escape key and prevent blocking.

I would see the behavior as follows:

trigger is focused -> tooltip opens (active tooltip)

Escape is pressed -> tooltip closes (inactive tooltip) -> trigger stays focused as that's where the DOM focus was all the time already (no new focus on trigger)

Enter is pressed -> opens tooltip (active tooltip)
OR

Escape is pressed -> closes containing element (e.g. flyout or similar)

@alexwizp Do you have any insights here?

@mgadewoll this absolutely makes sense to me! I'll let @alexwizp confirm and I'll push the changes. I also think it'd be good to cover both paths with an automated test.

closes elastic#8130

weronikaolejniczak · 2024-11-27T11:45:59Z

@cee-chen @mgadewoll I conditionally call stopPropagation (I leveraged the this.state.visible bool), I moved the tests to the EuiToolTip suite and added EuiModal and EuiPopover cases, and I re-tested manually all the cases mentioned before by @cee-chen and updated the description with the recordings.

I'd appreciate a re-review 🙏🏻 and thanks again for the awesome suggestions!

cee-chen · 2024-11-27T17:47:30Z

@weronikaolejniczak It looks like the added Cypress test is failing on React 17/16 which is odd 👀 You may want to yarn test-cypress-dev --react-version=17 to debug what's going on

weronikaolejniczak · 2024-11-28T10:25:50Z

@cee-chen I’m not exactly sure why but two tests for EuiFlyout and EuiModal were failing on React 16 and 17 because they couldn’t find the tooltip element. I tried switching from realMount to mount which would make the tests for the old versions pass but for 18 fail. Something must have changed between versions, leading to different focus behavior.

The solution was to focus the tool-tip trigger directly instead of tabbing into it to assure consistent behavior between versions. Otherwise, the tabbing would start and end at different elements depending on the version.

to account for the differences between React versions

mgadewoll · 2024-11-29T10:24:21Z

@cee-chen I’m not exactly sure why but two tests for EuiFlyout and EuiModal were failing on React 16 and 17 because they couldn’t find the tooltip element. I tried switching from realMount to mount which would make the tests for the old versions pass but for 18 fail. Something must have changed between versions, leading to different focus behavior.

The solution was to focus the tool-tip trigger directly instead of tabbing into it to assure consistent behavior between versions. Otherwise, the tabbing would start and end at different elements depending on the version.

@weronikaolejniczak For testing with key presses, I generally would prefer to be able to use proper realPress() to move to the tested component instead of direct focus() to ensure all keyboard functionality/flow works as expected.
From what I see, the issue is that realMount adds a click on mount to move focus to the DOM.
Since we're testing components here that have default click-away behavior, the tests fail because the components close because of the click.
We could enhance the realMount to accept options to define the initial click position to manually adjust it where needed BUT that would likely become annoying for positioning it properly.

Instead we could still use mount() but use focus() to programmatically define the start position on the container element (considering other focus to that element is tested in the component specific tests anyway) and proceed with realPress()?

// example for Flyout
cy.mount(
  <Flyout>
    <EuiToolTip content="Tooltip text here" data-test-subj="tool_tip">
      <EuiButton data-test-subj="tool_tip_trigger">Show tooltip</EuiButton>
    </EuiToolTip>
  </Flyout>
);
cy.get('[data-test-subj="flyout"]').focus(); // move focus to flyout
cy.get('[data-test-subj="tool_tip"]').should('not.exist');

cy.repeatRealPress('Tab', 2);
cy.get('[data-test-subj="tool_tip"]').should('exist');

cy.realPress('Escape');
cy.get('[data-test-subj="tool_tip"]').should('not.exist');
cy.get('[data-test-subj="flyout"]').should('exist');

cy.realPress('Escape');
cy.get('[data-test-subj="flyout"]').should('not.exist');

weronikaolejniczak · 2024-11-29T13:14:17Z

@mgadewoll that's a fantastic suggestion, thank you, Lene! 🙌🏻 I pushed the changes for all test cases, could you check?

kibanamachine · 2024-11-29T13:40:19Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8140/
Storybook: https://eui.elastic.co/pr_8140/storybook
New docs: https://eui.elastic.co/pr_8140/new-docs

elasticmachine · 2024-11-29T13:43:10Z

💚 Build Succeeded

Buildkite Build
Commit: f020bb0

History

💚 Build #3154 succeeded 6dc6d35
💔 Build #3152 failed a696364
💔 Build #3145 failed 56ad6ed
💚 Build #3134 succeeded 61d6291
💚 Build #3123 succeeded 7acdd8b
💚 Build #3110 succeeded ba8708d

mgadewoll

🚢 🐈‍⬛ Thanks for the additional changes! Updates LGTM 👍

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([elastic#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([elastic#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([elastic#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([elastic#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([elastic#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([elastic#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([elastic#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([elastic#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([elastic#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([elastic#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([elastic#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

>[!IMPORTANT] This PR introduces the Borealis enabled EUI package to `8.x`. The intention is to support new features being developed that need to live in `main` as well as `8.x`. >[!IMPORTANT] All `8.x` versions should continue to use the current Amsterdam theme. To ensure this even with upcoming changes to the default theme for EUI, we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually. ## Description This PR introduces all previous Borealis related PR changes but excludes the specific changes to support `@elastic/eui-theme-borealis` as only Amsterdam is supported as theme in `8.x`. Previous PRs - #199993 - #201049 - #202073 --- `v97.3.1`⏩`v98.2.1-borealis.1` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([#8247](elastic/eui#8247)) --- # `@elastic/eui` ## [`v98.1.0`](https://github.com/elastic/eui/releases/v98.1.0) - Updated `EuiBetaBadge` with a new `warning` color variant ([#8177](elastic/eui#8177)) **Accessibility** - Ensures `autoFocus` on `EuiSelectableList` triggers initial focus ([#8091](elastic/eui#8091)) - Improved the accessibility of `EuiSearchBarFilters` by: ([#8091](elastic/eui#8091)) - adding a more descriptive `aria-label` to selection filter buttons - ensuring the selection listbox is initially focused when opening a selection popover - Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab group is a tab stop and tabs can be traversed with arrow keys. ([#8116](elastic/eui#8116)) - Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows setting a custom screen reader label on the copy button. ([#8176](elastic/eui#8176)) **CSS-in-JS conversions** - Removed the following global Sass variables: ([#8169](elastic/eui#8169)) - `$euiButtonMinWidth` - `$euiDatePickerCalendarWidth` - Removed the following Sass animations: ([#8169](elastic/eui#8169)) - `euiAnimFadeIn` - `euiGrow` - `focusRingAnimate` - `focusRingAnimateLarge` - `euiButtonActive` - Removed the following Sass mixins: ([#8169](elastic/eui#8169)) - `euiFullHeight` - `euiSlightShadowHover` - `datePickerArrow` # Borealis updates - [Visual Refresh] Fix euiColorFullShade Sass variable mapping (elastic/eui#8178) --- # `@elastic/eui` ## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0) **Bug fixes** - Fixed an `EuiDataGrid` bug where column actions where not clickable when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was used inside a modal ([#8135](elastic/eui#8135)) **Breaking changes** - Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display prop. Use `columnCompressed` instead ([#8113](elastic/eui#8113)) # Borealis updates **Bug fixes** - Fixed computed border token mapping (elastic/eui#8170)

`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2` _[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)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([elastic#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([elastic#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([elastic#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([elastic#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([elastic#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([elastic#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([elastic#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([elastic#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([elastic#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([elastic#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([elastic#8247](elastic/eui#8247)) - [Visual Refresh] Fix transparent color variable definitions ([8249](elastic/eui#8249)) - [Visual Refresh] Update EuiToken colors ([8250](elastic/eui#8250)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

weronikaolejniczak mentioned this pull request Nov 14, 2024

[EuiFlyout] Pressing ESC on a tooltip element inside the EuiFlyout should not close the flyout. #8130

Closed

weronikaolejniczak changed the title ~~[WIP] fix(flyout): close flyout only on non-propagated escape~~ fix(flyout): close flyout only on non-propagated escape Nov 18, 2024

weronikaolejniczak force-pushed the fix/8130-eui-flyout-tooltip-esc branch from 98a69dd to 7068ec9 Compare November 18, 2024 15:14

weronikaolejniczak changed the title ~~fix(flyout): close flyout only on non-propagated escape~~ fix(tool_tip): stop propagation on escape key down Nov 18, 2024

weronikaolejniczak force-pushed the fix/8130-eui-flyout-tooltip-esc branch 7 times, most recently from a4d77c5 to 3bcd2b5 Compare November 22, 2024 09:49

weronikaolejniczak marked this pull request as ready for review November 22, 2024 13:02

weronikaolejniczak requested a review from a team as a code owner November 22, 2024 13:02

weronikaolejniczak force-pushed the fix/8130-eui-flyout-tooltip-esc branch from 3bcd2b5 to ba8708d Compare November 22, 2024 13:03

cee-chen reviewed Nov 22, 2024

View reviewed changes

weronikaolejniczak force-pushed the fix/8130-eui-flyout-tooltip-esc branch from ba8708d to 7acdd8b Compare November 22, 2024 21:19

mgadewoll reviewed Nov 25, 2024

View reviewed changes

weronikaolejniczak added 2 commits November 25, 2024 10:24

fix(tool_tip): stop propagation on escape key down

5c4b1b1

closes elastic#8130

chore(flyout): test escape key down behavior with tooltip as content

61d6291

weronikaolejniczak force-pushed the fix/8130-eui-flyout-tooltip-esc branch from 7acdd8b to 61d6291 Compare November 25, 2024 09:24

fix(tool_tip): conditionally stop propagation

56ad6ed

fix(tool_tip): use mount and focus trigger directly

6dc6d35

to account for the differences between React versions

weronikaolejniczak force-pushed the fix/8130-eui-flyout-tooltip-esc branch from a696364 to 6dc6d35 Compare November 28, 2024 11:36

fix(tool_tip): focus the wrapper and tab into the trigger

f020bb0

mgadewoll approved these changes Nov 29, 2024

View reviewed changes

weronikaolejniczak merged commit b0425f4 into elastic:main Nov 29, 2024

This was referenced Dec 16, 2024

Upgrade EUI to v98.2.1 elastic/kibana#204482

Merged

[8.x] Upgrade EUI to v98.2.1-borealis.1 elastic/kibana#204783

Merged

weronikaolejniczak deleted the fix/8130-eui-flyout-tooltip-esc branch February 18, 2025 16:33

Conversation

weronikaolejniczak commented Nov 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

Manual QA of other focus-trap elements

EuiModal

EuiPopover

EuiDataGrid fullscreen

General checklist

Uh oh!

cee-chen left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Nov 22, 2024

Uh oh!

cee-chen commented Nov 22, 2024

Uh oh!

mgadewoll Nov 25, 2024

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Nov 25, 2024

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 25, 2024

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Nov 25, 2024 • 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!

weronikaolejniczak commented Nov 27, 2024

Uh oh!

cee-chen commented Nov 27, 2024

Uh oh!

weronikaolejniczak commented Nov 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll commented Nov 29, 2024

Uh oh!

weronikaolejniczak commented Nov 29, 2024

Uh oh!

kibanamachine commented Nov 29, 2024

Uh oh!

elasticmachine commented Nov 29, 2024

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

weronikaolejniczak commented Nov 14, 2024 •

edited

Loading

weronikaolejniczak Nov 25, 2024 •

edited

Loading

weronikaolejniczak commented Nov 28, 2024 •

edited

Loading