edenspiekermann/a11y-toggle

Support "toggle-others" functionality

geebru opened this issue · 7 comments

geebru commented

While experimenting with using this for an internal pattern library of sorts, we realized this could be used not only for accordion-style displays, but probably tabs as well.

What we found however was that a potentially interesting feature would be an option of sorts to allow for "if click button, close all other divs, open div tied to button" thereby enabling only 1 panel at a time.

Is this something easily feasible within the existing code or would that require a large amount of extra just to enable it as an option? Another dev on our team is working on this as well so we might be able to submit a PR if there's no objections to the concept.

KittyGiraudel commented

Hey there. Thank you for playing with a11y-toggle. :)

The feature might be interesting, however I am a bit worried it might make the lib bigger than it should be. Also, remember that a good and accessible tab system relies on much more than just click and display (specific roles, hash based navigation, keyboard navigation, etc.).

geebru commented

That was a concern of mine as well - once you start adding in options or situational if statements it can blow up.

We definitely want to keep the latter in mind as with how much government work our firm does having plugins/patterns that are accessible out of the box is a huge deal.

Feel free to close or table this indefinitely - perhaps it's something we can spin off as a separate plugin (for only tab-usage). Thanks!

mrwweb commented

I'm working on search page that has toggle-able filters for narrowing results. I'd love to be able to do something like this so that only one set of filters is displayed at once.

KittyGiraudel commented

I have been experimenting with this, and you would have to leverage the lib to make it work:

Considering the following markup:

<div class="linked-toggles">
  <button data-a11y-toggle="cb-1" type="button">Toggle 1</button>
  <div class="collapsible-box" id="cb-1">1</div>
  <button data-a11y-toggle="cb-2" type="button">Toggle 2</button>
  <div class="collapsible-box" id="cb-2">2</div>
</div>

And this JS:

function collapse (toggle) {
  var collapsibleBox = document.getElementById(toggle.getAttribute('data-a11y-toggle'))
  collapsibleBox.setAttribute('aria-hidden', true)
  toggle.setAttribute('aria-expanded', false)
}

function $$ (selector) {
  var nodes = document.querySelectorAll(selector)
  return Array.prototype.slice.call(nodes || []);
}

var toggles = $$('.linked-toggles [data-a11y-toggle]')

toggles.forEach(function (toggle) {
  toggle.addEventListener('click', function (event) {
    toggles.filter(function (t) {
      return t !== event.target
    }).forEach(collapse)
  })
})

Or with jQuery:

var $toggles = $('.linker-toggles [data-a11y-toggle]')

$toggles.on('click', function collapseAll (event) {
  $toggles.not(event.target).each(function (_, toggle) {
    var $toggle = $(toggle)
    $('#' + $toggle.attr('data-a11y-toggle')).attr('aria-hidden', true)
    $toggle.attr('aria-expanded', false)
  })
});

Here is a demo on CodePen: http://codepen.io/HugoGiraudel/pen/jqppor.

What do you think? If you judge it good enough, I’ll add it to the docs.

mrwweb commented

That looks good to me!

KittyGiraudel commented

I am actually thinking of a way to make it much simpler.

  • 👍1