Skip to:
Content

BuddyPress.org

Opened 9 months ago

Closed 9 months 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 9 months ago.
Patch with dashicon-external added to the button
8235.diff (1.8 KB) - added by audrasjb 9 months 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 9 months ago.

Download all attachments as: .zip

Change History (12)

@audrasjb
9 months ago

Patch with dashicon-external added to the button

@audrasjb
9 months 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
9 months 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
9 months ago

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

#3 @imath
9 months ago

Thanks for the suggestion & patch, btw 👍

#4 @audrasjb
9 months ago

You’re very welcome @imath 🙂

@mercime
9 months ago

#5 @mercime
9 months 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 9 months ago by mercime (previous) (diff)

#6 @imath
9 months 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
9 months ago

@imath 👍

#8 @mercime
9 months ago

In 12549:

Admin: Sanitize external links to activated BP component pages.

Props imath.
See #8235.

#9 @mercime
9 months 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.