Background: The watchlist popup’s element isn’t added right after the star icon (in the DOM of the page). This means that there are several elements that the user has to tab through (in 5 seconds) to be able to reach the dropdown. This is not good for keyboard accessibility.
My first thought was that we should treat the popup as a non-modal dialog or alert. This meant we would move the focus to it as soon as the popup appears on the screen. But, this would mean that we wont close the popup till it has focus. And so, unless the user tabbed out of it, the popup would always be visible. This isn’t what we want.
It seems what we are looking for is the status role. Unlike dialogs, statuses need not be given focus, and since they inherit the aria-live and aria-flowto (see guideline) role the screen readers announce their presence to the user regardless of focus. We will however need to make sure to add aria-controls to the star and point it to the popup so that the users know that those two are related.
Acceptance Criteria:
- The popup needs to have the role of “status ”
- The star icon needs to have an aria-control attribute that points to the popup