WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 6 weeks ago

#47477 new defect (bug)

Content overflows and is cut off at 200% text enlarge

Reported by: kjellr Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots wpcampus-report
Focuses: accessibility Cc:

Description (last modified by kjellr)

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

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

Attachments (5)

tenon-screenshot.png (278.6 KB) - added by kjellr 7 weeks ago.
Screen Shot 2019-06-04 at 8.56.32 AM.png (70.8 KB) - added by kjellr 7 weeks ago.
Screen Shot 2019-06-04 at 8.55.41 AM.png (70.9 KB) - added by kjellr 7 weeks ago.
Screen Shot 2019-06-04 at 8.55.21 AM.png (58.6 KB) - added by kjellr 7 weeks ago.
47477.diff (3.5 KB) - added by kjellr 7 weeks ago.

Download all attachments as: .zip

Change History (10)

@kjellr
7 weeks ago

#1 @kjellr
7 weeks ago

I've included the original Gutenberg screenshot from the report, as well as a couple other examples inside of WP-Admin, which are more relevant to this specific ticket.

The WP-Admin screenshots were created with Firefox's Text Zoom option (set to 200%). @afercia notes that this is not exactly the same thing as the text zoom settings noted above, but it gives a general idea of the issue. (reference)


47477.diff includes a quick pass at the updates here. It's a start, but is definitely not ready to land. Some notes:

  • In general, it aims to remove imposed heights for buttons, select fields, and number fields, in favor of min-height. This helps make sure these elements don't break when text is zoomed, but it's likely to cause some visual bugs as well.
  • For instance: min-height for select fields appears to be ignored in Safari. Which isn't great.
  • This patch also includes a quick fix for the checkboxes issue — It replaces the icon-font based checkmark with an SVG one which won't scale up and break. While switching to a SVG seems like a reasonable solution here (to me at least), this implementation could certainly be improved.

With the patch applied, here are the updated screenshots:

https://cldup.com/iL0n4Z9Pyt-3000x3000.png

https://cldup.com/rPnvS54rX1-3000x3000.png

https://cldup.com/BLhjFxyBTv-3000x3000.png

#2 @kjellr
7 weeks ago

  • Description modified (diff)

#3 @kjellr
7 weeks ago

  • Summary changed from Open Content overflows and is cut off at 200% text enlarge to Content overflows and is cut off at 200% text enlarge

#4 @SergeyBiryukov
7 weeks ago

  • Component changed from General to Administration

This ticket was mentioned in Slack in #accessibility by kjell. View the logs.


6 weeks ago

Note: See TracTickets for help on using tickets.