[wp-trac] [WordPress Trac] #47115: Media Editor: Text overlaps or is clipped when text spacing or size is enlarged

[WordPress Trac]

#47115: Media Editor: Text overlaps or is clipped when text spacing or size is
enlarged
-----------------------------+---------------------------------------------
 Reporter:  afercia          |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Future Release
Component:  Media            |    Version:
 Severity:  normal           |   Keywords:  wpcampus-report has-screenshots
  Focuses:  ui,              |
  accessibility              |
-----------------------------+---------------------------------------------
 Moved from the
 [https://github.com/WordPress/gutenberg/issues/created_by/karlgroves
 WPCampus accessibility report issues on GitHub], see
 https://github.com/WordPress/gutenberg/issues/15353

 Text overlaps or is clipped when text spacing or size is enlarged

 -   **Severity:** Medium
 -   **Affected Populations:**
     -   Low-Vision
     -   Cognitively Impaired
 -   **Platform(s):**
     -   All / Universal
 -   **Components affected:**
     -   Edit Media


 #### Issue description


 On the Edit Media page, users who need to change text spacing (such as
 distance between words, characters, or lines of text) or who need to
 enlarge the text (via text settings) are unable to view all the text on
 the page, due to text overlapping or being clipped by its containers.

 The ability to resize or adjust spacing of 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

 {{{
     .wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-
 secondary {


         ...


         font-size: 13px;


         line-height: 26px;


         height: 28px;


        ...


     }


     .image-editor .imgedit-menu .button {


         ...


         width: 32px;


         height: 32px;


         ...


         line-height: 16px;


         ...


     }


     .imgedit-settings .imgedit-crop-ratio input[type="text"], .imgedit-
 settings .imgedit-crop-sel input[type="text"], .imgedit-settings .imgedit-
 scale input[type="text"] {


         width: 50px;


         font-size: 14px;


         padding: 5px 8px;


     }


     ...


     .wp-core-ui .quicktags-toolbar input.button.button-small {


         font-size: 12px;


         height: 26px;


         line-height: 24px;


     }

 }}}



 #### Remediation Guidance


 Keep width and height minimums to 44px or greater. Set minimum sizes
 using `min-width` and `min-height`, rather than fixed sizes using
 `width` and `height`, to allow containers to naturally expand with
 increases in content size.



 ##### Recommended Code

 {{{
     .wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-
 secondary {


         ...


         line-height: 1.5;


         min-height: 44px;


        ...


     }


     .image-editor .imgedit-menu .button {


         ...


         min-width: 44px;


         min-height: 44px;


         ...


         line-height: 1;


         ...


     }


     .imgedit-settings .imgedit-crop-ratio input[type="text"], .imgedit-
 settings .imgedit-crop-sel input[type="text"], .imgedit-settings .imgedit-
 scale input[type="text"] {


         min-width: 50px;


         ...


         padding: 5px 8px;


     }


     ...


     .wp-core-ui .quicktags-toolbar input.button.button-small {


         ...


         min-height: 44px;


         line-height: 1.5;


     }
 }}}




 #### Relevant standards

 -   [https://www.w3.org/TR/WCAG20/#visual-audio-contrast-scale 1.4.4
 Resize text (Level AA)]
 -   [https://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color
 1.4.12 Text Spacing (Level AA)]

 **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-77 in Tenon's
 report

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