StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-27 09:42:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use aria attribute instead of class to select tabs

Browse source
This commit is contained in:
alistair3149 2022-10-23 17:07:19 -04:00
parent 1cb5cfb6c7
commit 9349bc334e
No known key found for this signature in database
2 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
modules/ext.tabberNeue.js
View file

@ -5,7 +5,7 @@
* @param {number} count
*/
function initTabber( tabber, count ) {
var ACTIVETABCLASS = 'tabber__tab--active';
var ACTIVETAB_SELECTOR = '[aria-selected="true"]';
var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' );
@ -119,7 +119,7 @@ function initTabber( tabber, count ) {
};
var updateIndicator = function () {
var activeTab = tabList.querySelector( '.' + ACTIVETABCLASS );
var activeTab = tabList.querySelector( ACTIVETAB_SELECTOR );
var width = getActualSize( activeTab, 'width' );
indicator.style.width = width + 'px';
@ -280,13 +280,12 @@ function initTabber( tabber, count ) {
/* eslint-disable mediawiki/class-doc */
if ( activePanel ) {
// Just to be safe since there can be multiple active classes
// Just to be safe since there can be multiple active tabs
// even if there shouldn't be
var activeTabs = tabList.querySelectorAll( '.' + ACTIVETABCLASS );
var activeTabs = tabList.querySelectorAll( ACTIVETAB_SELECTOR );
if ( activeTabs.length > 0 ) {
Array.prototype.forEach.call( activeTabs, function ( activeTab ) {
activeTab.classList.remove( ACTIVETABCLASS );
activeTab.setAttribute( 'aria-selected', false );
} );
}
@ -300,7 +299,6 @@ function initTabber( tabber, count ) {
}
// Add active class to the tab
targetTab.classList.add( ACTIVETABCLASS );
targetTab.setAttribute( 'aria-selected', true );
targetPanel.classList.add( ACTIVEPANELCLASS );
targetPanel.setAttribute( 'aria-hidden', false );

6
modules/ext.tabberNeue.less
View file

@ -92,10 +92,10 @@
}
&__indicator {
border-radius: @height-indicator;
margin-top: @height-indicator * -1;
background: #36c;
block-size: @height-indicator;
border-radius: @height-indicator;
inline-size: 0;
}
@ -128,8 +128,8 @@
text-decoration: none;
}
&--active,
&--active:visited {
&[ aria-selected='true' ],
&[ aria-selected='true' ]:visited {
color: #36c;
}
}