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


    Loading...