firebase / firebase-tools-ui

A local-first UI for Firebase Emulator Suite.
https://firebase.googleblog.com/2020/05/local-firebase-emulator-ui.html
Apache License 2.0
262 stars 60 forks source link

fix(a11y) Make RTDB buttons accessible by keyboard #886

Closed TheIronDev closed 1 year ago

TheIronDev commented 1 year ago

This commit fixes an issue where there were multiple buttons were inaccessible using only keyboard.

Two main problems caused this:

  1. Relying on :hover to change behavior is never accessible
  2. Toggling the action buttons using display: none removes the ability to focus on them.

The simplest "fix" was using opacity:0 and opacity: 100% to control if the icon buttons are visible. This way, a keyboard user can tab through the buttons... they would just be invisible.

The next fix was to use the &:has(:focus) .NodeActions to grant visibility to the buttons if there is any focus inside of the .NodeParent.

FIXED=259452291, 259452367, 259452413