Make WordPress Core

Opened 7 weeks ago

Closed 7 weeks ago

#65685 closed defect (bug) (fixed)

Image editor: width input in the Scale panel has accessible name "scale height"

Reported by: csmcneill Owned by: joedolson
Priority: normal Milestone: 7.1
Component: Media Version: 4.5
Severity: normal Keywords: good-first-bug has-patch commit
Cc: Focuses: accessibility

Description

In the classic image editor (attachment page → Edit Image), the Scale panel's width and height inputs both have the accessible name "scale height". A screen reader user cannot tell which dimension field they are in.

The width input's screen-reader label reuses the height string in wp-admin/includes/image-edit.php:

<label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'scale height' );
?>
</label>

…immediately followed by the height input's label with the same text:

<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>

Steps to reproduce

  1. Media → Library, open any image's attachment details, and click Edit Image.
  2. Click Scale in the editor toolbar; two dimension inputs appear under "New dimensions:".
  3. Inspect the first (width) input with the DevTools Accessibility pane, or move through the fields with a screen reader.

Expected

The width field is announced as a width, distinct from the height field.

Actual

Both fields are announced as "scale height".

Notes

  • First appears in WordPress 4.5, when the screen-reader labels were added to the Scale panel (checked against release tags); confirmed on 7.0.2 and 7.1-beta2.
  • The minimal fix is a one-string change to the width label. Since both strings are hidden accessibility text, this could also be an opportunity for clearer names on both fields — happy to defer to the accessibility team on wording.

Environment

WordPress 7.0.2 and 7.1-beta2, fresh wp-env (Docker) installs, no plugins; verified via the DevTools accessibility tree and VoiceOver on macOS.

Attachments (1)

65685.patch (729 bytes ) - added by nilambar 7 weeks ago.

Download all attachments as: .zip

Change History (12)

#1 @joedolson
7 weeks ago

  • Milestone Awaiting Review7.2
  • Owner set to joedolson
  • Status newaccepted

May end up moving this to 7.1, but that's very soon, so I don't want to move it there immediately.

@nilambar
7 weeks ago

#2 @tusharaddweb
7 weeks ago

Tested the patch and can confirm it resolves the issue. The changes are working as expected on my end.

Before Patch:-
https://prnt.sc/Tx722sztWnMI

After Patch:-
https://prnt.sc/r3h3C2S5D49d

This ticket was mentioned in PR #12635 on WordPress/wordpress-develop by @khokansardar.


7 weeks ago
#3

  • Keywords has-patch added; needs-patch removed

The classic image editor's Scale panel gives its width and height inputs the same hidden screen-reader-text label, "scale height", so a screen reader announces both dimension fields identically. This changes the width input's label to "scale width" so each field is announced accurately.

What the problem was:

  • In wp-admin/includes/image-edit.php, the width input's screen-reader-text label reused the height string: _e( 'scale height' ).
  • The height input immediately below uses the same _e( 'scale height' ).
  • Result: both fields under "New dimensions:" are announced as "scale height", so a screen reader user cannot tell the width and height fields apart. Present since WordPress 4.5, when these labels were added.

What the fix does:

  • Changes the width input's label to _e( 'scale width' ). One string, on the width field only.

Approach and why:

  • Minimal, matches the field, and is exactly the fix the ticket calls for and the accepted patch (65685.patch) makes. The height label is already correct and is left untouched. The reporter raised possibly rewording both labels but deferred wording to the accessibility team, so that is intentionally out of scope here.
  • The existing /* translators: Hidden accessibility text. */ comment on the width label is retained; "scale width" is a new translatable string.

Trac ticket: https://core.trac.wordpress.org/ticket/65685

## Use of AI Tools
N/A

@mukesh27 commented on PR #12635:


7 weeks ago
#4

@itzmekhokan We already have a patch for this issue: https://core.trac.wordpress.org/attachment/ticket/65685/65685.patch, contributed by @ernilambar, and it applies cleanly.

I think it would be better to review the existing patch and share your feedback there instead of opening a duplicate PR.

#5 @mukesh27
7 weeks ago

  • Keywords commit added

@joedolson I think it would be better to commit this to the 7.1 branch since it's a straightforward fix. That said, I'll leave the final decision up to you.

@khokansardar commented on PR #12635:


7 weeks ago
#6

@itzmekhokan We already have a patch for this issue: https://core.trac.wordpress.org/attachment/ticket/65685/65685.patch, contributed by @ernilambar, and it applies cleanly.

I think it would be better to review the existing patch and share your feedback there instead of opening a duplicate PR.

Sorry I skip that, closing this PR as we already have the similar patch.

#7 @joedolson
7 weeks ago

  • Milestone 7.27.1

#8 @afercia
7 weeks ago

Since we're touching these labels, I would suggest to remove the verb 'scale' and just use 'width' and 'height'.

These two inputs are already wrapped within a fieldset named with this legend:

<legend>New dimensions:</legend>

By using only 'width' and 'height' we'd make guessing the input accessible names easier for voice control users, and we'd reduce noise for screen reader users.

If no objections, can be done during commit. No need to submit a new patch.

#9 @joedolson
7 weeks ago

I agree; these can be improved with simplification.

This ticket was mentioned in PR #12671 on WordPress/wordpress-develop by @joedolson.


7 weeks ago
#10

Trac ticket: https://core.trac.wordpress.org/ticket/65685

## Use of AI Tools

#11 @joedolson
7 weeks ago

  • Resolutionfixed
  • Status acceptedclosed

In 62840:

Media: Accessibility: Fix labels in scale tool.

The field for setting width in the media editor scale inputs had an incorrect label. Additionally, both the width and height labels had extraneous adjectives describing the fields. These are not necessary given the fieldset and legend providing context.

Change the 'width' label from 'scale height' to 'Width'. Change the 'height' label from 'scale height' to 'Height'.

Props csmcneill, nilambar, tusharaddweb, khokansardar, mukesh27, joedolson, afercia.
Fixes #65685.

Note: See TracTickets for help on using tickets.