Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve accessibility of accordion component #978

Closed
paulcpederson opened this issue Aug 28, 2018 · 1 comment
Closed

Improve accessibility of accordion component #978

paulcpederson opened this issue Aug 28, 2018 · 1 comment
Assignees
@paulcpederson
Labels
accessibility in development javascript

Comments

@paulcpederson
Copy link
Member

JAWS does not announce the expanded/collapsed state of an accordion section title.

379cd542-9c83-11e8-9de4-7e78ea9c112e

As per the W3C Example, we need to move the aria-expanded from the <section> element to the <h4> element. The <h4> element also needs to have aria-controls set to the id of the <ul> of the filters. These ids should be auto-generated unique id's.

Current code:

<section class="accordion-section is-active" aria-expanded="true">
  <h4 class="accordion-title" role="tab" tabindex="0"> ... </h4>
  <div class="accordion-content filter">...</div>

Correct:

<section class="accordion-section is-active" >
  <h4 class="accordion-title" role="tab" tabindex="0" aria-expanded="true" aria-controls="panelid"> ... </h4>
  <div class="accordion-content filter" id="panelid">...</div>
@paulcpederson paulcpederson self-assigned this Aug 28, 2018
paulcpederson added a commit to paulcpederson/calcite-web that referenced this issue Sep 19, 2018
@paulcpederson
Esri#978 - improve aria markup of accordion pattern
6727fde
macandcheese pushed a commit that referenced this issue Sep 20, 2018
@paulcpederson @macandcheese
📦v1.1.0 (#984)
446847a 
* #979 - update search icon in search inputs

* #981 - improve keyboard accessibility of tabs component

* #978 - improve aria markup of accordion pattern

* #980 - allow html to be overflow auto

* add overflow-scroll helper class for forcing a scroll bar

* don't allow scroll of content behind drawers or modals

* 📦 v1.0.0

* update package-lock to fix build
@paulcpederson
Copy link
Member Author

addressed in v1.1.0

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

@paulcpederson paulcpederson

Labels
accessibility in development javascript
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@paulcpederson