1483577 - [tour] Ensure hidden elements cannot get focus while on tour

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, enhancement, P2)

Description

[Axel Hecht [:Pike]]

While going through the tour on stage, I decided to check if there's keyboard navigation, so I started hitting enter and tab in various combinations.

You can get the tour into very funny states with that.

We should make sure that the hidden pontoon UI doesn't get keyboard focus and input and tries to react to it.

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1060

Comment 2

[[DEACTIVATED] Adrian Gaudebert]

I think this is not the correct way to phrase this issue. The actual problem here is one of accessibility more than possible breakage of the app. Anyone randomly hitting keys on their keyboard will get in a funny state in most website as far as I know. However, it is true that in its current state, the tour is not accessible, since a screen reader will read and focus on many hidden UI elements before getting to the tour elements. I believe that is the important thing to solve. And I think it's a bit more difficult than just preventing the tab key to have effect while the tour is active. 

Note that I am not confident this is something we want to actually solve now. I have no idea how accessible the current Translate app is. I'm making efforts to make it good with Translate.Next, so maybe if this is a too big effort, we should not fix this issue and ensure it works correctly with the next version of the Translate app?

Comment 3

[Matjaz Horvat [:mathjazz]]

Axel, thoughts?

Comment 4

[Axel Hecht [:Pike]]

Attachment: Screenshot_2018-08-21 Tutorial · German (de).png

Comment 5

[Axel Hecht [:Pike]]

In the screenshot above, you notice that there's some sort of error message showing up visually. "Forbidden page body {back..." in the lower left corner.

I don't think those errors have something to do with a11y. That said, I do think that having a good a11y story for pontoon would be nice.

Comment 6

[Matjaz Horvat [:mathjazz]]

Steps to reproduce the bug in the attachment:

1. Go to any translate page, e.g.:
https://mozilla-pontoon-staging.herokuapp.com/sl/firefox/browser/branding/official/brand.dtd/?string=74127

2. Make sure you're logged out.

3. Press Tab 3 times to focus the translation field.

4. Press Enter to submit translation.

Comment 7

[[DEACTIVATED] Adrian Gaudebert]

After discussing this in our weekly meeting today, I propose we split this into two issues. The underlying issue that we can see in Axel's screenshot will be covered in bug 1490026.

This bug should focus on making sure that, while the tour is active, hidden elements of the page cannot receive the focus. Only the tour elements themselves, and the elements being shown, should be able to receive focus through keyboard navigation.

Comment 8

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1094

Comment 9

[[github robot]]

Commit pushed to master at https://github.com/mozilla/pontoon

https://github.com/mozilla/pontoon/commit/75ef4e9649fd8eb2f88532a98ed69587abe4623d
Fix bug 1483577: Remove keydown events in tour (#1094)