From d45422e898f0796ae7e8c66b16ab05089da9c04a Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 5 Sep 2024 10:49:23 +0200
Subject: [PATCH] fix(ui): all focus must be blue
---
src/app/shared/components/button/button.component.scss | 1 -
.../checkbox-filter/checkbox-filter.component.scss | 1 -
.../shared/components/checkbox/checkbox.component.scss | 1 -
.../collapsable-filter/collapsable-filter.component.scss | 1 -
.../collapse-header/collapse-header.component.scss | 5 -----
src/app/shared/components/input/input.component.scss | 4 ++--
src/app/shared/components/nav-bar/nav-bar.component.scss | 4 ----
.../components/search-bar/search-bar.component.scss | 1 -
.../shared/components/tag-item/tag-item.component.scss | 1 -
.../shared/components/textarea/textarea.component.scss | 5 ++---
src/styles.scss | 9 +--------
11 files changed, 5 insertions(+), 28 deletions(-)
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index a6b042dc2..ce30e9e23 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -16,7 +16,6 @@ button {
&:focus-visible {
outline-offset: 2px;
- outline: 2px solid $blue-focus;
}
// WIDTH
diff --git a/src/app/shared/components/checkbox-filter/checkbox-filter.component.scss b/src/app/shared/components/checkbox-filter/checkbox-filter.component.scss
index 1e4560d90..ca82d2ab9 100644
--- a/src/app/shared/components/checkbox-filter/checkbox-filter.component.scss
+++ b/src/app/shared/components/checkbox-filter/checkbox-filter.component.scss
@@ -22,7 +22,6 @@ button {
}
&:focus-visible {
outline-offset: 2px;
- outline: 2px solid $blue-focus;
}
&.checked {
border-color: $red;
diff --git a/src/app/shared/components/checkbox/checkbox.component.scss b/src/app/shared/components/checkbox/checkbox.component.scss
index a2cc28709..2439bf482 100644
--- a/src/app/shared/components/checkbox/checkbox.component.scss
+++ b/src/app/shared/components/checkbox/checkbox.component.scss
@@ -48,7 +48,6 @@ input {
&:focus-visible {
outline-offset: 2px;
- outline: 2px solid $blue-focus;
}
&:not(.checked) {
diff --git a/src/app/shared/components/collapsable-filter/collapsable-filter.component.scss b/src/app/shared/components/collapsable-filter/collapsable-filter.component.scss
index 06e681397..608493f33 100644
--- a/src/app/shared/components/collapsable-filter/collapsable-filter.component.scss
+++ b/src/app/shared/components/collapsable-filter/collapsable-filter.component.scss
@@ -29,7 +29,6 @@ button {
}
&:focus-visible {
outline-offset: 2px;
- outline: 2px solid $blue-focus;
}
&.expanded {
background-color: $red;
diff --git a/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss b/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss
index db098d19a..924096a98 100644
--- a/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss
+++ b/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss
@@ -28,9 +28,4 @@
transform: rotate(180deg);
}
}
-
- &:focus-visible {
- outline-offset: 0;
- outline: 2px solid $blue-focus;
- }
}
diff --git a/src/app/shared/components/input/input.component.scss b/src/app/shared/components/input/input.component.scss
index b8d4c166b..5593ae056 100644
--- a/src/app/shared/components/input/input.component.scss
+++ b/src/app/shared/components/input/input.component.scss
@@ -72,8 +72,8 @@
height: 40px;
}
- &:focus {
- border-color: $grey-1;
+ &:focus-visible {
+ outline-offset: 2px;
}
&.success {
border-color: $info-success;
diff --git a/src/app/shared/components/nav-bar/nav-bar.component.scss b/src/app/shared/components/nav-bar/nav-bar.component.scss
index 1893a0b09..b5798773c 100644
--- a/src/app/shared/components/nav-bar/nav-bar.component.scss
+++ b/src/app/shared/components/nav-bar/nav-bar.component.scss
@@ -25,7 +25,6 @@ nav {
justify-content: center;
flex: 1;
border-bottom: 3px solid transparent;
- transition: all 0.3s ease-in-out;
outline-offset: -2px; // Fixes the focus display issue in Firefox where it was not visible due to "overflow-x" on .navigation
&.active {
@include font-bold-16;
@@ -34,9 +33,6 @@ nav {
&:hover {
border-color: $grey-4;
}
- &:focus {
- outline-color: $red;
- }
}
}
}
diff --git a/src/app/shared/components/search-bar/search-bar.component.scss b/src/app/shared/components/search-bar/search-bar.component.scss
index 18bc89006..9cda69ceb 100644
--- a/src/app/shared/components/search-bar/search-bar.component.scss
+++ b/src/app/shared/components/search-bar/search-bar.component.scss
@@ -19,7 +19,6 @@
&:focus-visible {
outline-offset: 2px;
- outline: 2px solid $blue-focus;
}
&::placeholder {
diff --git a/src/app/shared/components/tag-item/tag-item.component.scss b/src/app/shared/components/tag-item/tag-item.component.scss
index ade1b9a87..f09eb8a10 100644
--- a/src/app/shared/components/tag-item/tag-item.component.scss
+++ b/src/app/shared/components/tag-item/tag-item.component.scss
@@ -97,7 +97,6 @@ button {
&:focus-visible {
outline-offset: 2px;
- outline: 2px solid $blue-focus;
}
&.unclickable {
diff --git a/src/app/shared/components/textarea/textarea.component.scss b/src/app/shared/components/textarea/textarea.component.scss
index 9e7268b2f..72754051c 100644
--- a/src/app/shared/components/textarea/textarea.component.scss
+++ b/src/app/shared/components/textarea/textarea.component.scss
@@ -43,9 +43,8 @@
transition: all 0.3s ease-in-out;
background: $grey-10;
- &:focus {
- outline: none;
- border-color: $grey-1;
+ &:focus-visible {
+ outline-offset: 2px;
}
&:disabled {
diff --git a/src/styles.scss b/src/styles.scss
index 2bdda62dc..a8322ad8d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -183,13 +183,6 @@ form p.notRequired {
}
}
-button {
- &:focus,
- &:focus-within {
- outline-color: $red;
- }
-}
-
// Layout
.w-100 {
width: 100%;
@@ -291,7 +284,7 @@ button {
}
:focus-visible {
- outline-color: $red;
+ outline: 2px solid $blue-focus;
}
.visually-hidden {
--
GitLab