Make collapse diff buttons keyboard accessible
Review Request #10925 — Created Feb. 27, 2020 and updated — Latest diff uploaded
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 videocollapse-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 videocollapse-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 thehref=#attribute,
both clicking on the element and using the enter key while the element is
focused invokes theclickhandler 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