RGAA: add outline for focused elements

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">

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;
 		}
 	}
 

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">

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;
+}

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;
 }
 

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,

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 {