Skip to content

Improve keyboard UX for toggle replies widget

Coung Ngo requested to merge cngo-improve-toggle-replies-widget into master

What does this MR do and why?

This MR improves the keyboard UX for the toggle replies widget.

  • Makes the collapse and expand buttons tab-accessible
  • Improves focus management so when the replies are collapsed or expanded, focus moves back to the toggle button
  • Improves accessibility of the interactive elements
  • Fixes the focus ring of the avatar images
  • Removes the double bottom border when collapsed
  • Updates the background color to a Pajamas-compliant color

Changelog: fixed

Screenshots or screen recordings

before (notice how tabbing skips past the toggle buttons, and the offset focus rings for the avatars) after
Screen_Recording_2022-06-23_at_5.34.06_pm Screen_Recording_2022-06-23_at_5.36.43_pm

How to set up and validate locally

  1. Visit a merge request such as http://127.0.0.1:3000/h5bp/html5-boilerplate/-/merge_requests/1
  2. Reply to a comment and then interact with the toggle replies widget to test the MR

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Coung Ngo

Merge request reports