make dropdown arrow larger to meet accessibility requirement

[alanrenmsft]

this is a fix for microsoft/azuredatastudio#15767 in azure data studio, but I think this is also good for vscode.

before:

after:

[isidorn]

I like this change. Thanks for the PR @alanrenmsft 👏
However leaving up to @misolori to review if he would prefer that we change the color, and not to make it bold.
Both work for me.

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.

[miguelsolorio]

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.

[isidorn]

@misolori good point. That's why I mentioned above that a color change would make more sense. And not making everything bold.
I think we can customise these colors.

[miguelsolorio]

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

[miguelsolorio]

To me this feels like a discrepancy on the dropper inspector as all contrast tools ask for the hex colors, which do pass on our side:

[alanrenmsft]

@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?

[miguelsolorio]

Taking another look, when I use the dropper I'm still seeing different results:

How do we determine whether something passes when we all have different results?

[alanrenmsft]

@misolori are you zoomed in? on Windows (Light+ theme) I am getting the following and even the darkest dots are less than 3.1:1.

I compared the differences between the dropdown chevron and the other one to the right of it, the other one looks darker than it because it is slightly larger. I think instead of making the font bold, we should increase the size by 2px, from 14px to 16px, then the contrast ratio will be ok. what do you think?

before size increase:

after:

[miguelsolorio]

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.

[alanrenmsft]

@misolori I have updated the screenshots in the PR description.

[miguelsolorio]

This looks good to me, thanks for the update!

[alanrenmsft]

@misolori I don't have merge permission, I am afraid I will need your help to merge the PR.

[miguelsolorio]

Yes you do, I'll wait for @isidorn to do one last review before we merge since it also affects the debug drop down.

[miguelsolorio]

@isidorn is now out on vacation so I'll just go ahead and merge this.

[miguelsolorio]

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

[alanrenmsft]

@misolori thank you

[isidorn]

@misolori thanks for merging 👏
@alanrenmsft thanks for the PR 👏