[EuiPopover][MOBILE]: Consider adding a close button to our popovers for mobile screen reader users

[1Copenut]

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

[ghudgins]

++ to this issue for a Discover case: this popover doesn't look closeable in Discover (reported by @bvader )

CC @andreadelrio & @VijayDoshi

[VijayDoshi]

++ the current modal behavior is not very friendly to close. A close affordance would be very useful. In the case of the Discover popup the width of the dialog is also not ideal.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[daveyholler]

Per EUI team discussion, we'll solve this by adding instructions, "... or click outside"