search

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
274 stars 63 forks source link

A11y Bug Fix: Screenreader Announcement on `Clear All Data` #959

Closed ABradham closed 1 year ago

ABradham commented 1 year ago

Fixed an accessibility bug where screen readers wouldn't report that all users had been cleared from the table after the Clear All Data button on the Authentication screen was pressed.

Fixed by adding a visually hidden aria alert that notifies screen readers without changing the UI.

This change also required the addition of a new field to the AuthState redux store.

ABradham commented 1 year ago

Added alertText field to redux store and refactored UsersCleared component to fetch props directly from store (no passing down props from parent component or conditional rendering from parent component). This pattern seems extensible to other alerts; It might make sense to rename the component from UsersCleared to UserAlerts so that other actions that should notify screen readers (creating users, fetching data from the store, starting the emulator, etc.) can take advantage of this component / pattern as well.