From 1d9d3b5351405a62eb5211d74a0d751bd939d31c Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 29 Dec 2021 01:46:45 +0530 Subject: [PATCH] side navigation accessibility --- assets/js/showcase/globals/side-navigation.js | 29 +++++++++++++++++++ page-sidenav.html | 24 +++++++-------- 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/assets/js/showcase/globals/side-navigation.js b/assets/js/showcase/globals/side-navigation.js index aafe9580..dcef5580 100644 --- a/assets/js/showcase/globals/side-navigation.js +++ b/assets/js/showcase/globals/side-navigation.js @@ -24,10 +24,23 @@ dataBox = wrapper.find( 'div[data-tab="' + dataNav + '"]' ) ; + parent.find( 'li a' ).attr({ + 'tabindex': '-1', + 'aria-selected': 'false', + 'active': 'false' + }); parent.find( 'li' ).removeClass( 'current' ); button.parent().addClass( 'current' ); + button.attr({ + 'tabindex': '0', + 'aria-selected': 'true', + 'active': 'true' + }); + button.focus(); + content.attr({ 'aria-hidden': 'true' }); content.hide(); + dataBox.attr({ 'aria-hidden': 'false' }); dataBox.show(); } @@ -42,6 +55,22 @@ e.stopPropagation(); }); + + // change content tab on arrow click + $( '.sui-vertical-tabs' ).on( 'keydown', 'a', function( e ) { + var prev = $( this ).parent().prev().find( 'a' ); + var next = $( this ).parent().next().find( 'a' ); + if ( 37 === e.keyCode || 38 === e.keyCode ) { + if ( prev.length ) { + prev.trigger( 'click' ); + } + } else if ( 39 === e.keyCode || 40 === e.keyCode ) { + if ( next.length ) { + next.trigger( 'click' ); + } + } + e.preventDefault(); + }); } init(); diff --git a/page-sidenav.html b/page-sidenav.html index 903e9b6b..d47ffcf8 100644 --- a/page-sidenav.html +++ b/page-sidenav.html @@ -15,16 +15,16 @@