Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgarber623
jgarber623 committed Aug 10, 2023
1 parent 534eb00 commit d526c41
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 56 deletions.
27 changes: 8 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

- Uses ARIA States and Properties
- Dependency-free
- ES2015/AMD/Node module support
- ESM/AMD/CommonJS module support

## Getting aria-collapsible

Expand All @@ -29,7 +29,7 @@ To use aria-collapsible, your markup needs two elements: a **control** and a **r
The two elements are associated by adding an `aria-controls="region"` attribute to the **control**. The value of the `aria-controls` attribute corresponds to the value of the **region**'s `id` attribute.

```html
<button type="button" aria-controls="region" aria-expanded="true" aria-hidden id="control">Menu</button>
<button aria-controls="region" aria-expanded="true" id="control" hidden>Menu</button>

<nav id="region">
<ul>
Expand All @@ -42,19 +42,9 @@ The two elements are associated by adding an `aria-controls="region"` attribute
</nav>
```

### CSS

Most browsers don't natively hide elements with the `aria-hidden` attribute so you'll need to add the following to your stylesheet:

```css
[aria-hidden] {
display: none !important;
}
```

### JavaScript

Lastly, initialize aria-collapsible by creating a `new Collapsible`, passing in a DOM reference to the **control**, and calling the `setup()` method.
Initialize aria-collapsible by creating a `new Collapsible`, passing in a DOM reference to the **control**, and calling the `setup()` method.

```js
const collapsible = new Collapsible(document.querySelector('#control'));
Expand All @@ -70,7 +60,7 @@ Collapsible regions can be shown and hidden programatically using the `toggle()`
collapsible.toggle();
```

You can also teardown a collapsible region, resetting the DOM to its initial state and removing event handlers:
You can also tear down a collapsible region, resetting the DOM to its initial state and removing event handlers:

```js
collapsible.teardown();
Expand All @@ -90,11 +80,10 @@ aria-collapsible, in an effort to remain as lightweight and dependency-free as p

aria-collapsible is inspired by the following works:

- Steve Faulkner's article, [HTML5 Accessibility Chops: hidden and aria-hidden](http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)
- Heydon Pickering's [Progressive collapsibles demo](http://heydonworks.com/practical_aria_examples/#progressive-collapsibles)
- Nicolas Hoffman's [jQuery collapsible regions plugin](http://a11y.nicolas-hoffmann.net/hide-show/)

Special thanks to [Jeremy Fields](http://ten1seven.com/) for his help testing with [VoiceOver](https://www.apple.com/accessibility/osx/voiceover/).
- Steve Faulkner's article, [HTML5 Accessibility Chops: hidden and aria-hidden](https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)
- Heydon Pickering's [Progressive collapsibles demo](https://web.archive.org/web/20150321045553/http://heydonworks.com:80/practical_aria_examples/#progressive-collapsibles)
- Nicolas Hoffman's [jQuery collapsible regions plugin](https://a11y.nicolas-hoffmann.net/hide-show/)
- Adrian Roselli's article, [Disclosure Widgets](https://adrianroselli.com/2020/05/disclosure-widgets.html)

aria-collapsible is written and maintained by [Jason Garber](https://sixtwothree.org/) with the help of [some great contributors](https://github.com/jgarber623/aria-collapsible/graphs/contributors).

Expand Down
84 changes: 47 additions & 37 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,28 @@
<title>aria-collapsible: Example</title>

<style>
[aria-hidden] {
display: none !important;
}

*:focus {
outline: 0.125em solid #f00;
outline: 0.125rem solid #f00;
}

body {
font-family: sans-serif;
margin: 0;
padding: 3em;
padding: 3rem;
}

h1 {
font-family: Georgia, serif;
font-size: 2.5rem;
font-weight: normal;
margin: 0 0 1.5rem 0;
}

p {
font-family: Georgia, serif;
font-size: 1.125rem;
line-height: 1.7;
margin: 1.5em 0;
}

a {
Expand All @@ -29,7 +39,7 @@
color: #f00;
}

.button {
button:not([hidden]) {
background: #ccc;
border: 0;
border-radius: 3px;
Expand All @@ -38,66 +48,66 @@
display: inline-block;
font: inherit;
font-weight: bold;
margin-bottom: 1em;
padding: 0.5em 1em;
padding: 0.5rem 1rem;
text-transform: uppercase;
}

.button[aria-expanded="true"] {
button[aria-expanded="true"]:not([hidden]) {
background: #333;
color: #ccc;
}

.navigation ul {
nav {
margin-top: 1rem;
}

nav ul {
background: #efefef;
border-radius: 3px;
list-style: none;
margin: 0;
padding: 2em;
padding: 2rem;
}

.navigation li + li {
margin-top: 0.5em;
nav li + li {
margin-top: 0.5rem;
}

.navigation a {
nav a {
display: inline-block;
margin: 0 -0.5em;
padding: 0.25em 0.5em;
}

.content p {
font-family: Georgia, serif;
font-size: 1.125em;
line-height: 1.7;
margin: 1.5em 0;
margin: 0 -0.5rem;
padding: 0.25rem 0.5rem;
}
</style>
</head>
<body>

<button type="button" aria-controls="region" aria-expanded="true" aria-hidden class="button" id="control">Menu</button>
<header>
<h1><cite>Moby-Dick; or, The Whale</cite></h1>

<button aria-controls="region" aria-expanded="true" id="control" hidden>Menu</button>

<nav class="navigation" id="region" role="navigation">
<ul>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</nav>
<nav id="region">
<ul>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
</ul>
</nav>
</header>

<main class="content" role="main">
<p>Call me <a href="http://en.wikipedia.org/wiki/Ishmael_(Moby-Dick)">Ishmael</a>. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</p>
<main>
<p>Call me <a href="https://en.wikipedia.org/wiki/Ishmael_(Moby-Dick)">Ishmael</a>. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</p>
<p>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.</p>
<p>Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?</p>
<p>But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand—miles of them—leagues. Inlanders all, they come from lanes and alleys, streets and avenues—north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?</p>
<p>Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries—stand that man on his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. Should you ever be athirst in the great American desert, try this experiment, if your caravan happen to be supplied with a metaphysical professor. Yes, as every one knows, meditation and water are wedded for ever.</p>
</main>

<script type="module">
import Collapsible from '../dist/aria-collapsible.mjs';
import Collapsible from '../src/aria-collapsible.mjs';

const collapsible = new Collapsible(document.querySelector('#control'));

Expand Down

0 comments on commit d526c41

Please sign in to comment.