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

review accessibility #42

Closed
udos86 opened this issue Jul 4, 2016 · 5 comments
Closed

review accessibility #42

udos86 opened this issue Jul 4, 2016 · 5 comments

Comments

@udos86
Copy link
Owner

udos86 commented Jul 4, 2016

No description provided.

@udos86 udos86 changed the title improve accessibility review accessibility Jul 4, 2016
@bbarry
Copy link

bbarry commented Sep 23, 2016

A few things I notice (not particularly focusing on testing this and haven't really studied the code to understand how the various UI versions are related; these are just the things that annoy me when using a typical form) from the demo site:

  • clicking on select label should focus select dropdown
  • clicking on input label should focus on input
  • clicking on checkbox group should focus first checkbox in group (or perhaps cycle: check/uncheck/reset to original state for whole group?)
  • clicking on individual checkbox label should check/uncheck box
  • clicking on radio group label should focus current active radio option
  • clicking on text area label should focus text area
  • clicking on array model group input label should focus first/last/first empty (not sure which)? input
  • clicking on add item in group input should focus newly added input
  • in an group input input, pressing tab to new item button/link then pressing space should focus newly added input

demo should show validation states visually somehow also

On the bright side, tab works pretty good to move around.

@udos86
Copy link
Owner Author

udos86 commented Sep 23, 2016

@bbarry Thanks for your contribution.

clicking on select label should focus select dropdown
clicking on input label should focus on input
clicking on checkbox group should focus first checkbox in group (or perhaps cycle: check/uncheck/reset to original state for whole group?)
clicking on individual checkbox label should check/uncheck box
clicking on radio group label should focus current active radio option
clicking on text area label should focus text area
clicking on array model group input label should focus first/last/first empty (not sure which)? input
clicking on add item in group input should focus newly added input

The flaw of not selecting a form control when clicking on it's label arises from the fact that no id attributes are bound to the html elements at the moment. This is necessary in order to not create semantically wrong markup when using form arrays. Otherwise there potentially would exist multiple form controls with the same id value. I haven't got a better solution to this so far.

demo should show validation states visually somehow also

The importance of showing validation messages and how this should be done is explained in detail in README.md. However it is not a building block of the actual library. But you're right. I should take the time to improve the example nevertheless.

@bbarry
Copy link

bbarry commented Sep 23, 2016

Reviewing the markup for the individual checkboxes, I believe removing the for attribute would be sufficient (a label surrounding a single input is historically adequate for semantically associating them).
w3.org agrees: https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-implicitly

@udos86
Copy link
Owner Author

udos86 commented Sep 24, 2016

@bbarry Alright, thanks! Will be corrected in next version!

@udos86
Copy link
Owner Author

udos86 commented Sep 24, 2016

@bbarry There'll be a solution for focusing the controls when clicking the labels, as well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants