WordPress.org

Make WordPress Core

Opened 7 days ago

Last modified 2 hours ago

#48028 new defect (bug)

Media Library 'featured image' dialogue missing link text that describes 'opens in new tab'.

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots wpcampus-report has-patch
Focuses: accessibility Cc:

Description

The "Media Library" panel of the "Featured Image" modal dialog contains a link labelled with "Edit image". This link takes users to a new window/tab, but that link does not inform users that it opens a new window or tab.

A link does not naturally convey itself to assistive technology that it opens in a new tab without link text that describes it.

It is important to convey that a link opens in a new tab because of the change of context may not be clear to everyone.

Suggested solution

  • Write more descriptive link text that describes the link opening in a new tab;
  • Utilise the class of 'screen-reader-text' in CSS to hide that text (you can wrap the text in <span class="screen-reader-text">).

Example of solution

<a class="edit-attachment" href="..." target="_blank">
  Edit Image
  <span class="screen-reader-text">(Opens in a new window)</span>
</a>

This problem was originally raised on ticket #47137 and has been separated out here to reduce complexity.

Attachments (2)

57185883-4f359f80-6e89-11e9-9e23-903e587ff978.png (362.5 KB) - added by anevins 7 days ago.
48028.patch (680 bytes) - added by fblaser 6 days ago.
This should do it.

Download all attachments as: .zip

Change History (7)

@fblaser
6 days ago

This should do it.

#1 follow-up: @fblaser
6 days ago

  • Keywords has-patch added; needs-patch removed

Greetings from WordCamp Zürich Contributor's day!

I've just submitted a patch for this bug. Hope this helps.

#2 in reply to: ↑ 1 @w3rkjana
6 days ago

Replying to fblaser:

Greetings from WordCamp Zürich Contributor's day!

I've just submitted a patch for this bug. Hope this helps.

Installed, checked patch. Text is present, great thanks.

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


6 days ago

#4 @afercia
6 days ago

  • Focuses accessibility added
  • Milestone changed from Awaiting Review to 5.3

Hello Zürich! Thanks for the patch. Going to move this ticket to the 5.3 milstone and set the "Accessibility" focus.

Last edited 6 days ago by afercia (previous) (diff)

#5 @afercia
2 hours ago

  • Keywords good-first-bug removed

Looking a bit more in depth into this issue, it appears it's a bit more complicated than expected.

In the Classic Editor the "Edit Image" link doesn't open a new tab. Even if it does have a target="_blank" attribute, the default action is prevented and the media modal updates its content to display the image editor. This is intended behavior. See https://core.trac.wordpress.org/browser/trunk/src/js/media/views/attachment/details.js?rev=45561&marks=189-199#L180

Instead, in Gutenberg and in the Customizer it opens a new tab. This happens because editState is undefined and I'm not sure it's the intended behavior to start with.

Would anyone from the Media or Editor team clarify if there's any reason why the Image Editor should open in a new tab in the context of Gutenberg (and the Customizer)?

Pinging some of the related components maintainers: @antpb @mikeschroder @azaozz @iseulde

Note: See TracTickets for help on using tickets.