From 48c2d57cd4ec34e9d689693e64f1e9066c150388 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 23 Apr 2025 14:34:50 +0200
Subject: [PATCH] [A11y] fix border contrast for inputs

---
 src/pretix/static/pretixbase/scss/_theme.scss  |  8 +++++---
 src/pretix/static/pretixpresale/scss/main.scss | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/pretix/static/pretixbase/scss/_theme.scss b/src/pretix/static/pretixbase/scss/_theme.scss
index 9e7d0eb249..c9feb9e153 100644
--- a/src/pretix/static/pretixbase/scss/_theme.scss
+++ b/src/pretix/static/pretixbase/scss/_theme.scss
@@ -41,20 +41,22 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .btn-default {
-  box-shadow: 0px 0px 0px 1px #cccccc inset;
+  box-shadow: 0px 0px 0px 1px $input-border inset;
   box-sizing: border-box;
 }
 
 .btn-default:hover, .btn-default:focus {
-  box-shadow: 0px 0px 0px 1px #cccccc inset, inset 0 1px 3px 0 #BFBFBF;
+  box-shadow: 0px 0px 0px 1px $input-border inset, inset 0 1px 3px 0 #BFBFBF;
   background: $btn-default-bg;
 }
 
 .btn-default:active, .btn-default:active:hover, .btn-default:active:focus {
-  box-shadow: 0px 0px 0px 1px #cccccc inset, inset 0 1px 8px 0 #BFBFBF;
   background: $btn-default-bg;
   outline: 0;
 }
+.btn-default.active, .btn-default.active:hover, .btn-default.active:focus {
+  box-shadow: 0px 0px 0px 1px $input-border inset, inset 0 1px 8px 0 #BFBFBF;  
+}
 
 .btn-primary:hover, .btn-primary:focus {
   box-shadow: inset 0 1px 3px 0 var(--pretix-brand-primary-shade-25);
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index dde87c13c5..379161fa36 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -1,5 +1,6 @@
 // before variables.scss because it only affects presale, not control
 $body-bg: #f5f5f5 !default;
+$input-border: #949494;
 
 $font-size-base: 0.875rem !default;/* 14px/16px = 0.875rem */
 
@@ -103,10 +104,24 @@ a, .btn-link {
 /* see line 26, pretix/static/bootstrap/scss/bootstrap/_buttons.scss */
 button:focus, a:focus, .btn:focus, summary:focus,
 /*button:active, a:active, .btn:active, summary:active,*/
-button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus {
+button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus,
+input:focus, .form-control:focus, .btn-checkbox:has(input:focus),
+.input-item-count-group:has(input:focus), .input-group-price:has(input:focus) {
     outline: 2px solid $link-hover-color;
     outline-offset: 2px;
 }
+input:focus, .form-control:focus {
+    border-color: $input-border;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.btn-checkbox input:focus, .input-item-count-group input:focus, .input-group-price input:focus {
+    outline: none;
+}
+/* border-radius on these containers is needed for correctly rounded focus-outlines */
+.input-item-count-group, .input-group-price {
+    border-radius: var(--pretix-border-radius-base);
+}
 
 footer {
     clear: both;