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.

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

Give keyboard access to collapsible headings #189

Merged
merged 2 commits into from Dec 20, 2016
Merged

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Dec 7, 2016

Quick fix, doesn't fix all accessibility concerns with these toggles; eg ARIA states, odd tabbing behaviour on visually hidden links (patched but not fixed), etc.

The current heading toggles can’t be opened with a keyboard. By dynamically adding links inside the headings we get all the correct tabindex and focus behaviour.

https://www.gov.uk/guidance/content-design/what-is-content-design

  • Use the ID of the heading as the href target
  • Another JS listener listens for clicks on links. This has been reduced in scope to body links (for expanding/closing footnotes).
  • Show section when focussing on hidden links

Because content is visually hidden, the links within the content blocks can still be tabbed too. Rather than tabbing to something you can’t see, which feels broken, if the section isn’t visible, automatically open the section. (Sometimes the browser doesn't scroll to the focused link, sometimes it does.)

tabbing-manuals

@nickcolley @cfq @aduggin

fofr added 2 commits Dec 7, 2016
The current heading toggles can’t be opened with a keyboard. By making
them links we get all the correct tabindex and focus behaviour for free.

* Use the ID of the heading as the href target
* Another JS listener listens for clicks on links in the page. This has
been reduced in scope to body links (for expanding/closing footnotes)

This is still not ideal. ARIA attributes should be used.
Because content is visually hidden, the links within the content blocks
can still be tabbed too. Rather than tabbing to something you can’t
see, which feels broken, if the section isn’t visible, automatically
open the section.
@cfq
Copy link

@cfq cfq commented Dec 7, 2016

It would be great to come as close as possible to the example implemented here: http://heydonworks.com/practical_aria_examples/#progressive-collapsibles

I would also be good to reimplement the expand/collapse buttons as s with text inside them rather than Λ and V icons only.

@fofr
Copy link
Contributor Author

@fofr fofr commented Dec 7, 2016

@cfq Yep. Those are good points and the example is useful. Is this a good first step towards that by fixing the most egregious problem?

@fofr fofr requested a review from nickcolley Dec 10, 2016
@fofr fofr changed the title [DO NOT MERGE] Give keyboard access to collapsible headings Give keyboard access to collapsible headings Dec 13, 2016
@tvararu
Copy link
Contributor

@tvararu tvararu commented Dec 20, 2016

Gave this a play locally, I think this is a solid improvement for UX. Going to give the code a look.

Copy link
Contributor

@tvararu tvararu left a comment

:shipit:

@tvararu tvararu merged commit ba23f48 into master Dec 20, 2016
1 check passed
1 check passed
default Build #362 succeeded on Jenkins
Details
@tvararu tvararu deleted the accessible-accordion branch Dec 20, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.