Add the jsx-a11y eslint plugin to the project

[nickytonline]

Adding this lint plugin will check for accessibility issues and fail linting if things aren't accessible. This is not a silver bullet for accessibility, but another tool we can leverage to create a more accessible experience.

I currently have a branch up, but there are too many errors at the moment.

@OgDev-01 and I can tackle these bit by bit, and once we're in a good state, I will activate the eslint plugin. We can also potentially create some good first issues out of some of the errors.

beta...nickytonline/add-a11y-eslint-rules

Current errors:

./pages/lists/[listId]/edit.tsx
257:13  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control

./pages/start.tsx

279:13  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control

./pages/user/[username]/card.tsx
203:23  Error: <iframe> elements must have a unique title property.  jsx-a11y/iframe-has-title

./pages/user/notifications.tsx


./components/TabList/tab-list.tsx
19:7  Error: Non-interactive elements should not be assigned interactive roles.  jsx-a11y/no-noninteractive-element-to-interactive-role

./components/atoms/LanguagePill/LanguagePill.tsx
60:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
60:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/LayoutToggle/layout-toggle.tsx
19:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
19:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
21:9  Error: Elements with ARIA roles must use a valid, non-abstract ARIA role.  jsx-a11y/aria-role
29:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
29:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
31:9  Error: Elements with ARIA roles must use a valid, non-abstract ARIA role.  jsx-a11y/aria-role

./components/atoms/ListNameHeader/list-name-header.tsx
36:13  Error: The autoFocus prop should not be used, as it can reduce usability and accessibility for users.  jsx-a11y/no-autofocus

./components/atoms/PillSelector/pill-selector.tsx
66:13  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
66:13  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
72:11  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
72:11  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/Radio/radio.tsx
17:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
17:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/RadioCheck/radio-check.tsx
15:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
15:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/SVGIcon/svg-icon.tsx
14:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
14:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/Search/search.tsx
73:9  Error: The autoFocus prop should not be used, as it can reduce usability and accessibility for users.  jsx-a11y/no-autofocus
92:15  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
92:15  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/TextInput/text-input.tsx
78:17  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
78:17  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/atoms/ToggleOption/toggle-option.tsx
11:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
11:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/AnnouncementCard/announcement-card.tsx
16:13  Error: Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop.  jsx-a11y/img-redundant-alt

./components/molecules/AuthSection/auth-section.tsx

79:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
79:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
57:17  Error: onMouseOver must be accompanied by onFocus for accessibility.  jsx-a11y/mouse-events-have-key-events

./components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx
42:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
42:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/ContributorHighlight/contributor-highlight-card.tsx

534:21  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
534:21  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
546:21  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
546:21  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
651:15  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
651:15  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/ContributorListTableRow/contributor-list-table-row.tsx
139:13  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
139:13  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/DevCard/dev-card.tsx
110:9  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
110:9  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
171:9  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
171:9  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/HighlightInput/highlight-input-form.tsx

710:31  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
710:31  Error: Non-interactive elements should not be assigned mouse or keyboard event listeners.  jsx-a11y/no-noninteractive-element-interactions
972:9  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
972:9  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
22:11  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
22:11  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/InfoCard/info-card.tsx
12:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
12:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/RepoRow/repo-row.tsx
149:13  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
149:13  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
207:11  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
207:11  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/ReposoitoryCartItem/repository-cart-item.tsx
27:9  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
27:9  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/molecules/SuperlativeSelector/superlative-selector.tsx
54:11  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
54:11  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
70:11  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
70:11  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/organisms/DevCardWall/dev-card-wall.tsx
249:5  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
249:5  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/organisms/GitHubTeamSyncDialog/github-team-sync-dialog.tsx

79:13  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control
92:13  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control
102:13  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control

./components/organisms/SearchDialog/search-dialog.tsx

74:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
74:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
86:13  Error: The autoFocus prop should not be used, as it can reduce usability and accessibility for users.  jsx-a11y/no-autofocus

132:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
132:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions
144:7  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
144:7  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

./components/organisms/ToolList/nav.tsx
28:7  Error: Non-interactive elements should not be assigned interactive roles.  jsx-a11y/no-noninteractive-element-to-interactive-role

./components/organisms/UserSettingsPage/coupon-form.tsx
48:9  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control

./components/organisms/UserSettingsPage/user-settings-page.tsx
367:15  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control
428:15  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control
468:23  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control
481:25  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control
514:19  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

Hi @FatumaA, you had expressed interest in this issue. Would you like me to assign it to you?

What I'd suggest is install and enable the jsx-a11y eslint plugin, but instead of setting it to error, set it to warn for now.

Yourself and others can create separate issues to tackle warnings one at a time.

I'll create a separate issue to set it to error once all the warnings have been resolved.

[FatumaA]

Hi,
Yes please 🙂

[open-sauced]

🎉 This issue has been resolved in version 2.63.1-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[open-sauced]

🎉 This issue has been resolved in version 2.64.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀