Changeset 12649

Timestamp:

05/13/2020 04:58:32 PM (5 years ago)

Author:

imath

Message:

Hello BuddyPress Screen: a11y improvements

Make sure using the TAB key or the SHIFT + TAB keys when the Hello Screen is displayed focuses links inside it.

Props mercime

See #8270

File:

• trunk/src/bp-core/admin/js/hello.js (modified) (1 diff)

trunk/src/bp-core/admin/js/hello.js

@@ -29 +29 @@
 
         $( '#TB_ajaxContent' ).prop( 'style', 'height: 100%; width: auto; padding: 0; border: none;' );
+
+        var tabbables = $( ':tabbable', '#TB_ajaxContent' ), lastTabbable = tabbables.last();
+
+        // Move the focus to the Modal's close button once the last Hello link was tabbed out.
+        $( '#TB_window' ).on( 'keydown', function( event ) {
+            if ( 9 === event.keyCode && ! event.shiftKey && $( lastTabbable ).prop( 'classList' ).value === $( event.target ).prop( 'classList' ).value ) {
+                event.preventDefault();
+
+                $( '#TB_closeWindowButton' ).focus();
+            }
+
+            if ( 9 === event.keyCode && event.shiftKey && 'TB_closeWindowButton' === $( event.target ).prop( 'id' ) ) {
+                event.preventDefault();
+
+                $( lastTabbable ).focus();
+            }
+        } );
     };