a11y: add border to home-page buttons #2995
Conversation
|
I'd especially like @DesignPolice to weigh in here; is this a good solution? |
|
Hey Ben, I looked at this a few weeks ago, I guess the #'s got mixed up, anyway... I don't have really strong opinions, I think it needs to be easy and not break a bunch of existing things. I looked at the Dark Mode buttons in Fluent, they don't have a High Contrast version released yet. Here is what I did for the three options. We can discuss based on the amount of work it would require. Figma link to my version: Screen grab of mentioned Bostian Figma link
|
I saw that, but the problem is that there's no supported standard for a browser to actually detect high-contrast mode and keep the colors in place. Edge has a special extension for it, but that's it; any solution using that extension would only ever work in Edge under Windows. Since we can't control what the colors do in high-contrast mode (or even detect if high-contrast mode is on or off), we need a solution involving shapes instead. |
|
Ah okay - no worries, well then if we can get some outlines, and some way to distinguish focus and things we can go with that. No worries this close to a launch. Thanks Ben |
|
|
|
alright well, if that is how it looks on the other buttons lets just go with that... I can see a visual pass of the different modes in my future... but if this will make our a11y peeps happy then I can live with it as well. |
|
Note: those failing checks are a known security issue in lodash and nothing to do with this particular change. |
Co-authored-by: Andy Brown <asbrown002@gmail.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
Description
Adding a single-pixel border around the buttons on the home page makes them distinctive objects on the home page. We can't control what colors things turn in HC mode (at least not in a cross-browser way), so this seems like the next best solution.
Task Item
closes #2127
Screenshots