[a11y] 11.2.4.3 Focus order

[tschiebel]

audit: https://infinite.owncloud.com/s/QtwuiGHikwFjozV

https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf
https://github.com/BIK-BITV/BIK-App-Test/tree/main/Pr%C3%BCfschritte/de

Personal Space and Menu

• If the keyboard focus is in the "Browse folder" input field, you can no longer navigate to the "Menu" button by pressing the back Tab key (Shift + Tab).

Menu

• If you change the view of the menu using the keyboard and then press ENTER the sorting menu is opened. This indicates that the sort button in the background has received the keyboard focus. The keyboard focus should remain in the menu until the menu is closed. However, it is not currently possible to close the menu using the keyboard. There is neither a close button, nor did the usual keyboard shortcuts work in the test.
  

Edit shared Link

• Both the "Expiry date" label and the date can be focused and activated using the keyboard, as a date picker element is opened. This could confuse users, as the two elements cannot be recognizable as buttons. It would be better to provide a separate button for opening the datepicker element to increase user-friendliness and avoid misunderstandings.
  

Manage accounts

• Remark: if the "Account" button is in focus (see screenshot) and is activated, the user returns to the previous page. This is unexpected and should be avoided.
  

Image Viewer

• Note: pressing the TAB key or the arrow keys loads new images. This could confuse some users.

[jesmrec]

Include #4366 and #4367

[JuancaG05]

Toolbar was not accessible via hardware keyboard before addressing this issue.

The proposal for a new keyboard navigation model, remains as follows:

• If focus is inside the toolbar, by pressing the Tab key, the focus will move to the next focusable element inside the toolbar, and when getting to the last one, by pressing Tab again, focus will move to the first focusable element inside the toolbar, starting again from the beginning
• If focus is inside the rest of the view (not toolbar), by pressing the Tab key, the focus will move to the next focusable element inside the rest of the view, until getting to the last one (including bottom bar)
• If focus is inside the toolbar, by pressing the ↓ key, the focus will move to the first focusable element inside the rest of the view (not toolbar)
• If focus is in the first focusable element in the rest of the view (not toolbar), by pressing the ↑ key, the focus will move to the first focusable element inside the toolbar

This way, we isolate the toolbar (which is more transversal and general) from the rest of the view and we provide an intuitive way of navigating through all the UI elements, which weren't accessible previously.

The reason to make it like this is because the app toolbar has some technical complexity right now (we have to deal with 2 different toolbars: root toolbar, which appears in the root view of the sections and includes the avatar, and standard toolbar, which appears in the rest of views and includes the menu options with 3-dot menu if necessary), which hopefully will disappear when we move everything from XML to Compose.

[JuancaG05]

• If the keyboard focus is in the "Browse folder" input field, you can no longer navigate to the "Menu" button by pressing the back Tab key (Shift + Tab).

Since the new navigation model (explained in previous comment) provides a looping navigation inside the toolbar, it is now possible to get to the menu button by pressing Tab several times until getting there, or by pressing Tab once, which moves the focus to the X button to close the search view, pressing it, and start navigating the toolbar again with Tab. Going backwards with Tab + Shift is not possible due to a restriction in the EditText component, but we can get to the objective button as explained previously by pressing a couple more times the Tab key.

[JuancaG05]

• If you change the view of the menu using the keyboard and then press ENTER the sorting menu is opened. This indicates that the sort button in the background has received the keyboard focus. The keyboard focus should remain in the menu until the menu is closed. However, it is not currently possible to close the menu using the keyboard. There is neither a close button, nor did the usual keyboard shortcuts work in the test.
  

Now, the focus is moved to the first focusable element of the menu when opening it using the keyboard, instead of remaining in the background (such as in the sort button). In any case, the menu can be closed with the Esc key, but this is something that was already implemented.

[JuancaG05]

• Both the "Expiry date" label and the date can be focused and activated using the keyboard, as a date picker element is opened. This could confuse users, as the two elements cannot be recognizable as buttons. It would be better to provide a separate button for opening the datepicker element to increase user-friendliness and avoid misunderstandings.
  

These elements are not focusable anymore, so that when using the app with keyboard, to set a new expiration date, user needs to disable the switch and enable it again so that date picker appears, providing a more intuitive behaviour. However, in touch mode, these elements will continue being clickable, so that we don't remove functionality from the app.

[JuancaG05]

• Remark: if the "Account" button is in focus (see screenshot) and is activated, the user returns to the previous page. This is unexpected and should be avoided.
  

That was the expected behaviour. In any case, the "Manage accounts" view is now in a dialog, which makes it more intuitive to close the dialog when user selects the same account where they already are, since there's no action to do.

[JuancaG05]

• Note: pressing the TAB key or the arrow keys loads new images. This could confuse some users.

The Tab key in an image preview has no effect. The arrow keys (left and right) do have, but it's the way users have to move to the previous or next image in that same folder with the keyboard, corresponding with the swipe gesture we provide in touch mode. This note conflicts with #4370, which was also solved by giving the carousel the possibility to move among images in the same folder with the arrow keys.

Update: Tab is now used for the toolbar to appear in image previews, as explained in #4366 (comment).