A11y: Fix resource cards accessibility (#73487)

fix(a11y): resource cards
2023-08-21 12:26:12 +02:00
parent 56f4def666
commit ab587b6884
1 changed files with 7 additions and 2 deletions
@@ -32,12 +32,17 @@ const MemoizedCell = memo(function Cell(props: CellProps) {
  return (
    <div style={style}>
      {card && (
-        // TODO: fix keyboard a11y
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
        <div
          key={card.value}
          className={selected === card.value ? cx(styles.card, styles.selected) : styles.card}
          onClick={() => onChange(card.value)}
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (e.key === 'Enter') {
+              onChange(card.value);
+            }
+          }}
+          role="button"
+          tabIndex={0}
        >
          {card.imgUrl.endsWith('.svg') ? (
            <SanitizedSVG src={card.imgUrl} className={styles.img} />