Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♿ aria(popup): added hustle popup keyboard accessibility. #77

Merged
merged 8 commits into from
Feb 18, 2023
Prev Previous commit
Next Next commit
♿ aria(popup): added trap focus for popup and slidein.
  • Loading branch information
creador-dev committed Dec 15, 2022
commit 78ef3f76ff765ce8da17b23b0f65f901ef07e16b
8 changes: 5 additions & 3 deletions library/js/popup-close.js
Original file line number Diff line number Diff line change
@@ -94,10 +94,12 @@
if ( ! $( '.hustle-show.hustle-scroll-forbidden' ).length ) {
$( 'html' ).removeClass( 'hustle-no-scroll' );
}

// Restore focus to the previously focused element
focusedElementBeforeModal.focus();
}, delay );

console.log( focusedElementBeforeModal );

// Restore focus to the previously focused element
focusedElementBeforeModal.focus();
}

function init() {
9 changes: 5 additions & 4 deletions library/js/popup-load.js
Original file line number Diff line number Diff line change
@@ -11,6 +11,8 @@

const popup = $( el );
const content = popup.find( '.hustle-popup-content' );
const popupId = popup.attr( 'id' );
const popupWrapper = $( '#' + popupId ).find( '.hustle-layout' );

if ( ! popup.is( '.hustle-popup' ) ) {
return;
@@ -108,7 +110,6 @@

function init() {

// Get the element that was focused before the modal was opened
var focusedElementBeforeModal = document.activeElement;

popup.removeClass( 'hustle-show' );
@@ -117,16 +118,16 @@
// Module time.
popup.addClass( 'hustle-show' );

popup.attr( 'tabindex', '1' );
popupWrapper.attr( 'tabindex', '0' );

// Layout time.
setTimeout( function() {
animationIn();
$( document ).trigger( 'hustle:module:displayed', popup );
trapFocus( popup[0].id );
trapFocus( popupId );
}, 200 );

$( '#' + popup[0].id ).focus();
popupWrapper.focus();

// resize iframes, object and videos
resizeObjectsInContent();
8 changes: 5 additions & 3 deletions library/js/slidein-close.js
Original file line number Diff line number Diff line change
@@ -44,10 +44,12 @@
setTimeout( function() {
slidein.removeClass( 'hustle-show' );
content.removeClass( 'hustle-animate-out' );

// Restore focus to the previously focused element
focusedElementBeforeModal.focus();
}, 1000 );

console.log( focusedElementBeforeModal );

// Restore focus to the previously focused element
focusedElementBeforeModal.focus();
}

function init() {
34 changes: 15 additions & 19 deletions library/js/slidein-load.js
Original file line number Diff line number Diff line change
@@ -11,6 +11,9 @@

const slidein = $( el );
const content = slidein.find( '.hustle-slidein-content' );
const focusedElementBeforeModal = document.activeElement;
const slideinId = slidein.attr( 'id' );
const slideinWrapper = $( '#' + slideinId ).find( '.hustle-layout' );

if ( ! slidein.is( '.hustle-slidein' ) ) {
return;
@@ -91,47 +94,40 @@
}

if ( e.shiftKey ) /* shift + tab */ {
if ( document.activeElement === firstFocusableEl ) {
lastFocusableEl.focus();
e.preventDefault();
}
if ( document.activeElement === firstFocusableEl ) {
lastFocusableEl.focus();
e.preventDefault();
}
} else /* tab */ {
if ( document.activeElement === lastFocusableEl ) {
firstFocusableEl.focus();
e.preventDefault();
}
if ( document.activeElement === lastFocusableEl ) {
firstFocusableEl.focus();
e.preventDefault();
}
}
});
}

function init() {

// Get the element that was focused before the modal was opened
var focusedElementBeforeModal = document.activeElement;

reset();
position();

slidein.attr( 'tabindex', '1' );

// Module time.
setTimeout( function() {
jQuery( window ).trigger( 'resize' );
show();
}, 800 );

slideinWrapper.attr( 'tabindex', '0' );

// Layout time.
setTimeout( function() {
animation();
$( document ).trigger( 'hustle:module:displayed', slidein );
trapFocus( slidein[0].id );
trapFocus( slideinId );
slideinWrapper.focus();
}, 1000 );

setTimeout( function() {
$( '#' + slidein[0].id ).focus();
console.log( document.activeElement );
}, 1200 );

HUI.slideinClose( el, autohideDelay, focusedElementBeforeModal );
}