WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#40733 closed defect (bug) (fixed)

The new links in the News dashboard widget need to inform users they open in a new window

Reported by: afercia Owned by: afercia
Milestone: 4.8 Priority: normal
Severity: normal Version: 4.8
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description

The revamped News dashboard widget (a.k.a "Nearby events" widget) just merged in [40607], introduces three new link that use the attribute target="_blank"

https://cldup.com/wFhJDJifmv.png

Regardless if links that open in a new window use an icon to give some visual feedback (although the doubt here is about the meaning of the icon: external? opens in a new window? both?) they always need some accessible text to inform screen reader users they open in a new window.

This issue is a long standing one and already discussed in #23432. Recently, we've started removing a few target="_blank" where it made sense, and adding some hidden text, for example in [40422], following the pattern used in [38829].

I'd like to propose to follow the same pattern here and add the same text, with just a small change. The current string is: (link opens in a new window) however the word link is redundant because screen readers already announce link for an a element.

Note that the brackets around the text make screen readers do a little pause, which is a good thing when a link gets announced, for example:
link Meetups {brief pause} opens in a new window.

Attachments (3)

40733.diff (3.5 KB) - added by afercia 3 years ago.
40733.2.diff (4.0 KB) - added by afercia 3 years ago.
40733.3.diff (4.0 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (9)

@afercia
3 years ago

#1 @afercia
3 years ago

  • Keywords has-patch added
  • Owner set to afercia
  • Status changed from new to assigned

40733.diff does the following:

  • standardizes similar messages always using (opens in a new window)
  • adds translators comments
  • hides the dashicons with aria-hidden="true", see #40428

Safari 10 & VoiceOver need a little trick to work properly. Remove the CSS and test with Safari 10 & VoiceOver, you will notice the hidden text gets read out before the link.

Worth noting this could also use an aria-label on the links, for example:
aria-label="Meetups (opens in a new window)"
but I thought reusing the same string will make life easier for translators.

@afercia
3 years ago

#2 @afercia
3 years ago

Refreshed patch using printf().

This ticket was mentioned in Slack in #core-i18n by afercia. View the logs.


3 years ago

@afercia
3 years ago

#4 @afercia
3 years ago

40733.3.diff uses esc_url( __() ) for the "translatable URL".

#5 @afercia
3 years ago

Screenshot with the patch applied:

https://cldup.com/Od5RNkKQyC.png

#6 @afercia
3 years ago

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

In 40643:

Accessibility: Add "(opens in a new window)" screen reader text to the "News-Nearby Events" dashboard widget footer links.

  • standardizes similar messages in core to always use (opens in a new window)
  • adds translators comments
  • hides the dashicons with aria-hidden="true", see #40428

Fixes #40733.

Note: See TracTickets for help on using tickets.