Improve accessibility in the Browser Assistant popup (TAB key)

[contribucious]

💻 Browser Assistant 1.3.32 beta on Firefox 111.0.1.

:wave: Steps to reproduce

1. Go to either http://example.org or https://example.org;
2. Open the Browser Assistant popup;
3. Press TAB multiple times.

Actual behavior

• Correct on actions — focus style is different;
• IMHO, not correct on the toggle switch — focus style is not different.

Expected behavior

See this screenshot for a possible adequate focus style regarding the latter.

:eye: Like so we can see we are on it, just like what the AdGuard Browser extension does — or Firefox does.

[contribucious]

On the button itself in case it is focused (gray as an example only):

• border: 2px solid gray; → problematic — problem even more visible using 4px.
• box-shadow: 0 0 0 2px gray; → nice but bad accessibility without additional stuff.
• outline: gray solid 2px; → nice and good accessibility. ✔️

[contribucious]

🚀 Going further …

The situation when using the High contrast mode of Windows 10 can also clearly be improved IMHO.

🎥 View video (0:45)

https://user-images.githubusercontent.com/4764956/230705831-eb7e9c4f-14ad-4beb-addc-fe1271df70de.mp4

↬ As you can see, AdGuard Browser extension is quite good, unlike AdGuard Browser Assistant (toggle switches not visible — though both functional —, focus on the action entries not visible when using the TAB key¹, …). :relaxed:  

---

View dev notes …

 

¹ Easily fixable though, using the outline transparent trick (explained in text and in a short video):

Theme all normally (like currently + fix the toggle switches focus style) and simply add either:

• *[tabindex]:focus { outline: transparent dotted 2px; } ↪️ To have this: Edge video result — with the default high-contrasted theme.

• *[tabindex]:focus { outline: transparent solid 2px; } ↪️ To have that: Edge video result — with the same theme too (user's color preferences take precedence for a11y).

:bulb: Note that with this system, if the "high contrast mode" is not in use, nothing is altered (see the Edge video result). ✔️
Unlike if you choose to use globally "gray" instead of "transparent" (see this video then).

:bulb: You may want to use :focus-visible instead though, to theme only for keyboard (TAB) and not mouse (click).