[wp-trac] [WordPress Trac] #47477: Open Content overflows and is cut off at 200% text enlarge

[WordPress Trac]

#47477: Open Content overflows and is cut off at 200% text enlarge
---------------------------+---------------------------------------------
 Reporter:  kjellr         |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  5.3
Component:  General        |    Version:
 Severity:  normal         |   Keywords:  has-screenshots wpcampus-report
  Focuses:  accessibility  |
---------------------------+---------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see
 https://github.com/WordPress/gutenberg/issues/15356

 ''Gutenberg inherits (and in some cases duplicates) some of the styles in
 question here, so I'm opening a Trac issue for this one as well. –
 @kjellr''


 ----

 Content overflows and is cut off at 200% text enlarge

 - **Severity:** Medium
 - **Affected Populations:**
         - Low-Vision
         - Cognitively Impaired
 - **Platform(s):**
         - All / Universal
 - **Components affected:**
         - Block Panel
         - Document Panel
         - ''(Also, buttons and form fields throughout WP-Admin)''

 **Issue description**

 Several controls allow text to overflow out of them, or clip the text,
 at 200% text enlarge. This is due to containers being set in fixed pixel
 heights, which cannot grow with their content.

 The checkmark icons move out of their checkboxes as they grow, leaving a
 white checkmark against a white page background.

 The ability to resize text is essential for users with low-vision, and
 may be helpful for users who have a cognitive disability. Catering to
 zoom alone is not sufficient because the browser's font-size may be
 increased independently of zoom level.

 **Issue Code**


 {{{
 /* selects */


     .wp-admin select {


         ...


         line-height: 28px;


         height: 28px;


         ...


     }





     /* checkboxes/radios */


     input[type=checkbox], input[type=radio] {


         ...


         height: 16px;


         ...


         width: 16px;


         min-width: 16px;


     }





     /* buttons */


     .components-button.is-large {


         height: 30px;


         line-height: 28px;


         ...


     }





     .components-button.is-small {


         height: 24px;


         line-height: 22px;


         ...


         font-size: 11px;


     }





     /* pressable buttons */


     .components-toolbar__control.components-button {


         ...


         width: 36px;


         height: 36px;


     }





     /* number inputs */


     input[type=number] {


         height: 28px;


         line-height: 1;


     }

 }}}

 **Remediation Guidance**

 Avoid setting fixed heights on elements (even inputs), and especially in
 px units. Instead, set min-heights on containers, allowing them to
 always expand to enclose their content, and allowing containers to
 themselves wrap as needed.

 The Recommended Code is using a minimum of 44px for the settings
 (following https://www.w3.org/TR/WCAG21/#target-size), meaning
 designers may want to reconsider how they want to show some buttons as
 larger than others (visual importance), as well as dealing with
 horizontal button rows wrapping as necessary (such as in the "Image
 Resize" section of the Block Panel).

 The checkboxes are made larger so that the growing checkmark icon
 remains visible inside the checkboxes (by allowing them to grow with the
 checkmark). These do not need to meet target size minimums as they are
 inline with their (clickable) labels.

 **Recommended Code**

 {{{
  /* selects */


     .wp-admin select {


         ...


         min-height: 44px;


         ...


     }





     /* checkboxes/radios */


     input[type=checkbox], input[type=radio] {


         ...


         height: 1.5em;


         ...


         width: 1.5em;


         min-width: 16px;


     }





     /* buttons */


     .components-button.is-large {


         min-height: 54px;


         ...


     }





     .components-button.is-small {


         min-height: 44px;


         ...


     }





     /* pressable buttons */


     .components-toolbar__control.components-button {


         ...


         min-width: 44px;


         min-height: 44px;


     }





     /* number inputs */


     input[type=number] {


         min-height: 44px;


     }
 }}}

 **Relevant standards**

 - 1.4.4 Resize text (Level
 AA): https://www.w3.org/TR/WCAG20/#visual-audio-contrast-scale

 **Note:** This issue may be a duplicate with other existing accessibility-
 related bugs in this project. This issue comes from the Gutenberg
 accessibility audit, performed by [Tenon](https://www.tenon.io) and funded
 by [WP Campus](https://wpcampus.org/). This issue is GUT-32 in Tenon's
 report

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