[wp-trac] [WordPress Trac] #46976: Twenty Nineteen: remove postcss-focus-within

[WordPress Trac]

#46976: Twenty Nineteen: remove postcss-focus-within
---------------------------+-----------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  5.0
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 Maybe I'm missing something but seems to me
 [https://github.com/jonathantneal/postcss-focus-within postcss-focus-
 within] added in https://github.com/WordPress/twentynineteen/pull/392
 doesn't do anything.

 It's supposed to be used together with its companion
 [https://github.com/jonathantneal/focus-within focus-within JS polyfill]
 which is not used in the theme.

 It is supposed to work this way:
 - `postcss-focus-within` processes the CSS and duplicates all the `:focus-
 within` rules with rules that use a `[focus-within]` attribute selector
 - `focus-within` adds the `[focus-within]` data-attribute in the DOM

 As Twenty Nineteen doesn't use `focus-within`, there are no `[focus-
 within]` data-attributes in the DOM.

 However, all the related CSS rules are in the stylesheet and appear to be
 unnecessary.

 Worth noting that to make the nav menu work in IE 11, a custom solution
 has been implemented in `touch-keyboard-navigation.js` which uses an `is-
 focused` CSS class.

 Also, ideally the `is-focused` CSS class should be added in the DOM only
 for browsers that don't support `:focus-within`.

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