set/remove @disabled on navigation buttons
Keeps disabled buttons out of kbd tab order and indicates to assistive tech like screen readers that button is disabled. Otherwise buttons that aren’t enabled remain in kbd Tab order and screen readers announce them as buttons, but they don’t work.edit
parent
3d49b1dea3
commit
fb8bbaac00
28
js/reveal.js
28
js/reveal.js
|
@ -2652,34 +2652,36 @@
|
||||||
.concat( dom.controlsNext ).forEach( function( node ) {
|
.concat( dom.controlsNext ).forEach( function( node ) {
|
||||||
node.classList.remove( 'enabled' );
|
node.classList.remove( 'enabled' );
|
||||||
node.classList.remove( 'fragmented' );
|
node.classList.remove( 'fragmented' );
|
||||||
|
// Set 'disabled' attribute on all directions
|
||||||
|
node.setAttribute('disabled', 'disabled');
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Add the 'enabled' class to the available routes
|
// Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons
|
||||||
if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); } );
|
if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); } );
|
if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); } );
|
if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( routes.down ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'enabled' ); } );
|
if( routes.down ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
|
|
||||||
// Prev/next buttons
|
// Prev/next buttons
|
||||||
if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); } );
|
if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); } );
|
if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
|
|
||||||
// Highlight fragment directions
|
// Highlight fragment directions
|
||||||
if( currentSlide ) {
|
if( currentSlide ) {
|
||||||
|
|
||||||
// Always apply fragment decorator to prev/next buttons
|
// Always apply fragment decorator to prev/next buttons
|
||||||
if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
|
if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
|
if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
|
|
||||||
// Apply fragment decorators to directional buttons based on
|
// Apply fragment decorators to directional buttons based on
|
||||||
// what slide axis they are in
|
// what slide axis they are in
|
||||||
if( isVerticalSlide( currentSlide ) ) {
|
if( isVerticalSlide( currentSlide ) ) {
|
||||||
if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
|
if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
|
if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
|
if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
|
if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute('disabled'); } );
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue