nico3333fr / jquery-accessible-hide-show-aria Goto Github PK
View Code? Open in Web Editor NEWA simple jQuery code to provide accessible hide/show system using ARIA
License: MIT License
A simple jQuery code to provide accessible hide/show system using ARIA
License: MIT License
In your documentation page, there is a double same selector (or did I misread?) :
/* optional */
.expandmore__button:before,
.expandmore__button:before {
content : '+ ';
}
Anyway, thanks A LOT for this plugin <3
Hallo,
Thank you for this very useful plugin.
I would like to ask about cross-browser compatibility.
Are there any clues about compatibility with mobile browsers for example?
Suggested by @goetsu at Paris Web.
Salut Nico, une remarque et une question. La remarque : pour moi le bouton devrait être créé par le js, sans js activé il n'a pas de raison d'être. La question : quelle est la nécessité du couple labelled-by/id ?
This is probably a long shot but is it possible to animate the "minus/down" and "plus/up" icon when clicking to expand/contract? It also helped them knowing that it's being animated instead of non-animated/fast version. I was hoping it can be used with FontAwesome icons.
Thank you for this very useful plugin!
Is there an option to toggle to open all at once? Same thing for close? That would be very helpful. Thanks!
No more to say.
Related to #9 I think we can find a better way to handle this case, depending on the browser compatibility you want.
You may hide content from the beginning, as a default state, then trigger an animation on .no-js
class:
@keyframes no-js {
to {
transform: none;
transition-delay: 50ms, 0ms;
visibility: visible;
}
}
js-to_expand {
visibility: hidden;
}
.no-js .js-to_expand {
animation: 300ms ease-in 300ms forwards no-js;
}
I made a small pen to play with it.
I know you're not delivering CSS along with your script but that may be another way of styling to mention :)
I'd love to have your opinion on this!
I try to use this for additional Information on the same page (with anchors) like:
<a class="xyz" href="#box-download">Downloads</a>
and then the box itselve:
<div id="box-download-wrapper" class="">
<h5 class="js-expandmore">Downloads</h5>
<div class="js-to_expand">
<div id="box-download" class="expand-inner">
<ul>
<li><a href="" class="">Download</a></li>
...
</ul>
</div>
</div>
</div>
When i open this in a new window with http://domain.org/page.html#box-download everything is fine. Sadly it doesn't work when i just click on the link when i am on the same page.
It would be usefull, when there is an onclick handler for something like that.
regards
Now we have a button to toggle/display all at once, thank you nico. But sometimes, we just want to toggle/display a group of elements, not all of them. Sorry my english is too bad, I switch in french right away :)
On devrait pouvoir "tout" ouvrir/fermer en fonction d'une section/div et pas tous les éléments repliables de toute la page. Typiquement, on imagine une page à deux colonnes : une FAQ en partie centrale et des boîtes de filtres repliables dans une colonne latérale. Je devrais pouvoir ouvrir toute la FAQ sans ouvrir les filtres et vice-versa.
Hi,
I was trying to add this package to rails-assets.org for use with the Rails asset pipeline, but it complains with the following error message:
jquery-accessible-hide-show-aria has no versions defined. Please create an issue in component's repository.
It seems that rails-assets.org will look for the current version Tag in the Git repo. Could you please add the tag for v1.4.0
? The easiest way to do this would be to create a new Release on Github:
v1.4.0
for Tag Version9b7ad41
as TargetTo check if it works now you can try to add the package to rails-assets.org via https://rails-assets.org/components/new.
Thanks a lot!
Hello
I want rework this code and I need to know why uses variables for this attributes names. Can you help ?
these are recommended settings by a11y experts. You may update to fulfill your needs, but be sure of what you’re doing.
Classes used as DOM hooks for the JS (and not for styling) should be differentiated. Usually it's done by prefixing these classes with js-
, but you could also use data-js-xxx
or data-xxx-js
attributes which would have the same effect.
See the « publishing npm package » documentation.
To ensure that:
With Karma, for example.
And then automate these tests using Travis, enabling you to see if other developers' contributions pass the tests, as in this screenshot:
I noticed the "Expand all" button doesn't work on keyboard properly.
If you hit Enter, it doesn't do anything.
If you hit Spacebar, it sort of worked but not working as expected.
The mouse click state is fine though.
You can test the "expand all" button on your page: https://a11y.nicolas-hoffmann.net/hide-show/
This avoid problems in Sharepoint and in forms.
If there is a span in h2.expandmore, Chrome doesn't detect the click correctly.
Reported by @Kozlika
A quick question: what's the benefit of generating and adding it to element in jquery vs using directly in HTML? Is it because for accessibility?
If you want to set your own classname for $to_expand
, you have to set it twice at the moment:
In line 16 you define your var like this: $to_expand = $('.js-to_expand')
.
In line 28 you don’t use this var but instead you use the classname again: $to_expand = $this.next(".js-to_expand")
.
As expected it would be nice to define your own classname only once inside the vars at the top.
Hello,
In order to allow assistive technologies to focus on content, there should be an aria-controls
attribute on buttons with the "id" of the content to expand as value.
More details: https://www.w3.org/TR/wai-aria-practices/#accordion
Salut Nico,
Je souhaites utiliser ton plugin sur mon futur blog. A coté du titre, je souhaite mettre le boutton expandmore__button pour afficher le chapo de l'article. Le soucis, c'est que le bouton n'est pas dans le même conteneur que le texte caché. En revanche, il est dans le même parent.
C'est possible de faire ça ou faut obbligatoirement que mon bouton soit dans le même conteneur ?
J'ai essayé de bricoler avec une position absolute mais c'est pas bô. ^^
When someone click a link with anchor and take them to another page, is it possible to expand that section open?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.