[wp-trac] [WordPress Trac] #41286: Focus style and High Contrast Mode

[WordPress Trac]

#41286: Focus style and High Contrast Mode
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:
 Severity:  normal             |   Keywords:  has-screenshots
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 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)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41286>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform