Accessibility improvement

packages/volto-button-block/news/26.feature

@@ -0,0 +1,5 @@
+This PR improves accessibility by rendering a semantic `<a>` tag instead of a `<Button>` when the component is linked (data.href). Buttons are meant for actions, while links indicate navigation. Using the correct HTML element helps assistive technologies (like screen readers) interpret the component properly and enhances keyboard navigation and semantics.
+
+In edit mode, the button is still wrapped in a ConditionalLink, as before. In view mode, a plain `<a>` tag is rendered when a link is present, and a `<Button>` is used only if no link exists.
+
+@tomschall

packages/volto-button-block/src/components/View.jsx

@@ -36,23 +36,36 @@ const View = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.href]);
 
-  let link = hasLink ? (
-    data.href.length > 0 && (
-      <ConditionalLink
-        to={data.href[0]?.['@id']}
-        condition={!isEditMode}
-        openLinkInNewTab={data.openLinkInNewTab}
-      >
-        <Button className={(cx('button'), data.align)}>
+  let link;
+  if (hasLink && data.href.length > 0) {
+    if (isEditMode) {
+      link = (
+        <ConditionalLink
+          to={data.href[0]?.['@id']}
+          condition={!isEditMode}
+          openLinkInNewTab={data.openLinkInNewTab}
+          item={data.href[0]}
+        >
+          <Button className={(cx('button'), data.align)}>
+            {data.title || intl.formatMessage(messages.ButtonText)}
+          </Button>
+        </ConditionalLink>
+      );
+    } else {
+      // Accessibility: Render as <a> tag in view mode when link exists
+      link = (
+        <a href={data.href[0]?.['@id']} className={cx('button', data.align)}>
           {data.title || intl.formatMessage(messages.ButtonText)}
-        </Button>
-      </ConditionalLink>
-    )
-  ) : (
-    <Button className="noLink">
-      {data.title || intl.formatMessage(messages.ButtonText)}
-    </Button>
-  );
+        </a>
+      );
+    }
+  } else {
+    link = (
+      <Button className="noLink">
+        {data.title || intl.formatMessage(messages.ButtonText)}
+      </Button>
+    );
+  }
 
   return (
     <BlockWrapper {...props} ExtraWrapper={LegacyWrapper}>