Description

Our EuiPopover component relies on users pressing ESC to close the modal. I'd like to explore adding a focusable Close button to the component. It could be an optional prop so we can turn it off, but I think this would be a big benefit for mobile screen reader users.

As the component behaves today, users have to double tap the button that opened the popover. If users can't see their screen it might be challenging to discover that button a second time.

Guidance

• Mozilla Developer Network recommends the following for modal dialog focus management:
  
  

  Dialogs should always have at least one focusable control. For many dialogs, there will be a button like "Close", "OK" or "Cancel". In addition to the needed control, dialogs can contain any number of focusable elements, even entire forms or other container widgets like tabs.

• https://www.w3.org/WAI/WCAG21/Understanding/on-input.html