Support ForumTabs, Toggles, and Accordions operated via keyboard – Support Forum

Tabs, Toggles, and Accordions operated via keyboard

COFWebmaster — Fri, 23 Jun 2017 21:24:37 +0000

Hello,
The Tab/Accordions on your theme can not be operated via keyboard, this means they fail ADA scans, and since we are a city we need to be able to pass ADA scans. Is there a way to make them keyboard operable? When you tab though the page they never get focus so they can never be opened unless you are using a mouse. Please help. Need to be able to use them with keyboard only.
Thank you,
Gavin

Reply To: Tabs, Toggles, and Accordions operated via keyboard

IshYoBoy — Mon, 26 Jun 2017 15:12:08 +0000

Hi Gavin,

yes it is possible :)

1. You have to add attribute tabindex for clickable part of accordion / toggle element. So simple add this one line of code into your js file
jQuery('.ish-tgg-acc-title').attr('tabindex', '0');

2. And then add this short snippet:

jQuery(document).keydown(function (e) {

    var activeElement = jQuery( document.activeElement );
    var accordionToggleFocused = activeElement.parents( '.ish-sc_tgg_acc' ).length;
    var tabsFocused = activeElement.parents( 'li' ).length;

    switch (e.which) {
        case 32: // spacebar
	case 38: // up
	case 40: // down

	    if ( 0 < accordionToggleFocused || 0 < tabsFocused ) {
		activeElement.click();
		e.preventDefault();
	    }

	    break;

	default:
	    return;
    }
});

jQuery(document).keydown(function (e) {

var activeElement = jQuery( document.activeElement );

var accordionToggleFocused = activeElement.parents( '.ish-sc_tgg_acc' ).length;

var tabsFocused = activeElement.parents( 'li' ).length;

switch (e.which) {

case 32: // spacebar

case 38: // up

case 40: // down

if ( 0 < accordionToggleFocused || 0 < tabsFocused ) {

activeElement.click();

e.preventDefault();

}

break;

default:

return;

}

});

Now it works for these keyboard keys: space bar, arrow up, arrow down.
You can change it as you need. ( Number 37 is left and 39 is right arrow. )

Let us know if it helped.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Tabs, Toggles, and Accordions operated via keyboard

COFWebmaster — Mon, 26 Jun 2017 16:10:04 +0000

Hi,
In what JS file should I place these?
Thanks,
Gavin

Reply To: Tabs, Toggles, and Accordions operated via keyboard

IshYoBoy — Tue, 27 Jun 2017 05:46:25 +0000

Hi Gavin,

you can use child theme js file e.g. assets/js/my-custom.js
If you are not using any js file in your child theme, you can create one.

If you created this file, so you have to add this one line of code into functions.php of child theme into function multicorp_child_theme_enqueue_scripts to load added custom js file:
wp_enqueue_script( "child-main", get_stylesheet_directory_uri() . "/assets/js/my-custom.js", array('jquery'), null, true );

So function multicorp_child_theme_enqueue_scripts should looks like this:

function multicorp_child_theme_enqueue_scripts(){
	wp_register_style( "child-theme-css", get_stylesheet_directory_uri() . "/child-theme.css");
	wp_enqueue_style( "child-theme-css" );
	wp_enqueue_script( "child-main", get_stylesheet_directory_uri() . "/child-assets/js/my-custom.js", array('jquery'), null, true );
}
add_action( "wp_enqueue_scripts", "multicorp_child_theme_enqueue_scripts", 11);

function multicorp_child_theme_enqueue_scripts(){

wp_register_style( "child-theme-css", get_stylesheet_directory_uri() . "/child-theme.css");

wp_enqueue_style( "child-theme-css" );

wp_enqueue_script( "child-main", get_stylesheet_directory_uri() . "/child-assets/js/my-custom.js", array('jquery'), null, true );

}

add_action( "wp_enqueue_scripts", "multicorp_child_theme_enqueue_scripts", 11);

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market