Changeset 12550

Timestamp:

01/31/2020 04:40:15 PM (5 years ago)

Author:

mercime

Message:

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.

Location:

trunk/src/bp-core/admin

Files:

• bp-core-admin-slugs.php (modified) (1 diff)
• css/common-rtl.css (modified) (1 diff)
• css/common.css (modified) (1 diff)

trunk/src/bp-core/admin/bp-core-admin-slugs.php

@@ -146 +146 @@
                             <?php if ( !empty( $existing_pages[$name] ) ) : ?>
 
-                                <a href="<?php echo esc_url( get_permalink( $existing_pages[$name] ) ); ?>" class="button-secondary" target="_bp"><?php _e( 'View', 'buddypress' ); ?></a>
+                                <a href="<?php echo esc_url( get_permalink( $existing_pages[$name] ) ); ?>" class="button-secondary" target="_bp">
+                                    <?php _e( 'View', 'buddypress' ); ?> <span class="dashicons dashicons-external" aria-hidden="true"></span>
+                                    <span class="screen-reader-text"><?php esc_html_e( '(opens in a new tab)', 'buddypress' ); ?></span>
+                                </a>
 
                             <?php endif; ?>

trunk/src/bp-core/admin/css/common-rtl.css

@@ -273 +273 @@
 .settings_page_bp-components tr.members td.plugin-title span:before {
     content: "\f307";
+}
+
+.settings_page_bp-page-settings .button-secondary .dashicons {
+    position: relative;
+    top: 3px;
 }
 

trunk/src/bp-core/admin/css/common.css

@@ -273 +273 @@
 .settings_page_bp-components tr.members td.plugin-title span:before {
     content: "\f307";
+}
+
+.settings_page_bp-page-settings .button-secondary .dashicons {
+    position: relative;
+    top: 3px;
 }