[wp-meta] [Making WordPress.org] #4111: Consider to audit the focus style across the .org network

[Making WordPress.org]

#4111: Consider to audit the focus style across the .org network
---------------------+--------------------
 Reporter:  afercia  |      Owner:  (none)
     Type:  defect   |     Status:  new
 Priority:  normal   |  Milestone:
Component:  General  |   Keywords:
---------------------+--------------------
 Keyboard users, or users who make a mixed use of a pointing device and
 keyboard, need to actually ''see'' where focus is to be able to navigate a
 web page using their keyboard.

 The focus style is a necessary indication for these users. Great care has
 been taken in WordPress core and the bundled themes to make the focus
 style as good as possible, and there's still work to do to improve it. It
 would be great to see also the .org network sites taking care of the focus
 style.

 For reference, this is also part of the WCAG recommendation:

 Success Criterion 2.4.7 Focus Visible
 https://www.w3.org/TR/WCAG21/#focus-visible

 While a complete analysis of all the links and controls across all the
 .org network would be impossible for me, I've taken the time to volunteer
 and analyze the focus style only on the main navigation menu in the main
 .org sections.

 To recap:
 - Home: has focus style (browser native style)
 - Showcase: no focus style `outline: none;`
 - Themes: has focus style `outline: thin dotted;`
 - Plugins: has focus style `outline: thin dotted;`
 - Mobile: has focus style (browser native style)
 - Support: has focus style `outline: thin dotted;`
 - Get involved (Make): has focus style (browser native style)
 - About: has focus style `outline: thin dotted;`
 - Blog: has focus style (browser native style)
 - Hosting: has focus style (browser native style)

 Suggested:
 - never reset the native outline style, unless that's meant to provide a
 better, improved focus style
 - use a consistent style across all the pages: worth reminding the
 browsers native focus style greatly varies across operating systems and
 browsers
 - buttons, form elements, and custom interactive elements need a focus
 style as well
 - use a style that is compatible with Windows High Contrast mode, or
 provide one specifically for Windows High Contrast mode

 Note: in Windows High Contrast mode, basically only `outline` and `border`
 work. In core, https://core.trac.wordpress.org/ticket/41286 introduced a
 specific style that uses a transparent outline, as already done for the
 new block editor Gutenberg.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/4111>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org