Giter VIP home page Giter VIP logo

jquery-accessible-hide-show-aria's Introduction

jQuery accessible hide/show using ARIA

A simple jQuery code to provide accessible hide/show system using ARIA.

Full demo is here: https://a11y.nicolas-hoffmann.net/hide-show/

This simple script transforms this simple piece of code:

    <h2 class="js-expandmore">
    	Content 1
    </h2> 
    <div class="js-to_expand">here a wonderful hidden content about content 1</div>
    <br /><br /><br />
    <h2 class="js-expandmore">
    	Content 2
    </h2> 
    <div class="js-to_expand is-opened">Lorem <a href="#">fdsfdsfds</a> ipsum about content 2 (opened by default)</div>
    <br /><br /><br />
    <h2 class="js-expandmore">Content 3 </h2>
    <div class="js-to_expand">here a wonderful hidden content about content 3</div>

into shiny accessible hide/show by adding ARIA attributes.

Keyboard navigation is supported, based on ARIA DP (http://heydonworks.com/practical_aria_examples/#progressive-collapsibles && http://www.oaa-accessibility.org/examplep/tabpanel1/):

Requirements

  • jQuery (others smaller libraries should be ok, but didn't test for the moment)
  • a small piece of CSS .js-to_expand[data-hidden=true] { display: none; }
  • or you may use npm i jquery-accessible-hide-show-aria

Optionnal

You may set up if you're using aria or data attributes.

For CSS, you may add:

.expandmore__button {
  background: none;
  font-size: inherit;
  color: inherit;
}

.expandmore__button[aria-expanded=false] > .expandmore__symbol:before,
.expandmore__button[data-expanded=false] > .expandmore__symbol:before{
  content : '+ ';
}
.expandmore__button[aria-expanded=true] > .expandmore__symbol:before,
.expandmore__button[data-expanded=true] > .expandmore__symbol:before{
  content : '− ';
}

Examples

This jQuery plugin doesn't style anything, styles can be added using other classes.

A demo page can be found here with additional features/docs: https://a11y.nicolas-hoffmann.net/hide-show/

Enjoy.

Vanilla version

This script exists also in a Vanilla-JS version, have a look at Van11y hide-show script.

Chuck Norris approved this

P.S: this plugin is in MIT license. It couldn't be done without the precious help of @ScreenFeedFr, @goetsu, @johan_ramon, @accesbilis, @Kozlika, @anneCav and @romaingervois.

jquery-accessible-hide-show-aria's People

Contributors

annecav avatar ffoodd avatar mahjouba91 avatar nico3333fr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

jquery-accessible-hide-show-aria's Issues

Action sur un élément qui n'est pas dans le même conteneur (mais dans le même parent)

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ô. ^^

Are anchored link supported?

When someone click a link with anchor and take them to another page, is it possible to expand that section open?

Define your own classname only once

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.

rails-assets.org compatibility

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:

  • go to the Releases tab
  • enter v1.4.0 for Tag Version
  • enter Recent commits / 9b7ad41 as Target
  • you can add a title and description but it's optional
  • click Publish Release

To 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!

Open with anchor on the same page doesn't work (feature request)

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

Question about browser compatibility

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?

Animate the icons

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.

Toggle to show all at once *by group*

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.

Bug on Chrome

If there is a span in h2.expandmore, Chrome doesn't detect the click correctly.

Reported by @Kozlika

Créer le bouton via js

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 ?

Add tests

To ensure that:

  • attributes are added, classes are there, and the correct elements are being added too.
  • JS interactions are fired correctly

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:

screenshot 2015-02-05 14 34 12

Handle appearance and no-js without setTimeout

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!

Toggle to show all at once

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!

Prefix JS hooks with js-

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.

same selector in documentation

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.