npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cmkm/aria-accordion

v1.2.2

Published

A simple, accessible, ARIA accordion

Downloads

106

Readme

18F Aria-Accordion

Build Status Test Coverage

About

A simple, accessible JavaScript accordion.

Getting started

Download

Via npm

npm install aria-accordion

Set up your HTML

	<ul class="js-accordion">
	    <li>
	      <button>
	        First Amendment
	      </button>
	      <div>
	        <p>
	        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
	        </p>
	      </div>
	    </li>
	    <li>
	      <button>
	        Second Amendment
	      </button>
	      <div>
	        <p>
	        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
	        </p>
	      </div>
	    </li>
   </ul>

Simply create a series of <button> elements followed by <div>s and this will take care of the rest, adding the proper ARIA attributes. You can add custom IDs to the <div>s and the library will default to those. If you don't add IDs the library will generate them for you.

Initialize

In whichever file you initialize your JavaScript components, initialize the accordion like so:

	var accordion = require('@18f/accordion');

	// Required element to turn into an accordion
	var elm = document.querySelector('.js-accordion');

	// Optional configurion objects
	var selectors = { ... };
	var opts = { ... };

	new accordion.Accordion(elm, selectors, opts);

Configuration

The constructor requires an HTML element to turn into the accordion.

The constructor accepts an optional hash of selectors as its second parameter:

  • trigger: CSS selector for the elements to turn into the accordion triggers. The component will look for these items' next sibling to turn into the accordion content that is hidden and revealed. Default: button

You can also pass a hash of options. Currently, the only option is:

  • collapseOthers: Boolean for whether or not to collapse all other panels when one panel is open. Default: false
  • customHiding: Boolean for whether or not to use your own CSS to hide collapsed content areas. Default: false
  • contentPrefix: String prefix for the content div IDs in order to have multiple accordions on the same page. Default: accordion
  • openFirst: Boolean for whether or not to open the first item by default. Default: false
  • reflectStatic: Boolean for whether or not the accordion should reflect any attributes (aria-hidden and aria-expanded) that were rendered statically. Default: false
  • customTargets: Boolean for whether custom target elements (not defaulting to next sibling) are being used (via aria-controls on trigger element). Default: false

Styling

You're free to add classes and style your markup however you please. By default, the component sets any content element with [aria-hidden="true"] to display: none inline, but you can override this to use your own custom hiding styles with the customHiding property. To style the buttons when they panel is open vs closed, target [aria-expanded="true"].

License

Public domain

This project is in the worldwide public domain. As stated in CONTRIBUTING:

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.