fix: a11y fail click events have key events and no static element interactions

[FatumaA]

Description

Addresses the accessibility problems in the files listed in the linked issue.

Related Tickets & Documents

Fixes #4130

Mobile & Desktop Screenshots/Recordings

AuthSection:

CardRepoList:

ContributorFilterDropdown:

ContributorHighLightCard: Neutral and hiver states remain same -

ContributorlistTableRow: No diff, except it now has a cursor on hover:

DevCard:

HighlightFilterCard:

HighlightInputForm close button:

HighlightInputForm - suggested links:

PillSelector:

RepositoryCartItem:

Search:

Search-dialog:

SuperlativeSelector: Unselected - Selected -

TextInput:

ToggleOption:

With Icon

Card in pages/u/[username]/Card.tsx:

Radio and Radio Check:

Steps to QA

Run npx eslint . in the root folder, and see that those errors are no longer occurring

Tier (staff will fill in)

• [ ] Tier 1
• [ ] Tier 2
• [ ] Tier 3
• [x] Tier 4

[optional] What gif best describes this PR or how it makes you feel?

[netlify[bot]]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	d7dd6a0e5388c397e38a09532492ae7e481c5627
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6723d456febeb800088dffb1
😎 Deploy Preview	https://deploy-preview-4169--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	d7dd6a0e5388c397e38a09532492ae7e481c5627
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6723d4566affee00085b984d
😎 Deploy Preview	https://deploy-preview-4169--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[FatumaA]

Hi @nickytonline, This is ready for review.

Also, should I replace all the HTML buttons with the Button component in components/shared/Button/button.tsx?

[FatumaA]

A few more change requests. Can you provide before and after screen shots of where these changes are?

In the case where it's a component that is used in multiple components, just have a before and after screenshots for a single place it's used.

Thanks @FatumaA and looking forward to getting these changes into the code base to make the app more accessible!

Can I do this from the storybook instance? That's what I was using

[nickytonline]

A few more change requests. Can you provide before and after screen shots of where these changes are? In the case where it's a component that is used in multiple components, just have a before and after screenshots for a single place it's used. Thanks @FatumaA and looking forward to getting these changes into the code base to make the app more accessible!

Can I do this from the storybook instance? That's what I was using

Yeah, just point to the Storybook stories.

[nickytonline]

Looks like there are some conflicts that need to be resolved @FatumaA

[FatumaA]

This PR touches 20 components. Of these, the radio and radio check components no longer span 100% of their width, and the dev card wall component is totally broken by switching its surrounding div to a button.

Radio: Before -

After -

RadioCheck: Before - Neutral state -

Hover state -

After -

DevWallCard: Before:

After:

[FatumaA]

As for the other components, I did not notice any difference in their look or function with the changes

AuthSection:

CardRepoList:

ContributorFilterDropdown:

ContributorHighLightCard: Neutral and hiver states remain same -

ContributorlistTableRow: No diff, except it now has a cursor on hover:

DevCard:

HighlightFilterCard:

HighlightInputForm close button:

HighlightInputForm - suggested links:

PillSelector:

RepositoryCartItem:

Search:

Search-dialog:

SuperlativeSelector: Unselected - Selected -

TextInput:

ToggleOption:

With Icon

Card in pages/u/[username]/Card.tsx:

[nickytonline]

Thanks for all the screenshots for before and after @FatumaA. So we can move this along, can you exclude changes that currently break the UI and we can sort those out in a follow up PR?

Also, thanks for your patience!

[FatumaA]

Thanks for all the screenshots for before and after @FatumaA. So we can move this along, can you exclude changes that currently break the UI and we can sort those out in a follow up PR?

Also, thanks for your patience!

No problem, thank you for yours!

I think the radio and radio check should be a simple fix on the button classes, we should keep the fix in this PR; what do you think?

As for the devwallcard component, I will undo the changes and leave it out as you've suggested.

[nickytonline]

For the radio and radio check feel free to put the fix in here, but also, if you want to take a bit of time, like I said, it can go in a follow up PR.

[FatumaA]

Fixed the radio and radio check. And undid the devcardwall change

Radio and Radio Check:

[nickytonline]

This seems to all be working great. The only thing I noticed is the search no longer auto focuses when you click on the search button or press CMD + K (macOS) or CTRL + K (other OSes).

[FatumaA]

This seems to all be working great. The only thing I noticed is the search no longer auto focuses when you click on the search button or press CMD + K (macOS) or CTRL + K (other OSes).

I removed the auto focus on the components, let me look into it

[FatumaA]

@nickytonline I pushed a fix for that, but I noticed the component uses global document methods. Is there any particular reason, or is this up for a refactor?

[nickytonline]

@FatumaA, I'll take a peek at this tomorrow.