Improve accessibility and design

Author: javiereguiluz

assets/styles/app.scss

@@ -199,6 +199,7 @@ header {
           border-radius: 4px;
           color: $gray-900;
           display: flex;
+          justify-content: space-between;
           padding: 10px 20px;
 
           small {
@@ -208,7 +209,7 @@ header {
             font-size: 14px;
             font-weight: bold;
             line-height: 1.1;
-            margin-inline-end: 10px;
+            margin-inline-start: 10px;
             min-width: 26px;
             padding: 2px 6px;
             text-align: center;
@@ -217,12 +218,12 @@ header {
         }
 
         &:hover a {
-          outline: 3px solid #f7c36e;
-          outline-offset: 2px;
+          outline: 3px solid #18bc9c;
+          outline-offset: -5px;
 
           small {
-            background: #2c3e50;
-            border-color: #2c3e50;
+            background: #18bc9c;
+            border-color: #18bc9c;
             color: #fff;
           }
         }

public/build/app.493ae962.css renamed to public/build/app.e7ad18f4.css

@@ -9,7 +9,7 @@
       ],
       "css": [
         "/build/42.76194c5a.css",
-        "/build/app.493ae962.css"
+        "/build/app.e7ad18f4.css"
       ]
     },
     "admin": {
@@ -30,7 +30,7 @@
     "/build/42.5aced7b3.js": "sha384-wqPte8ueaLTZwKszn5yK/iS5GuSBYNuwZtNs5G6BWGzGI17VoFv2lXNHwQbeTCWh",
     "/build/app.8d5ecae9.js": "sha384-2UhLzumRcZ9rIylCmaGHxKCG1IFSEarrvMs4G6qEzE0Hl0lnrNc+e9jB8gZijjaf",
     "/build/42.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
-    "/build/app.493ae962.css": "sha384-Ae1HWNmMAMvR0KVZTirvCPKrqUDIlzfDUgc4yLGuRJ01hy8MkNcOXlEgPLgy+YOW",
+    "/build/app.e7ad18f4.css": "sha384-AX8sd4a5GkOjaVooLq9t+zDI/fqugWjeU5OP+fHkycws0R/G5zaM8UZ4qx32gTNi",
     "/build/384.af623ff4.js": "sha384-DTkf7hVvZ08YUepoH5wzP+thJm6maRzLe8KxUgIc2OajdJkoSDct0pJMEPYcEEeF",
     "/build/admin.747eb0c9.js": "sha384-vDe3FhM5HnWbM4nEdbmSv8AB5n/PfPJv0y0Goloka7w6jppc6di5LpKD1A252aFg",
     "/build/admin.2b1a6c83.css": "sha384-ikQwASTRPK0sjWtW//EXsUjqkjNxc2Yndtt0m5a/I/qE+qEoikXP5ailZKDaqtN9"

public/build/entrypoints.json

@@ -1,5 +1,5 @@
 {
-  "build/app.css": "/build/app.493ae962.css",
+  "build/app.css": "/build/app.e7ad18f4.css",
   "build/app.js": "/build/app.8d5ecae9.js",
   "build/admin.css": "/build/admin.2b1a6c83.css",
   "build/admin.js": "/build/admin.747eb0c9.js",

public/build/manifest.json

@@ -96,24 +96,24 @@
                 <div class="modal-lg modal-dialog modal-dialog-centered">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h5 class="modal-title">
+                            <p class="modal-title" lang="en">
                                 {# display this title always in English to make the language selector easier to use #}
                                 Choose your language
-                            </h5>
+                            </p>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
 
                         <div class="modal-body">
-                            <ul class="locales" role="menu" aria-labelledby="locales">
+                            <ul class="locales">
                                 {% for locale in locales() %}
                                     {% set is_active = app.request.locale == locale.code %}
                                     {% set is_rtl = locale.code in ['ar', 'fa', 'he'] %}
-                                    <li aria-checked="{{ is_active ? 'true' : 'false' }}" class="{{ is_active ? 'active' }} {{ is_rtl ? 'rtl' }}" role="menuitem" translate="no">
-                                        <a class="stretched-link" href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({_locale: locale.code})) }}">
-                                            <small>{{ locale.code[0:2] }}</small>
+                                    <li class="{{ is_active ? 'active' }} {{ is_rtl ? 'rtl' }}" translate="no">
+                                        <a class="stretched-link" lang="{{ locale.code }}" hreflang="{{ locale.code }}" href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({_locale: locale.code})) }}">
                                             {{ locale.name|capitalize }}
+                                            <small>{{ locale.code }}</small>
                                         </a>
                                     </li>
                                 {% endfor %}