Add full keyboard interaction in new review request page
Review Request #10852 — Created Jan. 24, 2020 and updated — Latest diff uploaded
The new review request page before this change had a couple issues
when navigating the page through just the keyboard itself.
On Chrome for example, the user was able to tab through most input
fields exclusing the commitsView list and side bar. For Firefox,
and Safari, you could only tab through the repository filter search
bar, the select diff file, and branchesSelect view.Revamped the keyboard usability experience within the new review
request page so that the user can fully tab through the page going
forwards and can shift+tab backwards excluding the repository selection
side bar to be done in a future project. The user will first tab
through to the repository search field in the side bar, the RBTools tip,
the select file diff button, the branchesSelect view dropdown, and
finally the commitsView list where the user can navigate through each
commit using the up/down/tab keys. Press enter to open the dialog to
create a new review request.Note that you are unable to interact with the dialog if triggered by the
keyboard and currently the user can still tab through the commitsView
in the background even if the modal is open. A link is attached for
reference and will be fixed in a future request.
Manual tests:
- Full keyboard usability end to end from the repo search bar,
to RBTools tip, upload diff button, branchesView dropdown, and
finally to the commitsView on Chrome, Firefox, and Safari
- Tabbing in the commitsView, focusing on the correct commit
- Using the up/down arrow keys in the commitsView, focusing on
the correct commit
- Pressing the up key on the first commit brings focus back to the
branchesView
- A random combination of up/down/tab keys in commitsView,
move focus to an element outside the commitsView, and return focus
back to the first commit and all commits are navigated in order
with whatever up/down/tab key combination
- Shift+Tab full user flow starting from CommitsView going backwardsUnit Tests:
- All tests pass before these new changes and all tests still pass
after the addition of new tests
- Tabbing from the repo search bar in the side bar to RBTools tip link
- Tabbing from the RBTools tip to the upload diff button
- Tabbing from the upload diff button to branchesView
- Pressing the up key on the first commit brings focus back to the
branchesView
- Pressing the up/down arrow key presses within the commitsView making
sure we are on the correct commit
- Pressing the down/tab keys to get to the end of the commitsView list
making sure that focus is still within the view
- Shift+Tab for each element and that it can tab back to the previous
element