From 082b9b912393a77384b17299065728b43c198f49 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sun, 8 Oct 2023 17:06:55 +0100
Subject: [PATCH 1/2] Make card close button an actual button

---
 src/components/ambassadorButton/AmbassadorButton.tsx     | 1 +
 src/components/ambassadorCard/AmbassadorCard.tsx         | 9 +++++++--
 src/components/ambassadorCard/ambassadorCard.module.scss | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/ambassadorButton/AmbassadorButton.tsx b/src/components/ambassadorButton/AmbassadorButton.tsx
index 7420b2c..70037af 100644
--- a/src/components/ambassadorButton/AmbassadorButton.tsx
+++ b/src/components/ambassadorButton/AmbassadorButton.tsx
@@ -25,6 +25,7 @@ export default function AmbassadorButton(props: AmbassadorButtonProps) {
       className={classes(styles.ambassador, className)}
       id={ambassadorKey}
       onClick={onClick}
+      type="button"
     >
       <img
         className={styles.img}
diff --git a/src/components/ambassadorCard/AmbassadorCard.tsx b/src/components/ambassadorCard/AmbassadorCard.tsx
index 33ce0ee..3a4b78f 100644
--- a/src/components/ambassadorCard/AmbassadorCard.tsx
+++ b/src/components/ambassadorCard/AmbassadorCard.tsx
@@ -57,9 +57,14 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
 
         <div className={styles.overlay}>
           {props.onClose && (
-            <div className={styles.close} onClick={onClose}>
+            <button
+              className={styles.close}
+              onClick={onClose}
+              type="button"
+              aria-label="Close"
+            >
               &times;
-            </div>
+            </button>
           )}
 
           <h2 className={styles.name} title={ambassador.name}>
diff --git a/src/components/ambassadorCard/ambassadorCard.module.scss b/src/components/ambassadorCard/ambassadorCard.module.scss
index edb432b..9486860 100644
--- a/src/components/ambassadorCard/ambassadorCard.module.scss
+++ b/src/components/ambassadorCard/ambassadorCard.module.scss
@@ -84,14 +84,18 @@
         right: 0.25rem;
         transform: translateY(-50%);
         width: 2rem;
+
+        appearance: none;
         display: block;
         font-size: 1.5rem;
         line-height: 1.1;
+        color: $primary-text;
         cursor: pointer;
         text-align: center;
         transition: $transition color;
 
-        &:hover {
+        &:hover,
+        &:focus {
           color: $outline-color;
         }
       }

From df4acbf7e8f9c2ec015d767260dfae0f4bdaec17 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sun, 8 Oct 2023 17:12:02 +0100
Subject: [PATCH 2/2] Apply styles to focus as well as hover

---
 .../ambassadorButton/ambassadorButton.module.scss        | 8 +++++++-
 src/pages/overlay/components/buttons/buttons.module.scss | 4 ++++
 .../overlay/ambassadors/ambassadors.module.scss          | 9 ++-------
 .../components/overlay/welcome/welcome.module.scss       | 6 ++++--
 src/pages/overlay/components/toggle/toggle.module.scss   | 3 ++-
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/ambassadorButton/ambassadorButton.module.scss b/src/components/ambassadorButton/ambassadorButton.module.scss
index 47e0af1..8945136 100644
--- a/src/components/ambassadorButton/ambassadorButton.module.scss
+++ b/src/components/ambassadorButton/ambassadorButton.module.scss
@@ -16,8 +16,14 @@
   flex-shrink: 0;
   box-shadow: $shadow;
   border-radius: 0.5rem;
+  outline-color: $outline-color;
   transition: $transition;
-  transition-property: filter;
+  transition-property: filter, outline;
+
+  &:hover,
+  &:focus {
+    outline: $outline;
+  }
 
   &:hover {
     filter: brightness(1.2);
diff --git a/src/pages/overlay/components/buttons/buttons.module.scss b/src/pages/overlay/components/buttons/buttons.module.scss
index 4e182a5..4586c80 100644
--- a/src/pages/overlay/components/buttons/buttons.module.scss
+++ b/src/pages/overlay/components/buttons/buttons.module.scss
@@ -23,8 +23,12 @@
     transition-property: outline, filter;
 
     &:hover,
+    &:focus,
     &.highlighted {
       outline: $outline;
+    }
+
+    &:hover {
       filter: brightness(1.2);
     }
 
diff --git a/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss b/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss
index 46eac10..1ab739a 100644
--- a/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss
+++ b/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss
@@ -99,7 +99,8 @@ $fade-distance: 3rem;
       z-index: 2;
       transition: $transition opacity;
 
-      &:hover {
+      &:hover,
+      &:focus {
         svg {
           scale: 1.2;
 
@@ -141,14 +142,8 @@ $fade-distance: 3rem;
   }
 
   .ambassadorButton {
-    outline-color: $outline-color;
-    transition: $transition;
-    transition-property: outline, filter;
-
-    &:hover,
     &.highlighted {
       outline: $outline;
-      filter: brightness(1.2);
     }
   }
 
diff --git a/src/pages/overlay/components/overlay/welcome/welcome.module.scss b/src/pages/overlay/components/overlay/welcome/welcome.module.scss
index 37072c4..f40f47d 100644
--- a/src/pages/overlay/components/overlay/welcome/welcome.module.scss
+++ b/src/pages/overlay/components/overlay/welcome/welcome.module.scss
@@ -15,7 +15,8 @@
     list-style: none;
     transition: $transition scale;
 
-    &:hover {
+    &:hover,
+    &:focus {
       scale: 1.2;
 
       a {
@@ -44,7 +45,8 @@
   transition: $transition;
   transition-property: color;
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: $outline-color;
   }
 }
diff --git a/src/pages/overlay/components/toggle/toggle.module.scss b/src/pages/overlay/components/toggle/toggle.module.scss
index 5ac7088..698139e 100644
--- a/src/pages/overlay/components/toggle/toggle.module.scss
+++ b/src/pages/overlay/components/toggle/toggle.module.scss
@@ -6,7 +6,8 @@
   gap: 0.5rem;
   cursor: pointer;
 
-  &:hover {
+  &:hover,
+  &:focus-within {
     .toggle {
       input {
         outline: $outline;