Permalink
Browse files

Tabbed interface: Fixed WAI-ARIA attributes in mobile view and added …

…print-active option

Fixes #6883
  • Loading branch information...
pjackson28 committed Jun 23, 2015
1 parent 14374b8 commit aec5eb68572722f2410f924c6e03f30ffa85962a
Showing with 108 additions and 19 deletions.
  1. +16 −1 site/pages/docs/ref/tabs/tabs-en.hbs
  2. +16 −1 site/pages/docs/ref/tabs/tabs-fr.hbs
  3. +40 −1 src/plugins/tabs/_print.scss
  4. +36 −16 src/plugins/tabs/tabs.js
@@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Dynamically stacks multiple sections of content, transforming them into a tabbed interface.",
"altLangPrefix": "tabs",
"dateModified": "2015-02-24"
"dateModified": "2015-06-23"
}
---
<span class="wb-prettify all-pre hide"></span>
@@ -287,6 +287,21 @@
</dl>
</td>
</tr>
<tr>
<td>Print only the active (visible) panel (<code>print-active</code>) (v4.0.15+)</td>
<td>Configure the tab interface to print only the active (visible) panel through the <code>print-active</code> class.</td>
<td>Add <code>print-active</code> after the <code>wb-tabs</code> class.
<pre><code>class="wb-tabs print-active"</code></pre>
</td>
<td>
<dl>
<dt>None (default):</dt>
<dd>All panels are printed</dd>
<dt><code>print-active</code></dt>
<dd>Only the active panel is printed</dd>
</dl>
</td>
</tr>
</tbody>
</table>
</section>
@@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher.",
"altLangPrefix": "tabs",
"dateModified": "2015-02-24"
"dateModified": "2015-06-23"
}
---
<span class="wb-prettify all-pre hide"></span>
@@ -287,6 +287,21 @@
</dl>
</td>
</tr>
<tr>
<td>Print only the active (visible) panel (<code>print-active</code>) (v4.0.15+)</td>
<td>Configure the tab interface to print only the active (visible) panel through the <code>print-active</code> class.</td>
<td>Add <code>print-active</code> after the <code>wb-tabs</code> class.
<pre><code>class="wb-tabs print-active"</code></pre>
</td>
<td>
<dl>
<dt>None (default):</dt>
<dd>All panels are printed</dd>
<dt><code>print-active</code></dt>
<dd>Only the active panel is printed</dd>
</dl>
</td>
</tr>
</tbody>
</table>
</section>
@@ -6,9 +6,14 @@
/**
* Print styles
*/
%tabs-print-display-none-important {
display: none !important;
}
.wb-tabs {
[role="tablist"] {
display: none !important;
@extend %tabs-print-display-none-important;
}
[role="tabpanel"] {
@@ -25,4 +30,38 @@
display: block !important;
}
}
&.print-active {
> {
.tabpanels {
> {
div {
&.out {
@extend %tabs-print-display-none-important;
}
}
details {
&.out {
.tgl-panel {
@extend %tabs-print-display-none-important;
}
}
> {
summary {
&[aria-expanded="false"] {
+ {
.tgl-panel {
@extend %tabs-print-display-none-important;
}
}
}
}
}
}
}
}
}
}
}
@@ -565,8 +565,9 @@ var componentName = "wb-tabs",
* @param {jQuery Object} $currentElm Element being initialized (only during initialization process).
*/
onResize = function( $currentElm ) {
var $elms, $elm, $tabPanels, $details, $tablist, $openDetails, openDetailsId,
$nonOpenDetails, $active, $summary, i, len, viewChange, isInit;
var $elms, $elm, $tabPanels, $details, $detailsElm, $tablist,
$openDetails, openDetailsId, activeId, $summary, $panelElm,
i, len, j, len2, viewChange, isInit, isActive;
if ( initialized ) {
isSmallView = document.documentElement.className.indexOf( smallViewPattern ) !== -1;
@@ -581,6 +582,7 @@ var componentName = "wb-tabs",
$elm = $elms.eq( i );
$tabPanels = $elm.children( ".tabpanels" );
$details = $tabPanels.children( "details" );
len2 = $details.length;
if ( $details.length !== 0 ) {
$tabPanels.detach();
@@ -590,19 +592,37 @@ var componentName = "wb-tabs",
if ( isSmallView ) {
// Switch to small view
$active = $tablist.find( ".active a" );
$details
.removeAttr( "role aria-expanded aria-hidden" )
.removeClass( "fade out in" )
.children( ".tgl-panel" )
.attr( "role", "tabpanel" );
$openDetails = $details
.filter( "#" + $active.attr( "href" ).substring( 1 ) )
.attr( "open", "open" )
.addClass( "open" );
$nonOpenDetails = $details.not( $openDetails )
.removeAttr( "open" )
.removeClass( "open" );
activeId = $tablist.find( ".active a" ).attr( "href" ).substring( 1 );
for ( j = 0; j !== len2; j += 1 ) {
$detailsElm = $details.eq( j );
$panelElm = $detailsElm.children( ".tgl-panel" );
isActive = $detailsElm.attr( "id" ) === activeId;
$detailsElm
.removeAttr( "role aria-expanded aria-hidden" )
.removeClass( "fade out in" )
.toggleClass( "open", isActive );
$panelElm
.attr( "role", "tabpanel" )
.removeAttr( "aria-expanded" )
.removeAttr( "aria-hidden" );
if ( isActive ) {
$detailsElm.attr( "open", "open" );
} else {
$detailsElm.removeAttr( "open" );
}
if ( !isInit ) {
$detailsElm
.children( "summary" )
.attr( {
"aria-expanded": isActive,
"aria-selected": isActive
} );
}
}
} else if ( oldIsSmallView ) {
// Switch to large view
@@ -644,7 +664,7 @@ var componentName = "wb-tabs",
$elm.append( $tabPanels );
// Update the tablist role
if ( isSmallView ) {
if ( isSmallView && !isInit ) {
$elm.attr( "role", "tablist" );
} else if ( oldIsSmallView ) {
$elm

0 comments on commit aec5eb6

Please sign in to comment.