Skip to content
This repository was archived by the owner on Jun 19, 2025. It is now read-only.

Commit f86e76b

Browse files
FatumaAnickytonlinebrandonroberts
authored
fix: a11y fail click events have key events and no static element interactions (#4169)
Co-authored-by: Nick Taylor <[email protected]> Co-authored-by: Brandon Roberts <[email protected]>
1 parent 31b8486 commit f86e76b

File tree

21 files changed

+76
-73
lines changed

21 files changed

+76
-73
lines changed

‎components/atoms/PillSelector/pill-selector.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,13 @@ const PillSelector: React.FC<PillSelectorProps> = ({
6363
<PillSelectorButton>
6464
{selected ? (
6565
<>
66-
<div onClick={toggleFilter}>
66+
<button onClick={toggleFilter}>
6767
{pillOptions.find((option) => option.toLowerCase().replaceAll(" ", "-") === selected)}
68-
</div>
68+
</button>
6969
<Icon IconImage={cancelIcon} onClick={handleCancelClick} />
7070
</>
7171
) : (
72-
<div onClick={toggleFilter}>Add Filter</div>
72+
<button onClick={toggleFilter}>Add Filter</button>
7373
)}
7474
</PillSelectorButton>
7575

‎components/atoms/Radio/radio.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ interface RadioProps {
1414

1515
const Radio = ({ className, withLabel, id, children, value, checked = false, onClick }: RadioProps): JSX.Element => {
1616
return (
17-
<div
17+
<button
1818
onClick={onClick}
1919
className={
2020
`${
2121
checked && "!bg-light-orange-3"
22-
} px-2 py-1.5 text-sm text-slate-600 group rounded-md hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
22+
} w-full px-2 py-1.5 text-sm text-slate-600 group rounded-md hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
2323
`${className}`
2424
}
2525
>
@@ -49,7 +49,7 @@ const Radio = ({ className, withLabel, id, children, value, checked = false, onC
4949
</span>
5050
)}
5151
</label>
52-
</div>
52+
</button>
5353
);
5454
};
5555

‎components/atoms/RadioCheck/radio-check.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ interface RadioCheckProps {
1212

1313
const RadioCheck = ({ className, id, children, value, checked = false, onClick }: RadioCheckProps): JSX.Element => {
1414
return (
15-
<div
15+
<button
1616
onClick={onClick}
1717
className={
18-
"px-2 py-1.5 text-sm text-black group rounded-md hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
18+
"w-full px-2 py-1.5 text-sm text-black group rounded-md hover:bg-light-orange-3 hover:text-light-orange-9 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition" +
1919
`${className}`
2020
}
2121
>
@@ -36,7 +36,7 @@ const RadioCheck = ({ className, id, children, value, checked = false, onClick }
3636
)}
3737
<span className="ml-3 leading-none my-auto">{children}</span>
3838
</label>
39-
</div>
39+
</button>
4040
);
4141
};
4242

‎components/atoms/SVGIcon/svg-icon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface IconProps {
1111

1212
const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16 }) => {
1313
return (
14-
<div className={clsx(`inline-flex`, className)} onClick={onClick}>
14+
<button className={clsx(`inline-flex`, className)} onClick={onClick}>
1515
<svg>
1616
<use
1717
href={IconImage}
@@ -21,7 +21,7 @@ const SVGIcon: React.FC<IconProps> = ({ onClick, className, IconImage, size = 16
2121
style={{ stroke: "currentcolor", maxWidth: "100%", height: "auto" }}
2222
/>
2323
</svg>
24-
</div>
24+
</button>
2525
);
2626
};
2727

‎components/atoms/Search/search.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@ const Search = ({
119119
<FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
120120
<input
121121
className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
122-
autoFocus={autoFocus}
123122
placeholder={placeholder}
124123
name={name}
125124
value={search}
@@ -141,7 +140,7 @@ const Search = ({
141140
<ScrollArea type="auto" className="h-60">
142141
{suggestionsLabel && suggestions.length > 0 ? <div className="pl-5 pt-4">{suggestionsLabel}</div> : null}
143142
{suggestions.map((suggestion, index) => (
144-
<div
143+
<button
145144
className={clsx(
146145
cursor === index && "_cursorActive bg-slate-100",
147146
"px-4 py-2 hover:bg-light-slate-2",
@@ -162,7 +161,7 @@ const Search = ({
162161
) : (
163162
suggestion.node
164163
)}
165-
</div>
164+
</button>
166165
))}
167166
</ScrollArea>
168167
</div>

‎components/atoms/TextInput/text-input.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,12 @@ const TextInput = ({
7777
{state === "valid" ? (
7878
<CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
7979
) : !!value ? (
80-
<span title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
80+
<button title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
8181
<XCircleFillIcon
8282
className={clsx(state === "invalid" && errorMsg ? "text-light-red-11" : "", "cursor-pointer")}
8383
size={12}
8484
/>
85-
</span>
85+
</button>
8686
) : (
8787
""
8888
)}

‎components/atoms/ToggleOption/toggle-option.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface ToogleOptionProps {
88
}
99
const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOptionProps): JSX.Element => {
1010
return (
11-
<div
11+
<button
1212
onClick={handleToggle}
1313
className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1"
1414
>
@@ -20,7 +20,7 @@ const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOpt
2020
className="text-light-slate-9"
2121
/>
2222
)}
23-
</div>
23+
</button>
2424
);
2525
};
2626
export default ToggleOption;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const AuthSection: React.FC = ({}) => {
8383
<FiSettings className="group-hover:text-light-orange-10" />
8484
<Text className="group-hover:text-light-orange-10">Settings</Text>
8585
</Link>,
86-
<span
86+
<button
8787
onClick={async () => {
8888
const pageHref = window.location.href;
8989
const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf("?")));
@@ -99,7 +99,7 @@ const AuthSection: React.FC = ({}) => {
9999
>
100100
<FiLogOut className="group-hover:text-light-orange-10" />
101101
<Text className="group-hover:text-light-orange-10">Disconnect</Text>
102-
</span>,
102+
</button>,
103103
],
104104
};
105105
return (

‎components/molecules/CardRepoList/card-repo-list.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ const CardRepoList = ({
3636
const sanitizedRepoList = [...new Map(repoList.map((item) => [item["repoName"], item])).values()];
3737
const [selectedRepo, setSelectedRepo] = useState<string>("");
3838

39+
const handleClick = (repoOwner: any, repoName: string) => {
40+
if (!selectedRepo) {
41+
onSelect(`${repoOwner}/${repoName}`);
42+
setSelectedRepo(`${repoOwner}/${repoName}`);
43+
} else {
44+
onSelect("");
45+
setSelectedRepo("");
46+
}
47+
};
3948
return (
4049
<div className="flex gap-1 items-center max-w[175px] truncate flex-wrap text-xs text-light-slate-9">
4150
{repoList.length > 0 ? (
@@ -44,18 +53,7 @@ const CardRepoList = ({
4453
.filter((_, arrCount) => arrCount < limit)
4554
.map(({ repoOwner, repoName, repoIcon }, index) => {
4655
return (
47-
<div
48-
key={`repo_${index}`}
49-
onClick={() => {
50-
if (!selectedRepo) {
51-
onSelect(`${repoOwner}/${repoName}`);
52-
setSelectedRepo(`${repoOwner}/${repoName}`);
53-
} else {
54-
onSelect("");
55-
setSelectedRepo("");
56-
}
57-
}}
58-
>
56+
<button key={`repo_${index}`} onClick={() => handleClick(repoOwner, repoName)}>
5957
{repoName && repoIcon ? (
6058
<Tooltip content={`${repoOwner}/${repoName}`}>
6159
<div
@@ -89,7 +87,7 @@ const CardRepoList = ({
8987
) : (
9088
""
9189
)}
92-
</div>
90+
</button>
9391
);
9492
})}
9593
<div>{repoTotal > limit ? `+${repoTotal - limit}` : null}</div>

‎components/molecules/ContributorFilterDropdown/contributor-filter-dropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const ContributorFilterDropdown = () => {
3939

4040
return (
4141
<div ref={ref} className="flex flex-col px-3 border rounded-lg shadow w-max">
42-
<div
42+
<button
4343
onClick={() => setOpen((prev) => !prev)}
4444
className="flex items-center justify-between text-sm font-normal cursor-pointer text-light-slate-9 w-44 "
4545
>
@@ -49,7 +49,7 @@ const ContributorFilterDropdown = () => {
4949
<BiChevronUp className="text-lg translate-y-1.5" />
5050
<BiChevronDown className="text-lg -translate-y-1.5" />
5151
</div>
52-
</div>
52+
</button>
5353

5454
<div
5555
className={clsx(

0 commit comments

Comments
 (0)