• 
      

    Make collapse diff buttons keyboard accessible

    Review Request #10925 — Created Feb. 27, 2020 and updated — Latest diff uploaded

    Information

    Review Board
    master
    8679dc4...

    Reviewers

    Previously, the collapse diff button on reviewable diffs and diffs in
    comment fragments could not be used with the keyboard as shown in the
    attached video collapse-btn-old.mov, unlike the expand diff button. This
    review request makes the collapse diff button keyboard accessible. The new
    behavior is documented in the attached video collapse-btn-new.mov. There
    is also a side-by-side screenshot comparison of the old and new button.

    The collapse button used to be a <div>, which is not focusable by
    default. The fix is to change the <div> to an <a>, which made the button
    focusable but did not invoke the collapse diff action. (Using an <a> is
    consistent with the expand diff button.) By adding the href=# attribute,
    both clicking on the element and using the enter key while the element is
    focused invokes the click handler to collapse the diff.

    Manual testing on reviewable diffs and comment fragment diffs:
    - used tab & shift+tab to check the collapse diff button can be tabbed to
    - used enter key to invoke the collapse diff action and re-expand diff
    using only the keyboard