db1a37382c
- Stop hiding with display: none;, this hides our jump links from modern screen readers and users with motor disabilities (ie: nowadays, pratically everyone they are intended to help). - Instead hide with an overflow that will make the links viable <tab> targets. This alone is enough to help screen reader users. - Add in a script that will show the jump-links area on-focus for motor-impared users who can still see who have js enabled (this can't be done with css unfortunately)
15 lines
449 B
JavaScript
15 lines
449 B
JavaScript
/**
|
|
* JavaScript to show jump links to motor-impaired users when they are focused.
|
|
*/
|
|
jQuery( function( $ ) {
|
|
|
|
$('.mw-jump').delegate( 'a', 'focus blur', function( e ) {
|
|
// Confusingly jQuery leaves e.type as "focusout" for delegated blur events
|
|
if ( e.type === "blur" || e.type === "focusout" ) {
|
|
$( this ).closest( '.mw-jump' ).css({ height: '0' });
|
|
} else {
|
|
$( this ).closest( '.mw-jump' ).css({ height: 'auto' });
|
|
}
|
|
} );
|
|
|
|
} );
|