Skip to content

[Accordion]: Make content accessible without JavaScript#1224

Merged
msecret merged 14 commits into
stagingfrom
accordion-accessibility
Jun 6, 2016
Merged

[Accordion]: Make content accessible without JavaScript#1224
msecret merged 14 commits into
stagingfrom
accordion-accessibility

Conversation

@shawnbot

@shawnbot shawnbot commented Jun 3, 2016

Copy link
Copy Markdown
Contributor

Description

This PR updates the accordion component to update its buttons' and corresponding content elements' aria-expanded and aria-hidden attributes (respectively) when initialized. This means that we can strip all of the aria-expanded="false" and aria-hidden="true" attributes from the HTML, which makes the content accessible in the event that the JS isn't loaded (or until it is). Hopefully, this addresses #1122.

⚠️ Note that the biggest change here is not in the JS, but in the HTML: Users will be expected to update their HTML to remove aria-expanded="false" and aria-hidden="true" attributes from accordion panels that aren't expanded by default so that their content is accessible without JS.

Additional information

  • The accordion documentation (and all of the accordions in each component's documentation) markup now reflects the best practice of leaving aria-expanded="false" and aria-hidden="true" attributes out, so that the content is accessible without JavaScript.
  • I've updated the accordion documentation to state that the aria-expanded and aria-hidden attributes are unnecessary now (except in the case of the content area that you wish to be expanded by default), but this could probably use some clarification and/or word-smithing from @kategarklavs.
  • The demo HTML now uses the amendment-n+1 naming convention instead of collapsible-n, so that it plays nicely with the the Code and Documentation accordion below. See: [UI components] Documentation pages have duplicate ids #1225
  • I've added jsdoc comments to all of the Accordion methods, and updated some of the existing ones.
  • The Accordion JS component also now returns this from its show(), hide(), and hideAll() methods, so its methods are chainable. I'm happy to back out of this change if it's not consistent with the rest of the library.

@shawnbot

shawnbot commented Jun 3, 2016

Copy link
Copy Markdown
Contributor Author

Oh, and I also updated the tables documentation to use double-quoted attributes, for consistency. 😬

@shawnbot

shawnbot commented Jun 3, 2016

Copy link
Copy Markdown
Contributor Author

cc #1121

Comment thread docs/_components/accordions.md Outdated
</li>
<li>
Each content area has an <code>aria-hidden</code> attribute set to either <code>true</code> or <code>false</code>. When <code>true</code>, the element (and all children) are neither visible or perceivable, and assistive technologies will skip this content.
Each content area will have its <code>aria-hidden</code> attribute set to either <code>true</code> or <code>false</code> by the component, depending on its corresponding button&rsquo;s <code>aria-expaded</code> attribute. To ensure that your content is accessible in the event that the JavaScript does not load or is disabled, you should not set <code>aria-hidden=<wbr>"true"</wbr></code> on any of your content areas.

@joshbruce joshbruce Jun 3, 2016

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kategarklavs & @shawnbot - "aria-expaded" shouldn't that be "aria-expanded"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, good catch!

@kategarklavs

Copy link
Copy Markdown
Contributor

@shawnbot I just looked over everything and have no proposed changes 👍

@shawnbot

shawnbot commented Jun 6, 2016

Copy link
Copy Markdown
Contributor Author

🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants