1781088 - Improve accessibility by adding roles and alternate means of navigation to Feature Callout surface

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Meg Viar [:mviar]]

Notes from design: "The recommendation is to have the tour in focus by default , implementation like a dialog (appropriate handling of focus, a11y roles, labelling, etc.). However, the user can optionally press f6 to move focus to and thus interact with the rest of the browser, returning to the tour again by pressing f6. (F6 is the command for moving between major panels in Firefox and other UIs.) Some keyboard users will not be familiar with this f6 pattern and many screen reader users may not realize they can "escape" the dialog at all without dismissing it. Those less experienced users may just choose to move through the tour or dismiss it."

Comment 1

[Meg Viar [:mviar]]

Confirm whether "dismiss" button should be 3rd item focused on tab, after primary CTA. Typically, tab order should go right to left and top to bottom (for LTR languages).

Comment 2

[Meg Viar [:mviar]]

Confirmed we do not want to break expected tab order flow and can focus the panel first, then dismiss, then primary cta.

Comment 3

[Meg Viar [:mviar]]

After further discussion with @Jteh, this is not an appropriate use case for the F6 pattern. They flagged that this is a very difficult UI to make accessible; there isn't an established pattern for this design. We'll likely need to iterate on our efforts to make it fully accessible.

• When moving to a new screen, the callout should be focused and the element should be appended to the parent element in the DOM.  "If the tour absolutely needs to be appended to the end of the DOM (rather than putting it after the callout in the DOM), we use aria-owns to ensure the tour is positioned after the callout. This means that each callout will need a container on which we can set aria-owns. For example, <div aria-owns="callout1 tour"><button id="callout1">Some callout</button></div> ... Lots of other stuff ... <div id="tour"> ... </div>.
• The callout tour has role="alert" so that each piece of the tour is read automatically. However, because it's positioned correctly in the a11y tree, the user can also move down to it if they wish to review it.
• The tour has the help text associated with aria-describedby. For example:

<div id="tour" role="alert" aria-describedby="tourText">
   <div id="tourText">This is a doodad that does something awesome.</div>
   <button accesskey="n">Next</button>
</div>

• The next and dismiss buttons have access keys. Some (but not all) screen readers will read these when the alert is reported. This allows a user to press next or dismiss without having to even find the alert.

Comment 4

[Meg Viar [:mviar]]

Attachment: Bug 1781088 - Improve accessibility by adding roles and alternate means of navigation to Feature Callout surface

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2e07ab0665e6
Improve accessibility by adding roles and alternate means of navigation to Feature Callout surface r=Mardak

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/2e07ab0665e6

Comment 7

[Cristian Tuns]

Backed out for causing conflicts on backout of Bug 1781084

• Backout link

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/14325f913401
Improve accessibility by adding roles and alternate means of navigation to Feature Callout surface r=Mardak