knownasilya/ember-toggle

A11y for screen readers

hornetnz opened this issue · 2 comments

hornetnz commented

I'm using v5.3 and noticed that with voiceover on, its reading as "Group, 4 items. You are currently on a checkbox...". Our layout is using the toggles w/o the labels, so screen readers only see 'checkbox'.

  • Is there some way to have it not read as "Group, 4 items"?
  • Is there a way I can add a sr-only label?
knownasilya commented

Should be able to use block mode https://github.com/knownasilya/ember-toggle/tree/v5.3.3#advanced-usage

<XToggle
  @showLabels={{true}}
  @value={{this.value}}
  @onToggle={{action (mut this.value)}}
as |toggle|>
  <label for='some-id' class='sr-only'>Some Toggle</label>
  <toggle.switch id='some-id'/>
</XToggle>

Should work. Generally the internal id is generated, but since you aren't using any of the labels overwriting it might work. You could wrap this in your own component you can reuse.

hornetnz commented

Ahh ok. I had read that part of the doc, but I guess it didn't click because there was no HTML in the example. Thanks :)

  • 👍1