Add a keyboard listener to stackable fees card to improve accessibility

danskernesdigitalebibliotek · Dec 7, 2023 · cfe8235 · cfe8235
1 parent 17b4caa
commit cfe8235
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/apps/fee-list/stackable-fees/stackable-fees.tsx b/src/apps/fee-list/stackable-fees/stackable-fees.tsx
@@ -31,12 +31,17 @@ const StackableFees: FC<StackableFeeProps & MaterialProps> = ({
   const { amount = 0, creationDate = "", reasonMessage = "" } = feeData;
   const stackSize = amountOfMaterialsWithDueDate - 1;
   const listReservationClass = clsx(["list-reservation", "my-32"], {
-    "list-reservation--stacked": stackSize > 1
+    "list-reservation--stacked": stackSize > 0
   });
   return (
     <button
       type="button"
       onClick={() => openDetailsModalClickEvent(faust)}
+      onKeyUp={(e) => {
+        if (e.key === "Enter" || e.key === "Space") {
+          openDetailsModalClickEvent(faust);
+        }
+      }}
       className={listReservationClass}
     >
       {feeData && (