[COMPASS-5758] Fix `compass-schema` button accessibility Created: 20/Apr/22 Updated: 29/Oct/23 Resolved: 21/Apr/22 |
|
| Status: | Closed |
| Project: | Compass |
| Component/s: | Schema |
| Affects Version/s: | None |
| Fix Version/s: | 1.31.3 |
| Type: | Bug | Priority: | Major - P3 |
| Reporter: | Rhys Howell | Assignee: | Rhys Howell |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||
| Story Points: | 3 | ||||||||
| Documentation Changes: | Not Needed | ||||||||
| Sprint: | Iteration Zanzibar | ||||||||
| Description |
|
`compass-schema` has a number of non-interactive html elements with `onClick` handlers. This heavily hinders accessibility as they are not keyboard navigable. We should ensure these elements have the proper roles and html tags. With the recent update to the shared configs we now have disable eslint for the places that have these onClick handlers. Eslint rules: Visible, non-interactive elements with click handlers must have at least one keyboard listener. - eslint jsx-a11y/click-events-have-key-events Static HTML elements with event handlers require a role. - eslint jsx-a11y/no-static-element-interactions |
| Comments |
| Comment by Githook User [ 25/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 25/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 21/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 21/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Rhys Howell [ 21/Apr/22 ] |
|
There's still a lot of room for improvements in terms of accessibility in the schema view. These changes are barely scratching the surface. |
| Comment by Githook User [ 21/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 21/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 21/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 21/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 20/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: fix(compass-schema): Use interactive html elements for buttons in schema |
| Comment by Githook User [ 20/Apr/22 ] |
|
Author: {'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}Message: Merge branch 'main' into |