ESLint A11y sniffs for client/web/src/user

Created by: artemruts

ESLint A11y sniffs for client/web/src/user @ bd8e595e3a47b157fa3c907dc301d302fa3e0824

client/web/src/user/UserAvatar.tsx

• 38:16 🔺 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

client/web/src/user/settings/accessTokens/UserSettingsCreateAccessTokenPage.tsx

• 137:25 🔺 The autoFocus prop should not be used, as it can reduce usability and accessibility for users jsx-a11y/no-autofocus

client/web/src/user/settings/auth/UserSettingsPasswordPage.tsx

• 120:33 🔺 A form label must be associated with a control jsx-a11y/label-has-associated-control
• 131:33 🔺 A form label must be associated with a control jsx-a11y/label-has-associated-control
• 142:33 🔺 A form label must be associated with a control jsx-a11y/label-has-associated-control

client/web/src/user/settings/emails/SetUserPrimaryEmailForm.tsx

• 80:17 🔺 onBlur must be used instead of onchange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users jsx-a11y/no-onchange

client/web/src/user/settings/repositories/RepositoryNode.tsx

• 167:13 🔺 Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
• 167:13 🔺 Non-interactive elements should not be assigned mouse or keyboard event listeners jsx-a11y/no-noninteractive-element-interactions

client/web/src/user/settings/repositories/UserSettingsManageRepositoriesPage.tsx

• 192:21 🔺 Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. jsx-a11y/anchor-is-valid
• 192:21 🔺 Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
• 192:21 🔺 Static HTML elements with event handlers require a role jsx-a11y/no-static-element-interactions
• 209:13 🔺 Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. jsx-a11y/anchor-is-valid
• 209:13 🔺 Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
• 209:13 🔺 Static HTML elements with event handlers require a role jsx-a11y/no-static-element-interactions
• 231:21 🔺 Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. jsx-a11y/anchor-is-valid
• 231:21 🔺 Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
• 231:21 🔺 Static HTML elements with event handlers require a role jsx-a11y/no-static-element-interactions
• 349:17 🔺 onBlur must be used instead of onchange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users jsx-a11y/no-onchange
• 413:17 🔺 Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events 413:17 🔺 Non-interactive elements should not be assigned mouse or keyboard event listeners jsx-a11y/no-noninteractive-element-interactions

✖ 20 problems (20 errors, 0 warnings)

Lighthouse & Axe

There are other issues highlighted by Lighthouse & Axe (colors, naming). We can sync offline to determine usefulness of those tools and if we should adopt using them as we write code/design. I'm certainly a biп fan of Axe after using it for a couple of days.

Moving forward

I'll create a GitHub project for Cloud A11y where we can break things down and agree of the next steps. These sniffs are just a starting point, we need to enter somewhere and start making a11y a part of dev process.