Skip to content

Commit 9dcbbe8

Browse files
committed
feat(editor2): do not select skill via onFocus (for accessibility)
1 parent 93d4c27 commit 9dcbbe8

File tree

1 file changed

+25
-17
lines changed

1 file changed

+25
-17
lines changed

src/components/editor2/operator/OperatorItem.tsx

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,26 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
311311
: skillLevels[skillNumber] ??
312312
getDefaultRequirements(info?.rarity).skillLevel
313313

314+
const selectSkill = () => {
315+
if (operator.skill !== skillNumber) {
316+
edit(() => {
317+
onChange?.({
318+
...operator,
319+
skill: skillNumber,
320+
requirements: {
321+
...operator.requirements,
322+
// override with the current skill level
323+
skillLevel,
324+
},
325+
})
326+
return {
327+
action: 'set-operator-skill',
328+
desc: i18n.actions.editor2.set_operator_skill,
329+
}
330+
})
331+
}
332+
}
333+
314334
return (
315335
<li
316336
key={index}
@@ -337,23 +357,11 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
337357
'!w-8 h-8 !p-0 !leading-8 !bg-transparent text-center font-bold text-xl !text-inherit !rounded-none !border-2 !border-current [&:not(:focus)]:cursor-pointer',
338358
skillLevel > 7 && '!pl-4',
339359
)}
340-
onFocus={() => {
341-
if (operator.skill !== skillNumber) {
342-
edit(() => {
343-
onChange?.({
344-
...operator,
345-
skill: skillNumber,
346-
requirements: {
347-
...operator.requirements,
348-
// override with the current skill level
349-
skillLevel,
350-
},
351-
})
352-
return {
353-
action: 'set-operator-skill',
354-
desc: i18n.actions.editor2.set_operator_skill,
355-
}
356-
})
360+
onClick={selectSkill}
361+
onKeyDown={(e) => {
362+
if (e.key === 'Enter' || e.key === ' ') {
363+
e.preventDefault()
364+
selectSkill()
357365
}
358366
}}
359367
onValueChange={(_, valueStr) => {

0 commit comments

Comments
 (0)