Adds visible focus indicator for app bar. Internal bug: b/277818573
The app bar's background color is #0C2D48. The focused tab color is #746EA1. The color contrast is 3.02.
Disclaimer: This was the best fix I could find but is not necessarily ideal. I'd appreciate feedback on this change, but may need pointers on how to wrangle the components.
With this change, the focus indicator is now present for keyboard and mouse users. However, the active tab's background is focused even after clicking, because the class ".mdc-ripple-upgraded--background-focused" remains on the clicked element. From what I could tell, the ripple effect was disabled to prevent that from happening, but it also removed visible focus indicators on the app bar altogether.
Regarding an accessibility issue in RMWC
Looking into this bug also made it apparent that we shouldn't use RMWC's Tabs because it creates a confusing experience for people using screen readers. Specifically, it changes tabindex's to -1 when you select away from tabs. For instance, say that you have 3 buttons "Cookies", "Pizza" and "Chocolate". The following would occur:
After the above interactions with the page, a screen reader user wouldn't be able to use the keyboard to get to the "Pizza" and "Chocolate" tabs. You can see this example by interacting with their docs page https://rmwc.io/tabs.
Screenshots and images demonstrating the changes from this PR:
go/firebase-tools-ui-968-after-refresh - What the app bar looks like immediately after refresh. Note that the active tab's background is focused by default.
go/firebase-tools-ui-968-after-refresh-and-unfocus-tab - What the app bar looks like after refresh and then clicking on some other part of the page to unfocus from the tab. Note that clicking back on the "Overview" tab focuses it again and re-highlights it.
go/firebase-tools-ui-968-rmwc-bug - An example of how the RMWC bug impacts the accessibility of the app bar. Notice that after selecting the "Realtime Database" tab and the "Extensions" tab, navigating through all the app bar starting from the "Overview" tab will skip past the previously selected tabs.
Shout out to maneesht for debugging this one with me; couldn't have gotten to this state w/o his help
Adds visible focus indicator for app bar. Internal bug: b/277818573
The app bar's background color is #0C2D48. The focused tab color is #746EA1. The color contrast is 3.02.
Disclaimer: This was the best fix I could find but is not necessarily ideal. I'd appreciate feedback on this change, but may need pointers on how to wrangle the components.
With this change, the focus indicator is now present for keyboard and mouse users. However, the active tab's background is focused even after clicking, because the class ".mdc-ripple-upgraded--background-focused" remains on the clicked element. From what I could tell, the ripple effect was disabled to prevent that from happening, but it also removed visible focus indicators on the app bar altogether.
Regarding an accessibility issue in RMWC
Looking into this bug also made it apparent that we shouldn't use RMWC's Tabs because it creates a confusing experience for people using screen readers. Specifically, it changes tabindex's to -1 when you select away from tabs. For instance, say that you have 3 buttons "Cookies", "Pizza" and "Chocolate". The following would occur:
Default state: "Cookies" tabindex=0, "Pizza" (unset tabindex), "Chocolate" (unset tabindex) After selecting "Pizza" tab: "Cookies" tabindex=-1, "Pizza" tabindex=0, "Chocolate" (unset tabindex) Then selecting "Chocolate" tab: "Cookies" tabindex=-1, "Pizza" tabindex=-1, "Chocolate" tabindex=0 Then selecting "Cookies" tab: "Cookies" tabindex=0, "Pizza" tabindex=-1, "Chocolate" tabindex=-1
After the above interactions with the page, a screen reader user wouldn't be able to use the keyboard to get to the "Pizza" and "Chocolate" tabs. You can see this example by interacting with their docs page https://rmwc.io/tabs.
Screenshots and images demonstrating the changes from this PR:
Shout out to maneesht for debugging this one with me; couldn't have gotten to this state w/o his help