Make sure not to trigger parent events in MaterialInfo component

When clicking on the title, two modals would open - one event triggered
by clicking the title on the card, and the other triggered by the card
itself.

src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx

@@ -27,6 +27,11 @@ const AdditionalMaterialsButton: FC<AdditionalMaterialsButtonProps> = ({
     <button
       type="button"
       onClick={(e) => openDueDateModalCallBack(e)}
+      onKeyUp={(e) => {
+        if (e.key === "Enter" || e.key === "Space") {
+          openDueDateModalCallBack(e as unknown as MouseEvent);
+        }
+      }}
       // in loan-list-items.tsx
       aria-describedby="materials-modal-text"
       className={`list-reservation__note list-reservation__note--${showOn}`}

src/apps/loan-list/materials/stackable-material/material-info.tsx

@@ -53,7 +53,16 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
         </div>
         <div className="list-reservation__about">
           <button
-            onClick={() => openDetailsModal()}
+            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+              e.stopPropagation();
+              openDetailsModal();
+            }}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === "Space") {
+                e.stopPropagation();
+                openDetailsModal();
+              }
+            }}
             type="button"
             // This is to handle focus when more items are loaded via pagination
             // eslint-disable-next-line jsx-a11y/no-autofocus