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
danskernesdigitalebibliotek · Jan 15, 2024 · 15d4152 · 15d4152
1 parent 2b3e4fe
commit 15d4152
Showing 1 changed file with 6 additions and 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
@@ -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>
         )}