search

edenspiekermann / a11y-toggle

A tiny script for accessible content toggles.
https://edenspiekermann.github.io/a11y-toggle/
MIT License
304 stars 21 forks source link

Addition of "Class-based" and "Next Item Target" Toggles #35

Closed nicetransition closed 4 years ago

nicetransition commented 6 years ago

Class-based toggles

This pull request (PR) supports CSS-based selectors to generate ID's for targeted element.

The [data-target] attribute looks at the target and identifies if element has an id or not. If it does not have an id, it generates one and updates the [data-a11y-toggle] with the generated id.

Add data-a11y-toggle (with no value) and data-target with the value equal to the selector you are targeting in your toggle button.

<div class="connected-toggles">
  <button data-a11y-toggle data-target="div + div" type="button">
    Toggle "div + div"
  </button>

  <div>
    I am not the target
  </div>

  <div>
    I am the target from the selector in data-target
  </div>
</div>

Next Item Target toggles

This PR supports dynamically generated queries to "next siblings" in the DOM Structure.

The [data-target] equal to "next" looks at the next element in the DOM structure and identifies if element has an id or not. If it does not have an id, it then generates one and updates the [data-a11y-toggle] with the generated id.

Add data-a11y-toggle (with no value) and data-target="next"

<div class="connected-toggles">
  <button data-a11y-toggle data-target="next" type="button">
    Toggle next
  </button>

  <div>
    I am next sibling in the DOM and am the target of the toggle
  </div>
</div>

What shall we do!?

KittyGiraudel commented 6 years ago

Hello Kevin,

Thank you very much for taking the time to contribute to a11y-toggle. Unfortunately, I’m not entirely sure what kind of use case you’re trying to solve here… Would you mind explaining?

nicetransition commented 6 years ago

Yup. This is to allow for development to use CSS selectors to identify the target in your plugin. When using the new [data-target] it will select the target, check to see if it has an [id] defined – if it does, it uses that applies it to your generated aria tags - if not, it creates an unique if then applies it. In addition, their a next functionality which is helpful when having a generated grid and multiple contextual toggles in an interface.

See these examples:

Basically, allows you to use CSS selectors besides id to be used.... making this plugin a little more dynamic :)

KittyGiraudel commented 6 years ago

Good morning Kevin.

Thank you for taking the time to explain your intention. I see how that would be an interesting feature for a11y-toggle, however I am not too keen into merging it as this seems like quite some overhead for most use cases. What we could do is updating the documentation with a link to this pull-request to help people who have a similar need maybe. What do you think?

joelhsmith commented 6 years ago

Sounds like a cool idea to me as a fork. It would be great if maybe Hugo could link to the fork in the readme maybe.

nicetransition commented 6 years ago

@HugoGiraudel that works and sounds cool to me.

KittyGiraudel commented 5 years ago

Cool! Feel free to open a PR to mention your use case and fork/PR in the docs so it serves other people. :)