From 15d4152ad7c88301c887f89393567cb6d523b0ba Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Mon, 15 Jan 2024 12:06:52 +0100
Subject: [PATCH] Don't render arrow button inside another button in
 selectable-material

..component. This breaks accessibility rules:
https://dequeuniversity.com/rules/axe/4.8/nested-interactive?application=AxeChrome
---
 .../selectable-material/selectable-material.tsx   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
index 632f75118f..58a6f6850b 100644
--- a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
+++ b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
@@ -59,7 +59,9 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
       openDetailsModal(item);
     }
   };
-  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleOnKeyUp = (
+    e: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>
+  ) => {
     if (openDetailsModal && (e.key === "Enter" || e.key === "Space")) {
       openDetailsModal(item);
     }
@@ -150,17 +152,12 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
           </div>
         </div>
         {openDetailsModal && (
-          <div
-            className="list-materials__arrow"
-            role="button"
-            onClick={handleOnClick}
-            onKeyUp={handleOnKeyUp}
-            tabIndex={0}
-          >
+          <div className="list-materials__arrow">
             <ArrowButton
               arrowLabelledBy={listId(item)}
               cursorPointer
-              clickEventHandler={() => openDetailsModal(item)}
+              clickEventHandler={handleOnClick}
+              keyUpEventHandler={handleOnKeyUp}
             />
           </div>
         )}