diff --git a/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx b/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx
index 1a6fe262b9..bb99774258 100644
--- a/src/apps/loan-list/materials/stackable-material/additional-materials-button.tsx
+++ b/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}`}
diff --git a/src/apps/loan-list/materials/stackable-material/material-info.tsx b/src/apps/loan-list/materials/stackable-material/material-info.tsx
index a9beac93d1..70d4d5b715 100644
--- a/src/apps/loan-list/materials/stackable-material/material-info.tsx
+++ b/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