nico3333fr / jquery-accessible-tabs-aria Goto Github PK

Hello,

This is my first contribution ever in Github, but I would like to thank you for this great plug-in, it works perfectly.

I have a question, and maybe an answer with my solution :)

I noticed that when the page was loaded, all the blocks were displayed. Very quickly, certainly, but enough to be a little embarrassing for me. So I search for a solution.

Instead of deleting the tag aria-hidden=true in the js file, we can set the "aria-hidden" to false.
With this, you can hide your div in an initial state and juste show the div with "aria-hidden=true".

What do you think about that ?

In the .js file we just need to change .removeAttr("aria-hidden"); to .attr("aria-hidden", "false");

Sorry for my bad english, and just tell me, if maybe I don't understand something.

Hello,

can you please add the posibility to use the browsers back button?

Thank you!

In one of our projects we need 2 levels of tabs. In order to test this we adapted the code sample to have a 2nd level of tabs in the "#id_first" tab. However, after the fourth tab, when moving right, the 5th one is opened (seems logique, but the 5th one is in fact a subtab of the first one). So the 5th tab should only open after we enter in the content tab of #id_first. Is there a workaround?

<div class="js-tabs">
	<ul class="js-tablist">
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_first" id="label_id_first">1st tab</a></li>
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_second" id="label_id_second">2nd tab</a></li>
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_third" id="label_id_third">3rd tab</a></li>
		<li class="js-tablist__item"><a class="js-tablist__link" href="#id_fourth" id="label_id_fourth">4th tab</a></li>
	</ul>
	<div class="js-tabcontent" id="id_first">
	here the content of 1 tab
		<div class="js-tabs">
			<ul class="js-tablist">
				<li class="js-tablist__item"><a class="js-tablist__link" href="#id_sub_1" id="label_id_sub_1">1st sub tab</a></li>
				<li class="js-tablist__item"><a class="js-tablist__link" href="#id_sub_2" id="label_id_sub_2">2nd sub tab</a></li>
			</ul>
			<div class="js-tabcontent" id="id_sub_1">sub tab 1</div>
			<div class="js-tabcontent" id="id_sub_2">sub tab 2</div>
		</div>
	</div>
	<div class="js-tabcontent" id="id_second">here the content of 2nd tab</div>
	<div class="js-tabcontent" id="id_third">here the content of 3rd tab</div>
	<div class="js-tabcontent" id="id_fourth">here the content of 4th tab</div>
</div>

Hi,

You should use the cache to list each tabs cf L16.

You can use:

// before
$tab_list = $( ".js-tablist" );

// After
var $tab_list = $tabs.find(".js-tablist");

It searches the DOM only in the context of $tabs ;)

Ref:

• http://programer.tips/2014/09/best-jquery-practices.html#caching-jquery-objects

Hi Nico.

FYI, Ctrl + Arrow can't be done with OSX, they're already taken (unless the user customize them). Lets allow Alt + Arrow too?

Hi @nico3333fr!

I used this plugin on https://netalis.fr and I had to add a fade in/out animation.

Sadly, to achieve that I had to wrap the content in an extradiv tag.
Here the code I used, maybe it could help you or someone else:

.js-tabcontent {
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0.4s, opacity 0.4s 0.4s;
}

.js-tabcontent > div {
  transition: margin-top 0s 0.4s;
}

.js-tabcontent[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.4s, opacity 0.4s;
}

.js-tabcontent[aria-hidden=true] > div {
  margin-top: -10000px
}

Thanks for creating and maintaining this project!
Thomas.

See the « publishing npm package » documentation.

We are using several instances of the tab-system on the same (large) page.
Atm the system opens the first tab of every instance. We'd like to tell the script to only automatically open the first tab of the first instance on the page (and not automatically open the first tabs of all other instances on that page) when the user enters the page. Is that possible?

Hello Nicolas,

I'm using your plugin with two levels of tabs, and I would like to know if there was a possibility to make a child tab opened by default (same that with data-selected=1) when clicking in the parent tab.

Tried to do it but I'm smashing my head on my keyboard right now :)

Thanks a lot ! Great plugin btw.

Hello,

I was trying to implement this tab system in a Glossary page, the tabs were the alphabet.

So in order to keep things simple, I changed:

id="label_id_first
id="label_id_second
id="label_id_third
…

to:

id="label_id_a
id="label_id_b
id="label_id_c
…

Now, when you go a URL with a fragment other than the first one, like http://domain.com/glossary#b it displays the content of the first tab.

See screenshots below.

Is there not a away to use other id labels rather than first, second, third?

Should come back to same tab button

Hi Nico,

Why did you use $('body') all along your document to bind elements?

For example:
$(".tabs__link").on("click", function(e)){});

shoul be more efficient than:
$("body").on("click", ".tabs__link", function(e)){});

It's not really an issue, more a curiosity.

Some reads:
http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document
http://www.sitepoint.com/jquery-body-on-document-on/

Thank you for your work!

Salut Nicolas,

Après discussion avec mes collègues et en repassant sur le modèle de conception ARIA des onglets tout à l'heure, j'ai découvert que le modèle de conception ARIA des onglets avait été modifié pour corriger un problème de navigation clavier très pénible notamment avec un lecteur d'écran.

En effet, la précédente version du modèle de conception indiquait qu'il fallait pouvoir naviguer dans la liste des onglets avec flèches haut, bas, gauche et droite.
Le problème est qu'on était alors coincé dans la boucle de navigation avec les flèches, dans la liste des onglets. Ainsi, il était difficile d'accéder au contenu qui s'affiche sous la liste puisqu'en faisant TAB, on peut arriver à un endroit très éloigné dans la page. Et en faisant flèche bas pour poursuivre la lecture, on changeait d'onglet.

Dans la nouvelle version du modèle (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel), seules les flèches gauche et droite doivent être utilisées. Les flèches haut et bas permettant alors d'accéder au contenu sous la liste de façon linéaire classique.

À noter que je vois dans ton système d'onglets que tu as mis un <h2> avec tabindex="0" et que celui-ci est masqué. Cela pose alors un problème de donner le focus à un élément qui n'est pas visible. Comment savoir où on se trouve alors ?

Avec la mise à jour du modèle, ce problème de focus sur un élément masqué pourra donc être également résolu au passage. :)

Et, bien sûr, je ne duplique pas le ticket mais c'est la même chose côté Van11y (sauf le titre masqué) ;-)

Merci à toi !

Hello again Nicolas,

This is not an issue per se, but here's something for you to think about. This is more from an HTML and CSS standpoints rather than JS.

Having all <li>s have the class class="js-tablist__link" may bloat the HTML unnecessarily. I also say this because seems that having the class in the <li>s is required, which I think having a class in them should be optional.

This:

<ul class="js-tablist">
    <li><a href="#a" id="label_a" class="js-tablist__link">A</a></li>
    <li><a href="#b" id="label_b" class="js-tablist__link">B</a></li>
    <li><a href="#c" id="label_c" class="js-tablist__link">C</a></li>
    <li><a href="#d" id="label_d" class="js-tablist__link">D</a></li>
…
</ul>

Can be turned into this:

<ul class="js-tablist">
    <li><a href="#a" id="label_a">A</a></li>
    <li><a href="#b" id="label_b">B</a></li>
    <li><a href="#c" id="label_c">C</a></li>
    <li><a href="#d" id="label_d">D</a></li>
…
</ul>

And if we need to target the <li>s or links, we do:

.js-tablist > li { … }
.js-tablist > li > a { … }

Just a thought, I do not know what the JS implications of this would be :)

Is it possible to disable URL fragments?

URL fragments can interfere with the back button. If you went through some tabs you need the the same amount of clicks/tabs to navigate to the previous page via the browser back button. Also, not every user understands URL fragments when copying URLs from the URL bar.

I can imagine that for some sites/pages it makes a lot of sense to utilize URL fragments on others not so much.

Hi,

You should use the keyword var for these variable declarations:
L12
L16

;)

Is it possible to add a script that will keep the current tab active on page reload? This is a major one.

Please add an x mark to the right corner of the tab. Clicking the x should close the tab

Hi @nico3333fr,

Thanks for some really nice jQuery plugins.

We have quite much editorial content in some of the tab, which could be a performance issue. Our idea is to load the the data, in the tab that is open by default, when the page is being rendered, and lazy load data with AJAX in the other tabs when they are activated.

Any constrains in this plugin causing that this is not possible? Or any concerns from an accessibility point of view?

Hello,
In the example (http://a11y.nicolas-hoffmann.net/tabs/), you use an invisible title H2, with a tabindex in order to make this element focusable.
Is it correct for WCAG ? I don't think so, the focus isn't visible :

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

This sounds like a great accessible-friendly plugin (https://a11y.nicolas-hoffmann.net/tabs/) b/c I noticed this is responsive.

However, when I downloaded this off from Github and tested it out, it isn't mobile - does not change to accordion (like this https://a11y.nicolas-hoffmann.net/tabs/)?

What am I missing? Does it required extra plugin?

Il manque aria-selected="true/false" sur les tabs qd ils sont actifs ou pas cf : http://www.w3.org/TR/wai-aria-practices/#tabpanel

Hello Nico,
I was just testing your example with my colleague who uses Jaws and we noticed that we couldn't read the content of the 1st, 2nd and 4th tab because it is not possible to move the focus there. The arrow keys change the focus between tabs and the only way to read the content of a tab is to first move the focus there by using the TAB key. This works for the 3rd tab because it has a form element, but not for the tabs that only contain text.

I went back to the design pattern. It says 'The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus. '.
I think the best solution is to allow the focus to be moved to the tabpanel div.

Thanks for creating this example,
Sophie