refactor(app): improve a11y

readme.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="src/assets/logos/logo.png"/>
+  <img src="src/assets/logos/logo.png" alt="RetroSki logo"/>
 </p>
 
 # ❄️ Retro Ski game

src/app/common/components/toolbar/toolbar.component.html

@@ -2,14 +2,20 @@
     <ng-content select="left-actions"></ng-content>
 </div>
 <div class="logo-container">
-    <img class="small-logo" src="./assets/logos/small_logo.png" />
+    <img
+        class="small-logo"
+        src="./assets/logos/small_logo.png"
+        alt="RetroSki logo"
+    />
 </div>
 <div class="right-actions-container">
     <ng-content select="right-actions"></ng-content>
     @if(authService.isAuth()) {
-        <app-button-icon icon="account_circle" routerLink="/profile"></app-button-icon>
-    }
-    @if(!hideSettings()) {
-        <app-button-icon icon="settings" routerLink="/settings"></app-button-icon>
+    <app-button-icon
+        icon="account_circle"
+        routerLink="/profile"
+    ></app-button-icon>
+    } @if(!hideSettings()) {
+    <app-button-icon icon="settings" routerLink="/settings"></app-button-icon>
     }
 </div>

src/app/pages/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="retro-content">
-    <img class="logo" src="./assets/logos/logo.png" />
+    <img class="logo" src="./assets/logos/logo.png" alt="RetroSki logo" />
     <div class="title">Welcome!</div>
     <div class="subtitle">
         Join us on the mountain to experience thrilling 2D-generated alpine ski

src/app/pages/learning/learning.component.html

@@ -62,43 +62,72 @@
     <div class="retro-title">Devices</div>
     <app-expander title="Gamepad (recommanded)" [expanded]="true">
         <div class="retro-command">
-            <img src="./assets/icons/gamepad_a.png" /> Start riding
+            <img src="./assets/icons/gamepad_a.png" alt="gamepad A" /> Start
+            riding
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/gamepad_left_stick.png" /> Carve left /
-            right
+            <img
+                src="./assets/icons/gamepad_left_stick.png"
+                alt="gamepad left stick"
+            />
+            Carve left / right
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/gamepad_b.png" /> Brake / slide
+            <img src="./assets/icons/gamepad_b.png" alt="gamepad B" /> Brake /
+            slide
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/gamepad_select.png" /> Leave the race
+            <img src="./assets/icons/gamepad_select.png" alt="gamepad select" />
+            Leave the race
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/gamepad_left_bumper.png" /> Toggle ghosts
+            <img
+                src="./assets/icons/gamepad_left_bumper.png"
+                alt="gamepad left bumper"
+            />
+            Toggle ghosts
         </div>
     </app-expander>
     <app-expander title="Keyboard">
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_arrow_up.png" /> Start riding
+            <img
+                src="./assets/icons/keyboard_arrow_up.png"
+                alt="keyboard arrow up"
+            />
+            Start riding
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_arrow_left.png" /> Carve left
+            <img
+                src="./assets/icons/keyboard_arrow_left.png"
+                alt="keyboard arrow left"
+            />
+            Carve left
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_arrow_right.png" /> Carve right
+            <img
+                src="./assets/icons/keyboard_arrow_right.png"
+                alt="keyboard arrow right"
+            />
+            Carve right
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_space.png" /> Brake / slide
+            <img
+                src="./assets/icons/keyboard_space.png"
+                alt="keyboard space bar"
+            />
+            Brake / slide
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_exit.png" /> Leave the race
+            <img src="./assets/icons/keyboard_exit.png" alt="keyboard ESC" />
+            Leave the race
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_g.png" /> Toggle ghosts
+            <img src="./assets/icons/keyboard_g.png" alt="keyboard G" /> Toggle
+            ghosts
         </div>
         <div class="retro-command">
-            <img src="./assets/icons/keyboard_d.png" /> Toggle debug mode
+            <img src="./assets/icons/keyboard_d.png" alt="keyboard D" /> Toggle
+            debug mode
         </div>
     </app-expander>
     <app-expander title="Touch device">
@@ -131,10 +160,18 @@
     </div>
     <div class="retro-subtitle">Ghosts on track</div>
     <div class="retro-command">
-        <img src="./assets/icons/global_record_ghost.png" /> Global best
+        <img
+            src="./assets/icons/global_record_ghost.png"
+            alt="global record ghost"
+        />
+        Global best
     </div>
     <div class="retro-command">
-        <img src="./assets/icons/event_record_ghost.png" /> Event best
+        <img
+            src="./assets/icons/event_record_ghost.png"
+            alt="event record ghost"
+        />
+        Event best
     </div>
 </ng-template>
 

src/app/pages/reset-password/reset-password.component.html

@@ -9,7 +9,7 @@
 <div class="retro-content">
     @if(token) { @if(passwordChanged && passwordChanged()) {
     <div class="retro-placeholder-image">
-        <img src="assets/icons/password.svg" />
+        <img src="assets/icons/password.svg" alt="password icon" />
     </div>
     <div class="retro-title placeholder">Password updated</div>
     <div class="retro-text placeholder">
@@ -62,7 +62,7 @@
     </div>
     } } @else { @if(mailSent()) {
     <div class="retro-placeholder-image">
-        <img src="assets/icons/mailSent.svg" />
+        <img src="assets/icons/mailSent.svg" alt="mail sent icon" />
     </div>
     <div class="retro-title placeholder">Mail sent</div>
     <div class="retro-text placeholder">

src/app/pages/verification/verification.component.html

@@ -6,7 +6,7 @@
 <div class="retro-content">
     @if(token && verificationDone()) {
     <div class="retro-placeholder-image">
-        <img src="assets/icons/verified.svg" alt="mail sent icon" />
+        <img src="assets/icons/verified.svg" alt="verified icon" />
     </div>
     <div class="retro-title placeholder">Profile verified</div>
     <div class="retro-text placeholder">
@@ -29,7 +29,10 @@
     </button>
     } @else {
     <div class="retro-placeholder-image">
-        <img src="assets/icons/safety_check.svg" alt="mail sent icon" />
+        <img
+            src="assets/icons/safety_check.svg"
+            alt="verification process icon"
+        />
     </div>
     <div class="retro-title placeholder">Almost there!</div>
     <div class="retro-text placeholder">

src/index.html

@@ -33,7 +33,7 @@
             rel="stylesheet"
         />
         <link rel="manifest" href="manifest.webmanifest" />
-        <meta name="theme-color" content="#1976d2" />
+        <meta name="theme-color" content="#9747ff" />
     </head>
     <body oncontextmenu="return false;">
         <div class="app-container">