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

[audrasjb]

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/

[audrasjb]

Patch with dashicon-external added to the button

[audrasjb]

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)

[imath]

Hi @audrasjb

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

[imath]

Thanks for the suggestion & patch, btw 👍

[audrasjb]

You’re very welcome @imath 🙂

[mercime]

@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

[imath]

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 💪

[mercime]

@imath 👍

[mercime]

In 12549:

Admin: Sanitize external links to activated BP component pages.

Props imath.
See #8235.

[mercime]

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.