From 27ccb6363d6965fd7f3d3791ae8ef4d4e016e793 Mon Sep 17 00:00:00 2001 From: Alex Tran Date: Sun, 27 Oct 2019 23:49:10 -0500 Subject: [PATCH 1/2] Include skip link JS for IE. --- assets/js/skip-link-focus-fix.js | 33 ++++++++++++++++++++++++++++++++ functions.php | 1 + 2 files changed, 34 insertions(+) create mode 100644 assets/js/skip-link-focus-fix.js diff --git a/assets/js/skip-link-focus-fix.js b/assets/js/skip-link-focus-fix.js new file mode 100644 index 000000000..2325149cd --- /dev/null +++ b/assets/js/skip-link-focus-fix.js @@ -0,0 +1,33 @@ +/** + * File skip-link-focus-fix.js. + * + * Helps with accessibility for keyboard only users. + * + * This is the source file for what is minified in the twentynineteen_skip_link_focus_fix() PHP function. + * + * Learn more: https://git.io/vWdr2 + */ +( function() { + var isIe = /(trident|msie)/i.test( navigator.userAgent ); + + if ( isIe && document.getElementById && window.addEventListener ) { + window.addEventListener( 'hashchange', function() { + var id = location.hash.substring( 1 ), + element; + + if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) { + return; + } + + element = document.getElementById( id ); + + if ( element ) { + if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) { + element.tabIndex = -1; + } + + element.focus(); + } + }, false ); + } +}() ); diff --git a/functions.php b/functions.php index 6e87c7656..d71400a4c 100644 --- a/functions.php +++ b/functions.php @@ -200,6 +200,7 @@ function twentytwenty_register_scripts() { } wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false ); + wp_enqueue_script( 'skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), $theme_version, true ); wp_script_add_data( 'twentytwenty-js', 'async', true ); } From 7c841da97a08b4f10bf5685d92ded64585824e05 Mon Sep 17 00:00:00 2001 From: Alex Tran Date: Mon, 28 Oct 2019 03:07:08 -0500 Subject: [PATCH 2/2] Output minified script without enqueuing it --- assets/js/skip-link-focus-fix.js | 2 +- functions.php | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/assets/js/skip-link-focus-fix.js b/assets/js/skip-link-focus-fix.js index 2325149cd..181b79799 100644 --- a/assets/js/skip-link-focus-fix.js +++ b/assets/js/skip-link-focus-fix.js @@ -3,7 +3,7 @@ * * Helps with accessibility for keyboard only users. * - * This is the source file for what is minified in the twentynineteen_skip_link_focus_fix() PHP function. + * This is the source file for what is minified in the twentytwenty_skip_link_focus_fix() PHP function. * * Learn more: https://git.io/vWdr2 */ diff --git a/functions.php b/functions.php index d71400a4c..925db5477 100644 --- a/functions.php +++ b/functions.php @@ -200,13 +200,30 @@ function twentytwenty_register_scripts() { } wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false ); - wp_enqueue_script( 'skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), $theme_version, true ); wp_script_add_data( 'twentytwenty-js', 'async', true ); } add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' ); +/** + * Fix skip link focus in IE11. + * + * This does not enqueue the script because it is tiny and because it is only for IE11, + * thus it does not warrant having an entire dedicated blocking script being loaded. + * + * @link https://git.io/vWdr2 + */ +function twentytwenty_skip_link_focus_fix() { + // The following is minified via `terser --compress --mangle -- assets/js/skip-link-focus-fix.js`. + ?> + +