Add keyboard usage instructions to screen reader popover dialogue

[cee-chen]

Per Zuhair's EuiPopover recommendation in #5784 (comment):

I would suggest [...] adding context specific text (if possible) advising what the user needs to do to get to the first focusable element (like pressing the tab key, using the arrows etc.). If there are no focusable elements, then the text should naturally not be spoken. This should at least prompt the user to initiate action to interact with the popover, letting them know that they don't have to listen to the entire content.

Generally, EuiPopovers should use the tabbable library to check if there are tabbable elements, and also if ownFocus is true on the popover (otherwise tab will not behave as expected). If both conditions are met, an additional dialogue sentence should be added instructing screen readers to use the Tab key to reach the first interactable element.

Special components that will need specific instructions:

• EuiTour - does not apparently use ownFocus, should be double checked to confirm no tab instructions read out
• EuiSelectableTemplateSitewide - tab key closes popover, up/down arrow keys should be used
• EuiComboBox - tab key closes popover, up/down arrow keys should be used
• EuiSuggest - tab key closes popover, up/down arrow keys should be used
• EuiSuperSelect - tab key does nothing, up/down arrow keys should be used
• EuiRange/EuiDualRange with EuiInputPopover - tab key does nothing, up/down arrow keys should be used
• EuiAutoRefresh with EuiInputPopover - tab key behaves weirdly and should not be used(?)
• EuiContextMenu - tab key and up/down arrow keys can be used (eventually tab might be removed)
• EuiSearchBar tags dropdown(?) - user must tab into EuiSelectable, confirm EuiSelectable reads out arrow key navigation

[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.

[1Copenut]

Adding a comment to verify and check off each component listed has a custom interaction message.

• EuiTour
  No custom message read out in EUI demo views. Feels out of scope for this PR, needs its own test and adjust effort.
• EuiSelectableTemplateSitewide
  Same updated announcement as EuiSelectableSearch
• EuiComboBox
  Combo box provides clear instructions. No change needed.
• EuiSuggest
  Refactored the aria-describedby to include a custom instruction concatenated with the loading status. Had to add this to the input b/c the custom listbox doesn't take focus.
• EuiSelectableSearch
  Refactored the aria-describedby to include a custom instruction. Had to add this to the input b/c the custom listbox doesn't take focus.
• EuiSuperSelect
  You are in a form selector and must select a single option.
  Use the Up and Down arrow keys to navigate or Escape to close.
• EuiRange/EuiDualRange with EuiInputPopover
  Range sliders are aria-hidden="true" so screen readers interact with the input[type="number"] only. Added a custom message for single and dual sliders in EuiPopover.
• EuiAutoRefresh
  Added the reset status message to popoverScreenReaderText which will announce when ownFocus={true}
• EuiContextMenu
  Announces the standard EuiPopover message for tabbable or non-tabbable content. Feels appropriate for this component.
• EuiSearchBar
  Uses the standard EuiFlyout instructions for tabbable, non-tabbable "Tags" flyouts. EuiSelectableSearch inside popover has aria-describedby instructions to use arrow keys.