From 093cea5988b9fde3cf215a87af4b5b37d5659946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 15 Mar 2022 22:17:36 +0100
Subject: [PATCH] style: use outline for focused buttons (#62827)

---
 gadjo/static/css/_forms.scss | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss
index 524084f..6b8aea9 100644
--- a/gadjo/static/css/_forms.scss
+++ b/gadjo/static/css/_forms.scss
@@ -1,10 +1,5 @@
 @charset "UTF-8";
 
-$button-color: $primary-color;
-$button-cancel-color: darken(grayscale($button-color), 10%);
-$button-delete-color: #CD2026;
-$button-submit-color: #215D9C;
-
 $widget-background: white;
 $widget-focus-background: white;
 $widget-border: 1px solid #AAA;
@@ -15,6 +10,13 @@ $widget-focus-color: $widget-color;
 $widget-focus-outline: 1px solid $primary-color;
 $widget-focus-outline-offset: 0;
 
+$button-color: $primary-color;
+$button-cancel-color: darken(grayscale($button-color), 10%);
+$button-delete-color: #CD2026;
+$button-submit-color: #215D9C;
+$button-focus-outline: $widget-focus-outline !default;
+$button-focus-outline-offset: $widget-focus-outline-offset !default;
+
 $data_uri_arrow-down: "arrow-down.svg";
 
 input, select, button, textarea {
@@ -106,8 +108,14 @@ a.button {
 	}
 	&:active { border-color: darken($button-color, 10%); }
 	&:focus {
-		border-color: darken($button-color, 20%);
+		@if $button-focus-outline == none {
+			outline: 1px dotted $button-background;
+		} @else {
+			outline: $button-focus-outline;
+			outline-offset: $button-focus-outline-offset;
+		}
 	}
+
 	&.disabled, &:disabled {
 		border-color: #888;
 		color: #888;
@@ -136,6 +144,9 @@ a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.but
 		border-color: darken($button-cancel-color, 20%);
 	}
 	&:active { border-color: darken($button-cancel-color, 10%); }
+	&:focus {
+		outline-color: darken($button-cancel-color, 10%);
+	}
 }
 
 div.buttons {
@@ -162,6 +173,9 @@ a.delete-button, button.delete-button, div.buttons .delete-button input, div.but
 		border-color: darken($button-delete-color, 20%);
 	}
 	&:active { border-color: darken($button-delete-color, 10%); }
+	&:focus {
+		outline-color: darken($button-delete-color, 10%);
+	}
 }
 
 a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button {