eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiPortal docs] Add a custom modal/flyout example that meets a11y requirements

Open elizabetdev opened this issue 3 years ago • 0 comments

We have new types of portals emerging in our Elastic products.

Portals@2x

For both scenarios, we recommended the usage of EuiFlyout. But it requires some CSS overrides or adapting the design to use a EuiFlyout.

Screenshot 2022-09-15 at 15 35 29

For the above scenario, we recommended a EuiPortal. But some a11y features might be missing in the implementation. For example, no close button.

Solution

All of the above examples are somehow similar. They can be coded with a EuiPortal, EuiPanel, EuiButtonIcon with a cross icon to close the portals.

So we should include better docs in https://elastic.github.io/eui/#/utilities/portal. We should have a real-world example with a portal that meets some a11y requirements:

  • focus trap
  • escape key to close the portal
  • auto-focusing

This way consumers can start implementing their custom portals with a pattern that we're providing in EUI.

elizabetdev avatar Sep 15 '22 14:09 elizabetdev