From 43710c9e7d59e06f304830cc7e6b92893e7c7aa1 Mon Sep 17 00:00:00 2001
From: Joschka de Cuveland <joschka.decuveland@digitalservice.bund.de>
Date: Mon, 7 Aug 2023 09:13:58 +0200
Subject: [PATCH] Add role=button to links looking like buttons

---
 app/components/Button.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 87a11b59c..41193ea23 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -51,9 +51,25 @@ function Button({
   const textSpan = text ? <span>{text}</span> : "";
   const childrenSpan = <span>{children}</span>;
 
+  // for links that have role="button" we need to add an event handler so that it can
+  // be activated with the space bar
+  // see: https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+  const onKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+    if (event.code === "Space") {
+      event.currentTarget.click();
+      event.preventDefault();
+    }
+  };
+
   if (href) {
     return (
-      <a {...(props as ButtonLinkProps)} href={href} className={buttonClasses}>
+      <a
+        {...(props as ButtonLinkProps)}
+        href={href}
+        className={buttonClasses}
+        role="button"
+        onKeyDown={onKeyDown}
+      >
         {iconLeft} {children ? childrenSpan : textSpan} {iconRight}
       </a>
     );