eui
eui copied to clipboard
[EuiPortal docs] Add a custom modal/flyout example that meets a11y requirements
We have new types of portals emerging in our Elastic products.
For both scenarios, we recommended the usage of EuiFlyout. But it requires some CSS overrides or adapting the design to use a EuiFlyout.
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.