SVI/netbird
1
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-06-11 09:52:11 -04:00
Code Issues 3.0k Packages Projects Releases 10 Wiki Activity

Tray icon accessibility issues #1618

New Issue
Closed
opened 2025-11-20 05:34:03 -05:00 by saavagebueno · 6 comments
saavagebueno commented 2025-11-20 05:34:03 -05:00
Owner
Copy Link

Originally created by @karsa-mistmere on GitHub (Feb 12, 2025).

Describe the problem

WCAG2.1 1.4.1 dictates that color should not be the only way to distinguish function, currently though, Netbird UI uses tray icons that fail this criterion:

Image

Not only that, but at this size, the little cloud with an arrow is completely illegible (and also fails WCAG2.1 1.4.3).

Expected behavior

Connection status should be clearly visible, so I propose to update the tray icons to be more accessible and much more legible at this size. For best contrast, dark and light mode should use different icons.

Image

Should light/dark mode support not be possible to implement, it would be best to go with colors that have the highest possible contrast on both light and dark backgrounds, e.g.:

Image

Here are all the icons as a Figma file:
https://www.figma.com/design/Au3gz9n78Co8qu0Q2vJjUy/netbird%2Ftray-icon-a11y?node-id=0-1&t=s1GULJKMKUCYFnrT-1

Originally created by @karsa-mistmere on GitHub (Feb 12, 2025). **Describe the problem** [WCAG2.1 1.4.1](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) dictates that color should not be the only way to distinguish function, currently though, Netbird UI uses tray icons that fail this criterion: ![Image](https://github.com/user-attachments/assets/4f38fcc1-275c-4227-b90b-daf6e2a75df5) Not only that, but at this size, the little cloud with an arrow is completely illegible (and also fails [WCAG2.1 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)). **Expected behavior** Connection status should be clearly visible, so I propose to update the tray icons to be more accessible and much more legible at this size. For best contrast, dark and light mode should use different icons. ![Image](https://github.com/user-attachments/assets/1d9cbd9b-3edc-46ce-8849-fdfd652886e7) Should light/dark mode support not be possible to implement, it would be best to go with colors that have the highest possible contrast on both light and dark backgrounds, e.g.: ![Image](https://github.com/user-attachments/assets/2128bb54-c84d-4f77-806a-b12a4415274c) Here are all the icons as a Figma file: https://www.figma.com/design/Au3gz9n78Co8qu0Q2vJjUy/netbird%2Ftray-icon-a11y?node-id=0-1&t=s1GULJKMKUCYFnrT-1
saavagebueno added the enhancementclient-uigui labels 2025-11-20 05:34:03 -05:00
saavagebueno commented 2025-11-20 06:03:34 -05:00
Author
Owner
Copy Link

@braginini commented on GitHub (Feb 12, 2025):

Amazing job @karsa-mistmere
Thank you so much for this contribution.
@heisbrot what do you think?
@hakansa @mlsmaycon can we put this to work?

@braginini commented on GitHub (Feb 12, 2025): Amazing job @karsa-mistmere Thank you so much for this contribution. @heisbrot what do you think? @hakansa @mlsmaycon can we put this to work?
saavagebueno commented 2025-11-20 06:03:34 -05:00
Author
Owner
Copy Link

@mlsmaycon commented on GitHub (Feb 12, 2025):

That's awesome, @karsa-mistmere; thanks for the contribution. I have a question; we plan to add a connecting state to the tray icon that should indicate the state where there is no connection to the management services to when it has. With WCAG2.1 1.4.1, do you have a recommendation on how to approach it?

@mlsmaycon commented on GitHub (Feb 12, 2025): That's awesome, @karsa-mistmere; thanks for the contribution. I have a question; we plan to add a connecting state to the tray icon that should indicate the state where there is no connection to the management services to when it has. With WCAG2.1 1.4.1, do you have a recommendation on how to approach it?
saavagebueno commented 2025-11-20 06:03:34 -05:00
Author
Owner
Copy Link

@karsa-mistmere commented on GitHub (Feb 12, 2025):

That's awesome, @karsa-mistmere; thanks for the contribution. I have a question; we plan to add a connecting state to the tray icon that should indicate the state where there is no connection to the management services to when it has. With WCAG2.1 1.4.1, do you have a recommendation on how to approach it?

If an animated icon is possible, I'd do something like this:
https://jsfiddle.net/b4m0k52r/

If not, the same thing as a static image would still work, I think, and something like this for an error status, should that be needed:

Image

I've updated the Figma file with these.

@karsa-mistmere commented on GitHub (Feb 12, 2025): > That's awesome, [@karsa-mistmere](https://github.com/karsa-mistmere); thanks for the contribution. I have a question; we plan to add a connecting state to the tray icon that should indicate the state where there is no connection to the management services to when it has. With WCAG2.1 1.4.1, do you have a recommendation on how to approach it? If an animated icon is possible, I'd do something like this: https://jsfiddle.net/b4m0k52r/ If not, the same thing as a static image would still work, I think, and something like this for an error status, should that be needed: ![Image](https://github.com/user-attachments/assets/1d2f97c5-307a-4b8c-b266-5bb1d08f3667) I've updated the Figma file with these.
saavagebueno commented 2025-11-20 06:03:34 -05:00
Author
Owner
Copy Link

@mlsmaycon commented on GitHub (Feb 13, 2025):

Thanks, @karsa-mistmere; we will be working on the new icons soon. We would like to chat with you. Would you join our community slack and reach out?

@mlsmaycon commented on GitHub (Feb 13, 2025): Thanks, @karsa-mistmere; we will be working on the new icons soon. We would like to chat with you. Would you join our community slack and reach out?
saavagebueno commented 2025-11-20 06:03:34 -05:00
Author
Owner
Copy Link

@karsa-mistmere commented on GitHub (Feb 13, 2025):

Thanks, @karsa-mistmere; we will be working on the new icons soon. We would like to chat with you. Would you join our community slack and reach out?

I've joined.

Something else: I know some people have been asking for monochrome tray icons (#2095 & #1876), here's are two takes on what that could look like:

Image

Image

(They probably go against some brand guideline, but it was fun to do nonetheless.)

@karsa-mistmere commented on GitHub (Feb 13, 2025): > Thanks, [@karsa-mistmere](https://github.com/karsa-mistmere); we will be working on the new icons soon. We would like to chat with you. Would you join our community slack and reach out? I've joined. --- Something else: I know some people have been asking for monochrome tray icons (#2095 & #1876), here's are two takes on what that could look like: ![Image](https://github.com/user-attachments/assets/2358652a-8cd7-4fa1-a68a-41ed19e8ab5a) ![Image](https://github.com/user-attachments/assets/1b246b45-0fec-4388-9af5-e7285bf2f1af) (They probably go against some brand guideline, but it was fun to do nonetheless.)
saavagebueno commented 2025-11-20 06:03:34 -05:00
Author
Owner
Copy Link

@hakansa commented on GitHub (Feb 14, 2025):

@karsa-mistmere thanks for amazing work! I created the PR https://github.com/netbirdio/netbird/pull/3322 to update systray icons.

/cc @braginini @mlsmaycon

@hakansa commented on GitHub (Feb 14, 2025): @karsa-mistmere thanks for amazing work! I created the PR https://github.com/netbirdio/netbird/pull/3322 to update systray icons. /cc @braginini @mlsmaycon
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
2021 Q4
2022 Q1
2022 Q1
accessibility
acl
agent
agent
Android
Android
api
authentik
automation
azure
battery-usage
bug
cache
client
client-ui
cloud
cloud-only
cloudflare
community
compatibility
config-idp
config-issue
connection
contribution
coturn
cross-vpn
dashboard
data-usage
distribution
dns
docker
documentation
duplicate
enhancement
enhancement
event-stream
feature-request
freebsd
getting-started
go
good first issue
gui
help wanted
home-assistant
idp
inconsistency
integration
integrations
ios
ipv6
jwt
k8s
keycloak
linux
login
macos
management-service
missing-docs
mobile
moved-internal
needs-review
netbird-ui
networking
new-platform
nginx
notification
okta
openwrt
packaging
peer-management
peer-management
peer-management
performance
postgres
posture-checks
psk
pull-request
Mirrored from GitHub Pull Request
 question
refactor
relay
release
rfc
routes
security
security-related
self-hosting
server
signal
sleep-issue
ssh
ssl
status
store
synology
system-compatibility-issue
test-suite
third-party-integration
triage
triage-needed
troubleshooting
UX
waiting-feedback
windows
wontfix
zitadel
No Label client-ui enhancement gui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/netbird#1618
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?