feat: add proper ARIA attributes to lazyloaded transclusions

This commit is contained in:
alistair3149 2022-04-18 23:09:13 -04:00
parent 893611e41d
commit 7504ce5cd2
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C

View file

@ -198,10 +198,12 @@ function initTabber( tabber, count ) {
activePanel = section.querySelector( ':scope > .' + ACTIVEPANELCLASS ),
parentPanel, parentSection;
if ( allowRemoteLoad && targetPanel.dataset.tabberPendingLoad && targetPanel.dataset.tabberLoadUrl ) {
var loadTransclusion = function() {
var loading = document.createElement( 'div' ),
indicator = document.createElement( 'div' );
targetPanel.setAttribute( 'aria-live', 'polite' );
targetPanel.setAttribute( 'aria-busy', 'true' );
loading.setAttribute( 'class', 'tabber__transclusion--loading' );
indicator.setAttribute( 'class', 'tabber__loading-indicator' );
loading.appendChild( indicator );
@ -237,6 +239,11 @@ function initTabber( tabber, count ) {
targetPanel.classList.add( ACTIVEPANELCLASS );
targetPanel.setAttribute( 'aria-hidden', false );
// Lazyload transclusion if needed
if ( allowRemoteLoad && targetPanel.dataset.tabberPendingLoad && targetPanel.dataset.tabberLoadUrl ) {
loadTransclusion();
}
updateSectionHeight( section, targetPanel );
// If we're inside another tab, trigger its logic to recalc its height
@ -274,6 +281,7 @@ function initTabber( tabber, count ) {
mw.hook( 'wikipage.content' ).fire( $( targetPanel ) );
delete targetPanel.dataset.tabberPendingLoad;
delete targetPanel.dataset.tabberLoadUrl;
targetPanel.setAttribute( 'aria-busy', 'false' );
}
var ACTIVEPANELCLASS = 'tabber__panel--active',