Improve Accessibility

[kentcdodds]

This is pretty much not accessible at all. If you include ngAria, then you can tab to the UI component, but it doesn't give any indication to the user that it has focus. Things to do:

• Add styles for :focus on ng-toggle-switch
• Add tabindex="0" on ng-toggle-switch
• Add tabindex="-1" on the ng-model element (ng-toggle-wrap). (to prevent ngAria from adding a tabindex)

Bonus stuff:

• Add role="checkbox" if it's not a triToggle and add the appropriate aria attributes: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role
• Add role="button" if it is a triToggle and add the appropriate aria attributes: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

[kentcdodds]

Oh, one other thing. Make it so I can move my arrows left and right to toggle or up and down when it's vertical.

[tannerlinsley]

Okay On Mon, Jul 6, 2015 at 11:11 PM Kent C. Dodds notifications@github.com wrote:

Oh, one other thing. Make it so I can move my arrows left and right to toggle or up and down when it's vertical.

— Reply to this email directly or view it on GitHub https://github.com/tannerlinsley/ng-toggle/issues/7#issuecomment-119057637 .

[marcysutton]

It should also be operable with the space bar or enter key. Regular switch toggles are just like ARIA checkboxes. Here are some tips for tri-state toggles: https://webaccessibility.withgoogle.com/unit?unit=6&lesson=14

[kentcdodds]

Thanks @marcysutton!

[tannerlinsley]

Excellent resource!

On Tue, Jul 7, 2015 at 5:25 PM Kent C. Dodds notifications@github.com wrote:

Thanks @marcysutton https://github.com/marcysutton!

— Reply to this email directly or view it on GitHub https://github.com/tannerlinsley/ng-toggle/issues/7#issuecomment-119347006 .

[tannerlinsley]

ng-toggle is going to get some great attention here pretty quick. The feature I'm using it in just reentered our product, so I might be doing some breaking changes in a 2.0 along with all of the issues.

On Tue, Jul 7, 2015 at 5:26 PM Tanner Linsley tannerlinsley@gmail.com wrote:

Excellent resource!

On Tue, Jul 7, 2015 at 5:25 PM Kent C. Dodds notifications@github.com wrote:

Thanks @marcysutton https://github.com/marcysutton!

— Reply to this email directly or view it on GitHub https://github.com/tannerlinsley/ng-toggle/issues/7#issuecomment-119347006 .

[kentcdodds]

Woot!

[tannerlinsley]

I'm hoping 2.0 can live up to expectations. I'd like to see it used on a larger scale.

[tannerlinsley]

😂