From a29c6e41a6334c3b4ac7b2ff8122a4173edecbd3 Mon Sep 17 00:00:00 2001
From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:35:48 +0100
Subject: [PATCH] add focusable HOC

---
 components/Focusable/Focusable.tsx | 13 +++++++
 components/Footer/Footer.tsx       | 55 +++++++++++++++++-------------
 2 files changed, 44 insertions(+), 24 deletions(-)
 create mode 100644 components/Focusable/Focusable.tsx

diff --git a/components/Focusable/Focusable.tsx b/components/Focusable/Focusable.tsx
new file mode 100644
index 00000000..9d6b93ba
--- /dev/null
+++ b/components/Focusable/Focusable.tsx
@@ -0,0 +1,13 @@
+import React, { cloneElement, ReactElement } from "react";
+
+interface FocusableProps {
+  children: ReactElement;
+}
+
+const Focusable: React.FC<FocusableProps> = ({ children }) => {
+  return cloneElement(children, {
+    className: `${children.props.className} rounded-md focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600`,
+  });
+};
+
+export default Focusable;
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index ec34e146..9fc3d970 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -13,6 +13,7 @@ import {
   twitterUrl,
   youtubeUrl,
 } from "../../config/site_settings";
+import Focusable from "../Focusable/Focusable";
 
 const navigation = {
   main: footerNav,
@@ -55,37 +56,43 @@ const Footer = () => {
           {navigation.main.map((item) => (
             <div key={item.name} className="px-5 py-2">
               {item.href.includes("http") ? (
-                <a
-                  href={item.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="focus-style p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
-                >
-                  {item.name}
-                </a>
+                <Focusable>
+                  <a
+                    href={item.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
+                  >
+                    {item.name}
+                  </a>
+                </Focusable>
               ) : (
-                <Link
-                  className="focus-style p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
-                  href={item.href}
-                >
-                  {item.name}
-                </Link>
+                <Focusable>
+                  <Link
+                    className="p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
+                    href={item.href}
+                  >
+                    {item.name}
+                  </Link>
+                </Focusable>
               )}
             </div>
           ))}
         </nav>
         <div className="mt-8 flex justify-center space-x-8">
           {navigation.social.map((item) => (
-            <a
-              key={item.name}
-              href={item.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`focus-style rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
-            >
-              <span className="sr-only">{item.name}</span>
-              <item.icon className="h-6 w-6" aria-hidden="true" />
-            </a>
+            <Focusable>
+              <a
+                key={item.name}
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
+              >
+                <span className="sr-only">{item.name}</span>
+                <item.icon className="h-6 w-6" aria-hidden="true" />
+              </a>
+            </Focusable>
           ))}
         </div>
         <p className="mt-8 text-center text-xs text-neutral-600 dark:text-neutral-500">