Improve accessibility in the Browser Assistant popup (TAB key)

[contribucious]

💻 Browser Assistant 1.3.32 beta on Firefox 111.0.1.

👋 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.

👁️ 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)

Carnac_0pJboDR3LV.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¹, …). ☺️
 

---

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).

💡 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).

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