search

AdguardTeam / BrowserAssistant

AdGuard Browser Assistant
https://adguard.com/en/adguard-assistant/overview.html
GNU Lesser General Public License v3.0
37 stars 5 forks source link

Improve accessibility in the Browser Assistant popup (TAB key) #98

Open contribucious opened 1 year ago

contribucious commented 1 year ago
💻 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

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 commented 1 year ago

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

contribucious commented 1 year ago

🚀 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](https://stackoverflow.com/questions/52589391/css-box-shadow-vs-outline/52616313#52616313) and in a [short video](https://www.youtube.com/watch?v=4B_4WLpbyp8)): 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](https://user-images.githubusercontent.com/4764956/230746722-93795963-1e2a-4176-875a-c43fe7792bf6.mp4) — with the [default high-contrasted](https://user-images.githubusercontent.com/4764956/230747148-7a2a14c4-192c-4a65-b56e-87e8276295df.png) theme. - `*[tabindex]:focus { outline: transparent solid 2px; }` ↪️ To have that: [Edge video result](https://user-images.githubusercontent.com/4764956/230746751-e6cbd846-6aa4-450a-b83f-28b59741ff68.mp4) — 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](https://user-images.githubusercontent.com/4764956/230746792-bafe664d-2915-4f9d-a761-98e31094e406.mp4)). ✔️
Unlike if you choose to use _globally_ "gray" instead of "transparent" (see [this video](https://user-images.githubusercontent.com/4764956/230747453-977ffa2d-9d49-49c3-a191-dd692e0ffaad.mp4) then). ###### :bulb: You may want to use [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) instead though, to theme only for keyboard (TAB) and not mouse (click).