New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
make dropdown arrow larger to meet accessibility requirement #127839
Conversation
I like this change. Thanks for the PR @alanrenmsft 👏 Assigning to July milestone since we are not wrapping up June. Miguel please merge once you are happy since in July I am on vacation. |
Hmm...personally not a fan of this change as that makes the drop down chevron a different stroke width to the rest of the chevrons used elsewhere, which is inconsistent. Not sure I follow the logic of making it bold, wouldn't that mean you'd need to make the text also bold? When inspecting with dev tools it tells me it passes the contrast ratio. |
@misolori good point. That's why I mentioned above that a color change would make more sense. And not making everything bold. |
Also worth noting that all of our icons are using the same color as the foreground, which already needs to pass a 4.5:1 contrast ratio for regular text. So I'm a little confused as to why our text passes but the icons don't pass (all icons are using the same stroke width and color). |
@isidorn @misolori below is the reply I got from the accessibility team, , this dropdown icon looks lighter because there are almost no straight lines and none of the dots get the full color. I agree there are for sure other icons with the same problem, maybe we should make the font weight for all codicons thicker? |
No zoom here, I'm on a Mac using the default light theme as well. Glad you spotted the font size difference, they should be the same (16px) so that's an easy enough change we can do that to increase it. |
@misolori I have updated the screenshots in the PR description. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@misolori I don't have merge permission, I am afraid I will need your help to merge the PR. |
Yes you do, I'll wait for @isidorn to do one last review before we merge since it also affects the debug drop down. |
@isidorn is now out on vacation so I'll just go ahead and merge this. |
For verification: use a color contrast tool and ensure the chevron (debug or output dropdown) meets the color contrast ratio of 3:1 or above |
@misolori thank you |
@misolori thanks for merging 👏 |
this is a fix for microsoft/azuredatastudio#15767 in azure data studio, but I think this is also good for vscode.
before:
after: