Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replace aria-hidden with hidden attribute #15

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

replace aria-hidden with hidden attribute #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40b35fb
replace aria-hidden with hidden attribute - issue #12
enwin Jun 18, 2020
98788f5
README fixes
enwin Jun 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ If you wish to open one specific tab when the script starts, just add the `data-

### CSS

At least a <abbr title="Cascading Style Sheets">CSS</abbr> selector for panels to be hidden when not selected:
At least a <abbr title="Cascading Style Sheets">CSS</abbr> selector for panels to be hidden when not selected for [legacy browsers](https://caniuse.com/#feat=hidden) compatibility (Internet Explorer < 11>):

```css
[role=tabpanel][aria-hidden=true] {
[role=tabpanel][hidden] {
display: none;
}
```
Expand Down Expand Up @@ -92,7 +92,7 @@ Now to kick off the script:
var list = document.querySelector( '[role="tablist"]' );

// create the tablist instance
var tablist = new window.Tablist( list );
var tablist = new Tablist( list );

// optionnaly add callbacks to on show and hide a tab
tablist.on( 'show', function( tab, tabPanel ){
Expand All @@ -119,7 +119,7 @@ As the script takes only one `tablist` element as parameter you have to loop ove
var lists = document.querySelectorAll( '[role="tablist"]' );

Array.prototype.forEach.call( lists, function( list ) {
new window.Tablist( list ).mount();
new Tablist( list ).mount();
});
```

Expand All @@ -134,7 +134,7 @@ The `Tablist` constructor returns 4 methods:

## Properties

To know which `tab` and `tabPanel` is open use `tablist.current`. It will return an array containing `tab` and `tabPanel`
To know which `tab` and `tabPanel` is open use `tablist.current`. It will return an object containing `tab` and `tabPanel`

```js
// ES6 destructuring array
Expand Down
16 changes: 10 additions & 6 deletions dist/tablist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* @accede-web/tablist - WAI-ARIA tablist plugin based on AcceDe Web accessibility guidelines
* @version v2.0.2
* @version v2.1.0
* @link http://a11y.switch.paris/
* @license ISC
**/
Expand Down Expand Up @@ -262,7 +262,7 @@
}

/**
* Toggle the `aria-hidden` attribute on the tabpanel based on the passed tab
* Toggle the `hidden` attribute on the tabpanel based on the passed tab
* @param {integer} index - index of the tab
* @param {boolean} show - whether or not display the panel
*/
Expand All @@ -279,16 +279,17 @@
this._toggleDisplay(this._tablist.openedIndex, false);
}

tabPanel.setAttribute('aria-hidden', !show);

if (show) {
tabPanel.removeAttribute('hidden');
this._tablist.openedIndex = index;

if (this._tablist.openedIndex !== undefined) {
this._trigger('show', [tab, tabPanel]);
}
} else if (this._tablist.openedIndex !== undefined) {
this._trigger('hide', [tab, tabPanel]);

tabPanel.setAttribute('hidden', 'hidden');
}
}

Expand Down Expand Up @@ -354,7 +355,10 @@

// set the attributes according the the openedTab status
tab.setAttribute('tabindex', -1);
tabPanel.setAttribute('aria-hidden', !openedTab);

if (!openedTab) {
tabPanel.setAttribute('hidden', 'hidden');
}

// subscribe internal events for tab and tap panel
tab.addEventListener('click', this._handleDisplay);
Expand Down Expand Up @@ -438,7 +442,7 @@

tabPanel.removeEventListener('focus', this._handlePanelFocus, true);
tabPanel.removeEventListener('keydown', this._handlePanel);
tabPanel.setAttribute('aria-hidden', 'false');
tabPanel.removeAttribute('hidden');
});

this._tablist = {};
Expand Down
4 changes: 2 additions & 2 deletions dist/tablist.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 9 additions & 5 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ class Tablist{


/**
* Toggle the `aria-hidden` attribute on the tabpanel based on the passed tab
* Toggle the `hidden` attribute on the tabpanel based on the passed tab
* @param {integer} index - index of the tab
* @param {boolean} show - whether or not display the panel
*/
Expand All @@ -272,9 +272,8 @@ class Tablist{
this._toggleDisplay( this._tablist.openedIndex, false );
}

tabPanel.setAttribute( 'aria-hidden', !show );

if( show ){
tabPanel.removeAttribute( 'hidden' );
this._tablist.openedIndex = index;

if( this._tablist.openedIndex !== undefined ){
Expand All @@ -283,6 +282,8 @@ class Tablist{
}
else if( this._tablist.openedIndex !== undefined ){
this._trigger( 'hide', [ tab, tabPanel ]);

tabPanel.setAttribute( 'hidden', 'hidden' );
}
}

Expand Down Expand Up @@ -349,7 +350,10 @@ class Tablist{

// set the attributes according the the openedTab status
tab.setAttribute( 'tabindex', -1 );
tabPanel.setAttribute( 'aria-hidden', !openedTab );

if( !openedTab ){
tabPanel.setAttribute( 'hidden', 'hidden' );
}

// subscribe internal events for tab and tap panel
tab.addEventListener( 'click', this._handleDisplay );
Expand Down Expand Up @@ -433,7 +437,7 @@ class Tablist{

tabPanel.removeEventListener( 'focus', this._handlePanelFocus, true );
tabPanel.removeEventListener( 'keydown', this._handlePanel );
tabPanel.setAttribute( 'aria-hidden', 'false' );
tabPanel.removeAttribute( 'hidden' );
});


Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"title": "AcceDe Web - tablist",
"name": "@accede-web/tablist",
"version": "2.0.2",
"version": "2.1.0",
"description": "WAI-ARIA tablist plugin based on AcceDe Web accessibility guidelines",
"main": "dist/tablist.js",
"module": "lib/index.js",
Expand Down
4 changes: 2 additions & 2 deletions test/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,7 @@ vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
overflow: hidden;
transition: height 0.4s;
}
.accordion [role=tabpanel][aria-hidden="true"] {
.accordion [role=tabpanel][hidden] {
display: none
}
.accordion [role=tabpanel] p {
Expand Down Expand Up @@ -693,7 +693,7 @@ vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
margin: 0 auto;
max-width: 56.25rem;
}
.tab [role=tabpanel][aria-hidden="true"] {
.tab [role=tabpanel][hidden] {
display: none;
}
.tab [role=tabpanel] p {
Expand Down
8 changes: 4 additions & 4 deletions test/tab-opened.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,16 @@ <h2 class="title-block">
<li id="tab3" role="tab" aria-controls="tabpanel3" disabled="disabled">Onglet désactivé</li>
<li id="tab4" role="tab" aria-controls="tabpanel4">Onglet n<sup>o</sup> 4</li>
</ul>
<div id="tabpanel1" role="tabpanel" aria-hidden="false">
<div id="tabpanel1" role="tabpanel">
<p>Le saviez-vous ? Le motif de conception « onglet » est très similaire à celui des « accordéons ». Ils partagent en effet les mêmes rôles ARIA : <em lang="en">tablist</em>, <em lang="en">tab</em> et <em lang="en">tabpanel</em>. Ils se démarquent principalement par les raccourcis clavier utilisables. N’hésitez pas à aller voir la <a href="http://www.accede-web.com/notices/interface-riche/accordeons/">notice d’accessibilité des accordéons</a> ainsi que la page de <a href="/accordion.html">démonstration du composant « accordéons »</a>.</p>
</div>
<div id="tabpanel2" role="tabpanel" aria-hidden="false">
<div id="tabpanel2" role="tabpanel">
<p>Lorem ipsum tab 2 <a href="#">link</a></p>
</div>
<div id="tabpanel3" role="tabpanel" aria-hidden="false">
<div id="tabpanel3" role="tabpanel">
<p>Lorem ipsum tab 3 <a href="#">link</a></p>
</div>
<div id="tabpanel4" role="tabpanel" aria-hidden="false">
<div id="tabpanel4" role="tabpanel">
<p>Lorem ipsum tab 4 <a href="#">link</a></p>
</div>
</section>
Expand Down
8 changes: 4 additions & 4 deletions test/tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,16 @@ <h2 class="title-block">
<li id="tab3" role="tab" aria-controls="tabpanel3" disabled="disabled">Onglet désactivé</li>
<li id="tab4" role="tab" aria-controls="tabpanel4">Onglet n<sup>o</sup> 4</li>
</ul>
<div id="tabpanel1" role="tabpanel" aria-hidden="false">
<div id="tabpanel1" role="tabpanel">
<p>Le saviez-vous ? Le motif de conception « onglet » est très similaire à celui des « accordéons ». Ils partagent en effet les mêmes rôles ARIA : <em lang="en">tablist</em>, <em lang="en">tab</em> et <em lang="en">tabpanel</em>. Ils se démarquent principalement par les raccourcis clavier utilisables. N’hésitez pas à aller voir la <a href="http://www.accede-web.com/notices/interface-riche/accordeons/">notice d’accessibilité des accordéons</a> ainsi que la page de <a href="/accordion.html">démonstration du composant « accordéons »</a>.</p>
</div>
<div id="tabpanel2" role="tabpanel" aria-hidden="false">
<div id="tabpanel2" role="tabpanel">
<p>Lorem ipsum tab 2 <a href="#">link</a></p>
</div>
<div id="tabpanel3" role="tabpanel" aria-hidden="false">
<div id="tabpanel3" role="tabpanel">
<p>Lorem ipsum tab 3 <a href="#">link</a></p>
</div>
<div id="tabpanel4" role="tabpanel" aria-hidden="false">
<div id="tabpanel4" role="tabpanel">
<p>Lorem ipsum tab 4 <a href="#">link</a></p>
</div>
</section>
Expand Down
Loading