id,summary,reporter,owner,description,type,status,priority,milestone,component,version,severity,resolution,keywords,cc,focuses 41286,Focus style and High Contrast Mode,afercia,afercia,"Noticed during work done on Gutenberg, thanks to Simply Accessible. See https://github.com/WordPress/gutenberg/issues/1562#issuecomment-313476750 Operating systems have a high contrast mode to switch to a few-colors/high contrast version of what's rendered on the screen. While this seems to not cause issues on macOS, it does on Windows High Contrast Mode. People with various vision issues use high contrast mode. People working in dark environments, for example TV production studios, often use it. Windows High Contrast Mode removes any CSS box-shadow. Most of the WordPress focus styles in the admin are built with multiple box-shadows. As a consequence, with Windows High Contrast Mode turned on, there's no focus indication at all. In order to be visible in High Contrast Mode, focus styles need to use an outline or a border. There are different techniques that work, they'd need to be tested across different platforms, browsers. etc. Also, WordPress sometimes makes use of the ""circular focus"" that would need some special treatment. Worth noting, on Windows the High Contrast Mode works well with just Internet Explorer and Edge. Chrome doesn't support it (it has a dedicated extension and alternative themes). Firefox supports it partially. It would be great to experiment new and improved focus styles. At the very least, the inner box-shadow could be replaced with an outline, that would probably change very little visually and allow focus to work in High Contrast Mode. However, there are pending tickets on Trac and ongoing discussions to experiment new focus styes. See for example #34957, #34904, and #28599. This could be a good opportunity to give some new traction to those tickets and improve the focus styles both visually and for accessibility. Screenshots in Microsoft Edge: Current (note: the ""Published"" link is focused): [[Image(https://cldup.com/rV8cVtW6ll.png)]] Native browser outline: [[Image(https://cldup.com/spJ88EG268.png)]] Testing a 1px solid outline: [[Image(https://cldup.com/-pFMs0tz_C.png)]] ",defect (bug),closed,normal,5.1,Administration,,normal,fixed,has-screenshots ui-feedback has-patch,,"ui, accessibility"