WordPress.org

Make WordPress Core

Opened 8 weeks ago

Last modified 7 weeks ago

#47115 new defect (bug)

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

Reported by: afercia Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report has-screenshots
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 8 weeks ago.

Download all attachments as: .zip

Change History (3)

@afercia
8 weeks ago

#1 @afercia
8 weeks 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
7 weeks ago

  • Milestone changed from Future Release to 5.3
Note: See TracTickets for help on using tickets.