From 34b97c55a6fa5c730bcd1c67356894dc9120c000 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 16 Dec 2021 12:21:24 +0100
Subject: [PATCH] RGAA: add outline for focused elements

---
 .../stepper/stepper.component.html            |  4 +--
 .../stepper/stepper.component.scss            |  4 ++-
 .../language-selector.component.html          |  4 +--
 .../language-selector.component.scss          |  5 +++
 src/styles/partials/_buttons.scss             | 15 +++++++--
 src/styles/partials/_forms.scss               | 10 +++++-
 src/styles/partials/_navigation.scss          | 33 -------------------
 7 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 33c9b1eb..9c6b984a 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -78,9 +78,7 @@
 							(Aucun titre)
 						</span>
 					</span>
-					<span class="step-counter-text" *ngIf="pollService.step_current !== 1"
-						>Étape {{ step_current }} sur {{ step_max }}
-					</span>
+					<span class="step-counter-text">Étape {{ step_current }} sur {{ step_max }} </span>
 				</h1>
 			</div>
 			<div class="column has-text-right">
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index a2356e23..fb8db730 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -66,10 +66,12 @@
 		line-height: $stepper-nav-height;
 		height: $stepper-nav-height;
 		padding: 0 1rem;
-		color: $secondary_color;
+		color: $secondary_color !important;
 
 		&:hover {
 			color: $font_color;
+			outline: black;
+			outline-style: solid;
 		}
 	}
 
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html
index 39484f4c..2286d56b 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.html
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html
@@ -1,9 +1,9 @@
 <div class="selector language-selector-container">
-	<span class="lang-button" (click)="nextLang()">
+	<button class="lang-button" (click)="nextLang()">
 		{{ 'LANGUAGES.' + currentLang | translate }}
 		<!--		<i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>-->
 		<i class="fa fa-chevron-down"></i>
-	</span>
+	</button>
 
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden">
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.scss b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
index 3113fa4c..4e76aaa3 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.scss
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
@@ -16,3 +16,8 @@
 		color: $primary-color;
 	}
 }
+.lang-button {
+	border: none;
+	padding: 0;
+	line-height: $header-nav-inner-height;
+}
diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss
index 0c010d44..129f9084 100644
--- a/src/styles/partials/_buttons.scss
+++ b/src/styles/partials/_buttons.scss
@@ -1,6 +1,17 @@
+.outlined {
+	&:focus,
+	&:active {
+		outline: black;
+		outline-style: solid;
+		outline-offset: 0.25rem;
+	}
+}
+a {
+	@extend .outlined;
+}
 button,
-.btn,
-.back {
+.btn {
+	@extend .outlined;
 	@extend .button;
 }
 
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index ed7e331a..c705d45a 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -39,7 +39,12 @@ textarea {
 		margin-bottom: 1em;
 	}
 }
-
+button,
+.button {
+	&:focus {
+		@extend .outlined;
+	}
+}
 textarea,
 input,
 .input,
@@ -49,6 +54,9 @@ select,
 	@extend .clickable;
 	border: solid 1px $font_color;
 	max-width: 90vw !important;
+	&:focus {
+		@extend .outlined;
+	}
 }
 
 input,
diff --git a/src/styles/partials/_navigation.scss b/src/styles/partials/_navigation.scss
index 0a4d7805..b839c546 100644
--- a/src/styles/partials/_navigation.scss
+++ b/src/styles/partials/_navigation.scss
@@ -58,39 +58,6 @@ a {
 		content: '';
 	}
 
-	&.next::before,
-	&.prev::after {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		display: block;
-		width: 100%;
-		height: 0.6rem;
-		margin: auto;
-		background-color: $secondary_color;
-		z-index: -1;
-	}
-
-	&.next::after,
-	&.prev::before {
-		display: inline-block;
-		width: 1rem;
-		height: 1rem;
-		border-bottom: 2px solid #000;
-	}
-
-	&.next::after {
-		margin-right: 1rem;
-		border-right: 2px solid #000;
-		transform: rotate(-45deg);
-	}
-
-	&.prev::before {
-		margin-left: 1rem;
-		border-left: 2px solid #000;
-		transform: rotate(45deg);
-	}
-
 	&:hover {
 		&.next::before,
 		&.prev::after {