[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:
Related
is related to COMPASS-5749 Update `compass-schema` to shared Com... Closed
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 COMPASS-5758 (#3004)
Branch: 1.31-releases
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: remove-bugsnag
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: COMPASS-5757-hide-add-stage-button
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: clustered-collections
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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.
I think we would also likely see performance improvements by streamlining and modernizing the code here.

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 COMPASS-5758 (#3004)
Branch: COMPASS-5755-persist-stage-content
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: COMPASS-5681-handle-retry-and-cancel
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: compass-5425-5740-run-agg-telemetry
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: COMPASS-5519-update-collection-header-styles
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

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 COMPASS-5758 (#3004)
Branch: main
https://github.com/mongodb-js/compass/commit/1f7bfce8637be41d3166b4c08f5395bc269d6349

Comment by Githook User [ 20/Apr/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5758-fix-schema-button-accessibility
Branch: COMPASS-5758-fix-schema-button-accessibility
https://github.com/mongodb-js/compass/commit/b9e21df7d488ea3fc6e5fbf156dbf21b23c0808e

Generated at Wed Feb 07 22:40:43 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.