Improve keyboard UX for toggle replies widget
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
- Visit a merge request such as
http://127.0.0.1:3000/h5bp/html5-boilerplate/-/merge_requests/1
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Coung Ngo