[wp-trac] [WordPress Trac] #60334: Twenty Twenty-Four: Focus outline is insufficient

[WordPress Trac]

#60334: Twenty Twenty-Four: Focus outline is insufficient
---------------------------+------------------------------
 Reporter:  poena          |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  6.4
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  accessibility
---------------------------+------------------------------
Description changed by poena:

Old description:

> This was reported by @alh0319 in
> https://github.com/WordPress/twentytwentyfour/issues/744
> I have copied and pasted the text from the issue:
>

> The current focus outline is 1px dotted. This would be hard for people
> with low-vision to see and is a failure of WCAG 2.4.7:
> Focus Visible (Level AA).
>
> The focus outline needs to be 2px solid.

New description:

 This was reported by @alh0319 in
 https://github.com/WordPress/twentytwentyfour/issues/744
 I have copied and pasted the text from the issue.

 Relevant code:
 [https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentytwentyfour/theme.json#L800 theme.json#L800]


 {{{
                 "elements": {
                         "button": {
                                 ":active": {
                                         "color": {
                                                 "background": "var(--wp--
 preset--color--contrast)",
                                                 "text": "var(--wp--preset
 --color--base)"
                                         }
                                 },
                                 ":focus": {
                                         "color": {
                                                 "background": "var(--wp--
 preset--color--contrast-2)",
                                                 "text": "var(--wp--preset
 --color--base)"
                                         },
                                         "outline": {
                                                 "color": "var(--wp--preset
 --color--contrast)",
                                                 "offset": "2px",
                                                 "style": "dotted",
                                                 "width": "1px"
                                         },
                                         "border": {
                                                 "color": "var(--wp--preset
 --color--contrast-2)"
                                         }
                                 },

 }}}



 The current focus outline is 1px dotted. This would be hard for people
 with low-vision to see and is a failure of WCAG 2.4.7:
 Focus Visible (Level AA).

 The focus outline needs to be 2px solid.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60334#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform