[wp-trac] [WordPress Trac] #47477: Open Content overflows and is cut off at 200% text enlarge
WordPress Trac
noreply at wordpress.org
Tue Jun 4 13:25:33 UTC 2019
#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 | Resolution:
Keywords: has-screenshots wpcampus-report | Focuses: accessibility
---------------------------------------------+----------------------------
Description changed by kjellr:
Old description:
> 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
New description:
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#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list