WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 2 weeks ago

Last modified 2 weeks ago

#47115 closed defect (bug) (fixed)

Media Editor: Text overlaps or is clipped when text spacing or size is enlarged

Reported by: afercia Owned by: antpb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report has-screenshots has-patch commit
Focuses: ui, accessibility Cc:
PR Number:

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)

47115.jpg (187.7 KB) - added by afercia 6 months ago.
47115 01.png (475.6 KB) - added by afercia 3 weeks ago.
47115 02.png (437.6 KB) - added by afercia 3 weeks ago.
47115-after-1.png (128.8 KB) - added by audrasjb 3 weeks ago.
47115-after-1
47115-after-2.png (68.0 KB) - added by audrasjb 3 weeks ago.
47115-after-2
47115-after-3.png (46.2 KB) - added by audrasjb 3 weeks ago.
47115-after-3
47115-modal-firefox-min24.png (266.1 KB) - added by sabernhardt 2 weeks ago.
Image Edit modal (updated), with minimum font size
47115-primary-secondary-buttons-firefox-min24.png (3.4 KB) - added by sabernhardt 2 weeks ago.
Primary and secondary buttons (updated), with minimum font size
47115-discussion-checkbox-firefox-min24.png (13.9 KB) - added by sabernhardt 2 weeks ago.
Discussion checkboxes (updated), with minimum font size
47115.diff (3.7 KB) - added by sabernhardt 2 weeks ago.
Image Scale and Image Crop text inputs, Attachment Description quicktags buttons
47115-patch-text-inputs-chrome-intended-size.png (8.0 KB) - added by sabernhardt 2 weeks ago.
Text inputs after patch, in Google Chrome, without increasing text size
47115-patch-text-inputs-firefox-min24.png (23.6 KB) - added by sabernhardt 2 weeks ago.
Text inputs after patch, in Firefox, with larger text size
47115-patch-description-box-chrome-intended-size.png (11.5 KB) - added by sabernhardt 2 weeks ago.
Description buttons after patch, in Google Chrome, without increasing text size
47115-patch-description-box-firefox-min24.png (13.9 KB) - added by sabernhardt 2 weeks ago.
Description buttons after patch, in Firefox, with larger text size

Download all attachments as: .zip

Change History (42)

@afercia
6 months ago

#1 @afercia
6 months ago

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.

#2 @afercia
5 months ago

  • Milestone changed from Future Release to 5.3

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


3 months ago

#4 @mikeschroder
3 months ago

  • Keywords needs-patch added

#5 @mikeschroder
3 months ago

  • Owner set to anevins
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


2 months ago

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


7 weeks ago

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


5 weeks ago

#10 @anevins
5 weeks 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.


4 weeks ago

#12 @mikeschroder
4 weeks ago

  • Owner anevins deleted

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


3 weeks ago

#14 @antpb
3 weeks ago

  • Owner set to antpb

#15 @antpb
3 weeks 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 @afercia
3 weeks 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.

@afercia
3 weeks ago

@afercia
3 weeks ago

#17 @afercia
3 weeks ago

I'm wondering if the instances of input fields require a min-width to fix the overflow. (dimensions/aspect ratio inputs)

Probably yes, though the space within the column is limited. One more reason for a major redesign of the Image Editor page. See #47136 and an initial proposal on #47116.

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


3 weeks ago

@audrasjb
3 weeks ago

47115-after-1

@audrasjb
3 weeks ago

47115-after-2

@audrasjb
3 weeks ago

47115-after-3

#19 @audrasjb
3 weeks 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.

@sabernhardt
2 weeks ago

Image Edit modal (updated), with minimum font size

@sabernhardt
2 weeks ago

Primary and secondary buttons (updated), with minimum font size

@sabernhardt
2 weeks ago

Discussion checkboxes (updated), with minimum font size

#20 @sabernhardt
2 weeks ago

Update as of commit r46349:

  1. Tools buttons scale now that the text is showing (#45116).
  2. Primary and secondary action buttons also scale.
  3. 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:

  1. text input size for Image Scale and Image Crop sections, and
  2. the Description buttons (and label).

(The patch may require design approval.)

Last edited 2 weeks ago by sabernhardt (previous) (diff)

@sabernhardt
2 weeks ago

Image Scale and Image Crop text inputs, Attachment Description quicktags buttons

#21 @sabernhardt
2 weeks ago

Patch explanation: 47115.diff

Image Scale and Image Crop text inputs

  1. 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.)
  2. 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 to display: block and adding the top margin there instead, but I thought wrapping it in a container was a better option.
  3. 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)

  1. The buttons were already trimmed by one pixel at the fixed height of 26px, so the patch switches that to min-height.
  2. 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).

@sabernhardt
2 weeks ago

Text inputs after patch, in Google Chrome, without increasing text size

@sabernhardt
2 weeks ago

Text inputs after patch, in Firefox, with larger text size

@sabernhardt
2 weeks ago

Description buttons after patch, in Google Chrome, without increasing text size

@sabernhardt
2 weeks ago

Description buttons after patch, in Firefox, with larger text size

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


2 weeks ago

This ticket was mentioned in Slack in #core by antpb. View the logs.


2 weeks ago

#24 @antpb
2 weeks ago

  • Keywords has-patch commit added; needs-patch removed

Thank you so much for this patch @sabernhardt ! Testing is looking good. This makes the page look really nice!

#25 @antpb
2 weeks ago

In 46354:

Media: Prevents clipping of text when scaling image edit screen.

Props sabernhardt, audrasjb, afercia.
See #47115.

#26 @antpb
2 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

#27 @antpb
2 weeks ago

In 46355:

Media: Revert [46354] preventing bad clipping of text in image details page.

See #47115.

#28 @antpb
2 weeks ago

In 46359:

Media: Prevents clipping of text when scaling image edit screen.

This reapplies [46354] clean as the previous commit had remnants of an unrelated patch.

Props sabernhardt, audrasjb, afercia.
See #47115.

Note: See TracTickets for help on using tickets.