#47115 closed defect (bug) (fixed)
Media Editor: Text overlaps or is clipped when text spacing or size is enlarged
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | 5.3 | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Media | Keywords: | wpcampus-report has-screenshots has-patch commit |
| Focuses: | ui, accessibility | Cc: |
Description
Moved from the 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
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
Attachments (14)
Change History (42)
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#10
@
5 years ago
I'm dropping ownership because I ran out of time unfortunately. I had warning from someone that we might have browser compatibility issues with changing the height, but the real thing that was blocking me was my environment setup that I couldn't find time resolving.
Will be available if anyone needs front end help, drop me a line in slack
This ticket was mentioned in Slack in #core-media by mike. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by antpb. View the logs.
5 years ago
#15
@
5 years ago
@afercia I believe the button fix has been done in https://github.com/WordPress/wordpress-develop/commit/3f58ce59d71acd5030808b427bed7437f277bbe3
Does that mean this issue is resolved due to that change? I'm wondering if the instances of input fields require a min-width to fix the overflow. (dimensions/aspect ratio inputs)
#16
@
5 years ago
@antpb For better clarity, I'm attaching the screenshot from the original WPCampus report. Worth reminding all the documentation from the WPCampus audit is available at https://wpcampus.org/2019/05/gutenberg-audit-results/.
That includes the 329-page long-form technical report with all the details and screenshots:
https://documents.wpcampus.org/gutenberg/audit/Gutenberg_Report.pdf
There are several elements to fix for compatibility with large fonts and only-text zoom. Including the admin bar :) and the buttons for the description textarea, etc.
Worth reminding WPCampus audited anything that is reachable from the Gutenberg editor but they don't distinguish (nor they should) between the various WordPress components. Some of the elements to improve should be probably split in separate tickets. Other elements pertain to the Image Editor screen and should be addressed on this ticket.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#19
@
5 years ago
Current status of this screen after recent changes in other tickets, in screenshot shared above:
*47115-after-1*
- Screen options and Help tabs are fixed 🎉
- Tools buttons (crop, resize, etc) needs some work
- General buttons (primary + secondary) needs fluid height/width
- Idem for text inputs
*47115-after-2*
- 100% OK! 🎉
*47115-after-3*
- Buttons of the Description field needs some work.
#20
@
5 years ago
Update as of commit r46349:
- Tools buttons scale now that the text is showing (#45116).
- Primary and secondary action buttons also scale.
- The checkmarks overlay the checkboxes.
Note: screenshots show examples in Firefox because that's the way I knew how to set a specific font (OpenDyslexic-AltA) and a minimum size (of 24).
I'll upload a patch soon to address these items:
- text input size for Image Scale and Image Crop sections, and
- the Description buttons (and label).
(The patch may require design approval.)
#21
@
5 years ago
Patch explanation: 47115.diff
Image Scale and Image Crop text inputs
- The text inputs still have a fixed width, though it's increased from 50 to 80 pixels. (It could be somewhere in between; 90 is probably too wide.)
- The Scale button is wrapped in a
<div>so it moves below the inputs. This requires a small top margin to make room for the focus outline. (It also helps with translations such as Bulgarian at smaller text and input sizes.) Another way would be setting the button todisplay: blockand adding the top margin there instead, but I thought wrapping it in a container was a better option. - The original dimension values are wrapped in a
<span>tag so both width and height will stay on the same line.
Description buttons (and label)
- The buttons were already trimmed by one pixel at the fixed height of 26px, so the patch switches that to
min-height. - When the label had larger text, the stem (descender) of the lowercase p was hidden behind the quicktags toolbar. This patch adds a small top margin and increases the line-height (decimals are based on thirteenths).
Note: this is about changing the system font size via text settings, or customizing the distance between words, characters, or lines of text as some users do for their specific needs.
It's not easy to replicate: the screenshot above is taken using the Firefox zoom "only text" option which helps to give an idea (but it's not exactly the same thing).
Basically, the Media Editor is one of the oldest screen in WordPress. It already has layout issues in the responsive view and, additionally, some text and some controls become unreadable or hardly usable with enlarged text / custom font metrics.