Introduce MaterialSecondaryButton

To ensure the `MaterialButtonReaderTeaser` and `MaterialButtonsFindOnShelf` have identical behavior, I created a shared component to eliminate code duplication.

src/components/Buttons/Button.tsx

@@ -18,6 +18,7 @@ export type ButtonProps = {
   id?: string;
   classNames?: string;
   dataCy?: string;
+  ariaDescribedBy?: string;
 };
 
 export const Button: React.FC<ButtonProps> = ({
@@ -31,7 +32,8 @@ export const Button: React.FC<ButtonProps> = ({
   iconClassNames,
   id,
   classNames,
-  dataCy
+  dataCy,
+  ariaDescribedBy
 }) => {
   return (
     <button
@@ -43,6 +45,7 @@ export const Button: React.FC<ButtonProps> = ({
       disabled={disabled}
       onClick={onClick}
       id={id}
+      aria-describedby={ariaDescribedBy}
     >
       {label}
       <ButtonIcon

src/components/material/material-buttons/generic/MaterialSecondaryButton.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import { Button } from "../../../Buttons/Button";
+import { ButtonSize } from "../../../../core/utils/types/button";
+
+interface MaterialSecondaryButtonProps {
+  label: string;
+  size: ButtonSize;
+  onClick: () => void;
+  dataCy?: string;
+  ariaDescribedBy: string;
+}
+
+const MaterialSecondaryButton: FC<MaterialSecondaryButtonProps> = ({
+  label,
+  size,
+  onClick,
+  dataCy,
+  ariaDescribedBy
+}) => {
+  // If element is currently focused on, we would like to let users open it using enter
+  const handleKeyUp = (key: string) => {
+    if (key === "Enter") {
+      onClick();
+    }
+  };
+
+  if (size !== "small") {
+    return (
+      <Button
+        label={label}
+        buttonType="none"
+        variant="outline"
+        disabled={false}
+        collapsible={false}
+        size="large"
+        onClick={onClick}
+        dataCy={dataCy}
+        ariaDescribedBy={ariaDescribedBy}
+      />
+    );
+  }
+
+  return (
+    <button
+      className="link-tag text-small-caption material-manifestation-item__find capitalize-all btn-ui"
+      aria-describedby={ariaDescribedBy}
+      onClick={onClick}
+      onKeyUp={(e) => handleKeyUp(e.key)}
+      tabIndex={0}
+      type="button"
+      data-cy={dataCy}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default MaterialSecondaryButton;

src/components/material/material-buttons/online/MaterialButtonReaderTeaser.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useModalButtonHandler } from "../../../../core/utils/modal";
 import { useText } from "../../../../core/utils/text";
 import { ButtonSize } from "../../../../core/utils/types/button";
-import { Button } from "../../../Buttons/Button";
+import MaterialSecondaryButton from "../generic/MaterialSecondaryButton";
 
 type MaterialButtonOnlineTeaserType = {
   identifier: string;
@@ -22,40 +22,14 @@ const MaterialButtonReaderTeaser = ({
     open(`reader-modal-${identifier}`);
   };
 
-  // If element is currently focused on, we would like to let users open it using enter
-  const onKeyUp = (key: string) => {
-    if (key === "Enter") {
-      onClick();
-    }
-  };
-
-  if (size !== "small") {
-    return (
-      <Button
-        label={t("onlineMaterialTeaserText")}
-        buttonType="none"
-        variant="outline"
-        disabled={false}
-        collapsible={false}
-        size="large"
-        onClick={onClick}
-        dataCy={dataCy}
-      />
-    );
-  }
-
   return (
-    <button
-      className="link-tag text-small-caption material-manifestation-item__find capitalize-all btn-ui"
-      aria-describedby={t("onlineMaterialTeaserText")}
+    <MaterialSecondaryButton
+      label={t("onlineMaterialTeaserText")}
+      size={size}
       onClick={onClick}
-      onKeyUp={(e) => onKeyUp(e.key)}
-      tabIndex={0}
-      type="button"
-      data-cy={dataCy}
-    >
-      {t("onlineMaterialTeaserText")}
-    </button>
+      dataCy={dataCy}
+      ariaDescribedBy={t("onlineMaterialTeaserText")}
+    />
   );
 };
 

src/components/material/material-buttons/physical/MaterialButtonsFindOnShelf.tsx

@@ -1,10 +1,9 @@
-import * as React from "react";
-import { FC } from "react";
+import React, { FC } from "react";
 import { useModalButtonHandler } from "../../../../core/utils/modal";
 import { useText } from "../../../../core/utils/text";
 import { ButtonSize } from "../../../../core/utils/types/button";
 import { FaustId } from "../../../../core/utils/types/ids";
-import { Button } from "../../../Buttons/Button";
+import MaterialSecondaryButton from "../generic/MaterialSecondaryButton";
 import { findOnShelfModalId } from "../../../find-on-shelf/FindOnShelfModal";
 
 export interface MaterialButtonsFindOnShelfProps {
@@ -21,43 +20,19 @@ const MaterialButtonsFindOnShelf: FC<MaterialButtonsFindOnShelfProps> = ({
   const t = useText();
   const { open } = useModalButtonHandler();
   const modalId = findOnShelfModalId(faustIds);
+
   const onClick = () => {
     open(modalId);
   };
-  // If element is currently focused on, we would like to let users open it using enter
-  const onKeyUp = (key: string) => {
-    if (key === "Enter") {
-      onClick();
-    }
-  };
-
-  if (size !== "small") {
-    return (
-      <Button
-        label={t("findOnBookshelfText")}
-        buttonType="none"
-        variant="outline"
-        disabled={false}
-        collapsible={false}
-        size="large"
-        onClick={onClick}
-        dataCy={dataCy}
-      />
-    );
-  }
 
   return (
-    <button
-      className="link-tag text-small-caption material-manifestation-item__find capitalize-all btn-ui"
-      aria-describedby={t("findOnShelfExpandButtonExplanationText")}
+    <MaterialSecondaryButton
+      label={t("findOnBookshelfText")}
+      size={size || "large"}
       onClick={onClick}
-      onKeyUp={(e) => onKeyUp(e.key)}
-      tabIndex={0}
-      type="button"
-      data-cy={dataCy}
-    >
-      {t("findOnBookshelfText")}
-    </button>
+      dataCy={dataCy}
+      ariaDescribedBy={t("findOnShelfExpandButtonExplanationText")}
+    />
   );
 };