[Bug][a11y]: Opening the preference modal using keyboard navigation gives no feedback

[mrleblanc101]

Expected Behavior

When you open the preference modal, the focus should be transfered to the modal so that the screen reader actually says something.

Current Behavior

The focus stays on the button and nothing is said by the screen reader.

Steps to reproduce

1. Activate VoiceOver,
2. Tab inside the popup until you focus the "Manage preference" button
3. Press enter to open the preference modal

Proposed fix or additional info.

No response

Version

3.0.1

On which browser do you see the issue?

Firefox, Chrome, Safari, Microsoft Edge

[wittjeff]

The dialog won't be announced unless focus is moved to it or into it. The most common convention is to put focus on the first focusable item, which is generally the Close button.

When the dialog is closed, focus should return to the triggering element. Currently that happens when you press Esc to dismiss the dialog, but not when you click on the X/close button. I mention this requirement here because you'll need to save the item that has focus (document.activeElement) before setting the focus to the Close button when the Preferences dialog appears.

[mrleblanc101]

Focusing the first element (the close button) is not a11y compliment. The user will have no way of understanding what is happening as the screen reader will simply read "Close modal" or something similar. The focus should be on the whole banner so that screen reader start ready the content.