WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 5 days ago

#47115 assigned defect (bug)

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

Reported by: afercia Owned by: anevins
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report has-screenshots needs-patch
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 (1)

47115.jpg (187.7 KB) - added by afercia 4 months ago.

Download all attachments as: .zip

Change History (7)

@afercia
4 months ago

#1 @afercia
4 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
3 months ago

  • Milestone changed from Future Release to 5.3

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


5 weeks ago

#4 @mikeschroder
5 weeks ago

  • Keywords needs-patch added

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


5 days ago

Note: See TracTickets for help on using tickets.