[wp-trac] [WordPress Trac] #47153: Field boundaries have insufficient color contrast

[WordPress Trac]

#47153: Field boundaries have insufficient color contrast
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  closed
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  minor                                |  Resolution:  fixed
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  color-contrast form-controls has-patch         |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 Re: the select elements: looks like `min-height` doesn't work well with
 Firefox. It probably needs to use some combination of padding and line-
 height instead. /Cc @kjellr

 Other (proprietary) selectors to target custom browsers UI will need to be
 used, e.g.:

 {{{
 select:-moz-focusring
 select::-ms-value
 select::-ms-expand
 }}}


 As a source of inspiration for cross-browser styled selects, see below.
 Though the implementation is slightly different, some of the CSS rules
 used in these examples might greatly help:

 Scott O'Hara Styled Selects
 https://scottaohara.github.io/a11y_styled_form_controls/src/select/
 https://github.com/scottaohara/a11y_styled_form_controls/blob/master/src/assets/css/select.css

 Yoast styled select
 https://github.com/Yoast/wordpress-
 seo/blob/304116593abb8a06f74b9c8ae20f55ec8c689ba8/css/src/yst_plugin_tools.scss#L773

 both inspired by:

 Scott Jehl
 Styling a Select Like It’s 2019
 https://www.filamentgroup.com/lab/select-css.html

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