From 309b578d2a14de187b678b5e7847755e0c0fe923 Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefand@ENSRO0422.local>
Date: Fri, 24 Oct 2025 15:04:17 +0300
Subject: [PATCH] FORMS-18763: Color alone is used to visually convey the state
 of a control @sunnym @vavarsh

---
 src/site/_mixins.scss | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/site/_mixins.scss b/src/site/_mixins.scss
index 3c046d5..1efcaff 100644
--- a/src/site/_mixins.scss
+++ b/src/site/_mixins.scss
@@ -218,6 +218,14 @@
   }
 }
 
+@mixin focused-button {
+  position: relative;
+  box-shadow: 0 6px 12px 1px rgba($color: #000000, $alpha: .25);
+  transform: translateY(-5%);
+  scale: 102%;
+  transition: box-shadow 0.1s ease-out, transform 0.1s ease-out;
+}
+
 @mixin primary-button {
   width: 100%;
   display: block;
@@ -233,11 +241,11 @@
   font-family: defaultFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   &:hover:not([disabled]) {
-    position: relative;
-    box-shadow: 0 6px 12px 1px rgba($color: #000000, $alpha: .25);
-    transform: translateY(-5%);
-    scale: 102%;
-    transition: box-shadow 0.1s ease-out, transform 0.1s ease-out;
+    @include focused-button;
+  }
+
+  &:focus-visible:not([disabled]) {
+    @include focused-button;
   }
 
   &:disabled {