Skip to:
Content

BuddyPress.org

Opened 4 weeks ago

Closed 4 weeks ago

#8235 closed defect (bug) (fixed)

Accessibility: add information concerning links that open in a new tab

Reported by: audrasjb Owned by: mercime
Milestone: 6.0.0 Priority: normal
Severity: normal Version:
Component: Settings Keywords: has-patch has-screenshots commit
Cc:

Description

Hello,

I noticed some buttons (actually they are links with a button UI) that open a new tab in BuddyPress Settings screen.

While target blank links are not recommended by accessibility guidelines (as it forces the behavior of the interface - there is no "open in the same tab" option on a target blank link), it can sometimes be understandable to have some target blank links, especially on a settings page where the user could loose their form fields informations.

If we want to keep target blank links, I'd recommend to add proper information about the behavior of the links so screen readers users (and also sighted users) could know what it's going to happen when they click on the related links.

For example, I'd recommand to replace:

<a href="…" target="_blank">View</a>

With something like:

<a href="…" target="_blank">View <span class="screen-reader-text"> (opens in a new window)</span></a>

Or even better (for sighted users):

<a href="…" target="_blank">View <span class="dashicons dashicons-external"></span>
<span class="screen-reader-text"> (opens in a new window)</span></a>

(see screenshots below)

For reference:

  • Make/Accessibility - Link destinations:

https://make.wordpress.org/accessibility/handbook/content/link-destinations/

  • When to use and not use target blank:

https://css-tricks.com/use-target_blank/

Attachments (3)

Capture d’écran 2020-01-28 à 23.21.24.png (102.7 KB) - added by audrasjb 4 weeks ago.
Patch with dashicon-external added to the button
8235.diff (1.8 KB) - added by audrasjb 4 weeks ago.
Setttins: add screen reader text for link that opens in a new window, and a dashicon for sighted users as well (includes small CSS changes to handle dashicons in buttons)
8235-2.diff (1.7 KB) - added by mercime 4 weeks ago.

Download all attachments as: .zip

Change History (12)

@audrasjb
4 weeks ago

Patch with dashicon-external added to the button

@audrasjb
4 weeks ago

Setttins: add screen reader text for link that opens in a new window, and a dashicon for sighted users as well (includes small CSS changes to handle dashicons in buttons)

#1 @imath
4 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.0.0

Hi @audrasjb

I agree it would be a great improvement. @mercime could you look at it ?

#2 @audrasjb
4 weeks ago

  • Keywords has-patch has-screenshots added; needs-patch removed

#3 @imath
4 weeks ago

Thanks for the suggestion & patch, btw 👍

#4 @audrasjb
4 weeks ago

You’re very welcome @imath 🙂

@mercime
4 weeks ago

#5 @mercime
4 weeks ago

@audrasjb Thank you for the accessibility improvement!
Attached patch changes (opens in a new window) to (opens in a new tab) which is used for the WP dashboard's external links, adds aria-hidden="true" to <span> for dashicon addition, and applies style fix only to .settings_page_bp-page-settings .button-secondary .dashicon

Last edited 4 weeks ago by mercime (previous) (diff)

#6 @imath
4 weeks ago

  • Keywords commit added

Hi @mercime,

Thanks a lot for your patch 👌. Could you use echo esc_url( get_petmalink() ) in the href attribute, I think it’s best to sanitize the URL. Otherwise it’s good to be committed 💪

#7 @mercime
4 weeks ago

@imath 👍

#8 @mercime
4 weeks ago

In 12549:

Admin: Sanitize external links to activated BP component pages.

Props imath.
See #8235.

#9 @mercime
4 weeks ago

  • Owner set to mercime
  • Resolution set to fixed
  • Status changed from new to closed

In 12550:

Admin: Make external links in BP Settings > Page accessible.

The View link beside each new activated component opens up in a new tab to
ensure that a user may view the new BP page generated in the frontend without
losing the selection/s in the settings page before the user has saved such.

This fix provides hidden text for users of screen readers and an icon for
sighted users to indicate that the link will open in a new tab.

Props audrasjb, imath.
Fixes #8235.

Note: See TracTickets for help on using tickets.