Fix jsx-a11y problems and enforce those rules #12954
Labels
Comments
marusak
added a commit
to marusak/cockpit
that referenced
this issue
Apr 30, 2020
This rule is actually very useful, as it points to things, that are not keyboard navigable. We were introducing new breakages since we disabled this rule (like services and overview pages). Here is list of things that did not work before, but do now: - service-tabs.jsx: The whole navigation (targets, sockets...) was not reachable by keyboard. - page-status.jsx: Items in 'Health' card were reachable by keyboard, but could not be activated by keyboard. - usageCard.jsx: Text 'View graphs' on 'Usage' card was reachable by keyboard, but could not be activated by keyboard. - systemInformationCard.jsx: Text 'View hardware details' on 'System information' card was reachable by keyboard, but could not be activated by keyboard. - insights.jsx: Text 'Not connected to Insights' on 'Health' card was reachable by keyboard, but could not be activated by keyboard. - storage-controls.jsx: The 'things' menu on storage page could be opened by keyboard, but the elements inside were not reachable by keyboard. - overview.jsx: On storage page non of 'Devices', Drives'... and any other devices were not reachable by keyboard. Now they are reachable and also it is possible to activate them by keyboard. (This includes also 'Show all' buttons) - diskEdit.jsx: These prevents were pointless so I dropped them. Otherwise we would need to do the same for keyboard events. - containers-view.jsx: Items could not be activated with keyboard. - cockpit-components-listing.jsx: Give the event listener to appropriate element. - fsys-tab.jsx: This is actually unused but making it link-styled button seems like a correct approach to make ti accessible. Part of cockpit-project#12954 Closes cockpit-project#13996
KKoukiou
pushed a commit
that referenced
this issue
May 4, 2020
This rule is actually very useful, as it points to things, that are not keyboard navigable. We were introducing new breakages since we disabled this rule (like services and overview pages). Here is list of things that did not work before, but do now: - service-tabs.jsx: The whole navigation (targets, sockets...) was not reachable by keyboard. - page-status.jsx: Items in 'Health' card were reachable by keyboard, but could not be activated by keyboard. - usageCard.jsx: Text 'View graphs' on 'Usage' card was reachable by keyboard, but could not be activated by keyboard. - systemInformationCard.jsx: Text 'View hardware details' on 'System information' card was reachable by keyboard, but could not be activated by keyboard. - insights.jsx: Text 'Not connected to Insights' on 'Health' card was reachable by keyboard, but could not be activated by keyboard. - storage-controls.jsx: The 'things' menu on storage page could be opened by keyboard, but the elements inside were not reachable by keyboard. - overview.jsx: On storage page non of 'Devices', Drives'... and any other devices were not reachable by keyboard. Now they are reachable and also it is possible to activate them by keyboard. (This includes also 'Show all' buttons) - diskEdit.jsx: These prevents were pointless so I dropped them. Otherwise we would need to do the same for keyboard events. - containers-view.jsx: Items could not be activated with keyboard. - cockpit-components-listing.jsx: Give the event listener to appropriate element. - fsys-tab.jsx: This is actually unused but making it link-styled button seems like a correct approach to make it accessible. Part of #12954 Closes #13996
marusak
added a commit
to marusak/cockpit
that referenced
this issue
Jan 19, 2022
We need to focus password input first. There are no active elements preceding this input. Fixes cockpit-project#12954
|
No, this should not be reopened. 5608bca was a commit which removed the last rule override and now we enforce all of those rules. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
We now have
jsx-a11yplugin which can check accessibility in jsx elements we create. However we currently break some rules and therefore these rules are not enforced yet. Anyone who is a bit interested feel free and have a go :)How to find where it is broken:
.eslintrc.jsonnpm run eslintto see where this rule is brokenYou can read about those rules in https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
Note: Fixing some findings is super simple, some require a bit of playing with the code and some are not worth fixing and need to be replaced with something more sensible (like we implement custom dropdown and we should just use <select>).
TODO:
The text was updated successfully, but these errors were encountered: