• 
      

    Add full keyboard interaction in new review request page

    Review Request #10852 — Created Jan. 24, 2020 and updated — Latest diff uploaded

    Information

    Review Board
    master
    dd35797...

    Reviewers

    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 backwards

    Unit 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