♿ — Improve accessibility on index page

CHANGELOG

@@ -5,6 +5,7 @@ Revision history for Lutim
 	- ✨ — Allow to configure the directory where to store the images (#125)
 	- ✨ — Ask for confirmation before deleting image on index page (#92)
 	- ✨ — Mass delete button in "My images" page (#47)
+	- ♿ — Improve accessibility on index page
 
 0.16.0 2023-12-29
 	- ⬆️ Update jQuery

themes/default/public/css/lutim.css

@@ -134,3 +134,21 @@ h1.ellips {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+/*
+ * a11y
+ */
+.navbar-default .navbar-brand,
+.navbar-default .navbar-nav > li > a,
+.navbar-default .navbar-text {
+    color: #555;
+}
+
+.navbar-default .navbar-nav > li > a:focus
+.navbar-default .navbar-nav > li > a:hover {
+    color: #111;
+}
+
+.btn-primary {
+    background-color: #3c74c8;
+}

themes/default/public/css/not_stats.min.css

@@ -1 +1 @@
-@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}.uploader{border:2px dotted #a5a5c7;width:100%;color:#92aab0;text-align:center;vertical-align:middle;padding:30px 0;margin-bottom:10px;font-size:200%;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.uploader div.or{font-size:50%;font-weight:700;color:silver;padding:10px}@media (max-width:768px){.uploader div.browser label{max-width:95%}}@media (min-width:768px){.uploader div.browser label{width:300px}}.uploader div.browser label{background-color:#5a7bc2;color:#fff;padding:6px 0;font-size:40%;font-weight:700;cursor:pointer;border-radius:2px;position:relative;overflow:hidden;display:block;margin:20px auto 0;box-shadow:2px 2px 2px #888}.uploader div.browser span{cursor:pointer}.uploader div.browser input{position:absolute;top:0;right:0;margin:0;border:solid transparent;border-width:0 0 100px 200px;opacity:0;filter:alpha(opacity= 0);-o-transform:translate(250px,-50px) scale(1);-moz-transform:translate(-300px,0) scale(4);direction:ltr;cursor:pointer}.uploader div.browser label:hover{background-color:#427fed}@font-face{font-family:"markdown";src:url(../../font/markdown.eot?-6fnbp5);src:url(../../font/markdown.eot?#iefix-6fnbp5)format("embedded-opentype"),url(../../font/markdown.woff?-6fnbp5)format("woff"),url(../../font/markdown.ttf?-6fnbp5)format("truetype"),url(../../font/markdown.svg?-6fnbp5#markdown)format("svg");font-weight:400;font-style:normal}[class*=" markdown-"],[class^=markdown-]{font-family:"markdown";speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.markdown-mark:before{content:""}.markdown-mark-solid:before{content:""}
+@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}.uploader{border:2px dotted #a5a5c7;width:100%;color:#777;text-align:center;vertical-align:middle;padding:30px 0;margin-bottom:10px;font-size:200%;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.uploader div.or{font-size:50%;font-weight:700;color:#677;padding:10px}@media (max-width:768px){.uploader div.browser label{max-width:95%}}@media (min-width:768px){.uploader div.browser label{width:300px}}.uploader div.browser label{background-color:#416bc4;color:#fff;padding:6px 0;font-size:40%;font-weight:700;cursor:pointer;border-radius:2px;position:relative;overflow:hidden;display:block;margin:20px auto 0;box-shadow:2px 2px 2px #888}.uploader div.browser span{cursor:pointer}.uploader div.browser input{position:absolute;top:0;right:0;margin:0;border:solid transparent;border-width:0 0 100px 200px;opacity:0;filter:alpha(opacity= 0);-o-transform:translate(250px,-50px) scale(1);-moz-transform:translate(-300px,0) scale(4);direction:ltr;cursor:pointer}.uploader div.browser label:hover{background-color:#427fed}@font-face{font-family:"markdown";src:url(../../font/markdown.eot?-6fnbp5);src:url(../../font/markdown.eot?#iefix-6fnbp5)format("embedded-opentype"),url(../../font/markdown.woff?-6fnbp5)format("woff"),url(../../font/markdown.ttf?-6fnbp5)format("truetype"),url(../../font/markdown.svg?-6fnbp5#markdown)format("svg");font-weight:400;font-style:normal}[class*=" markdown-"],[class^=markdown-]{font-family:"markdown";speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.markdown-mark:before{content:""}.markdown-mark-solid:before{content:""}

themes/default/public/css/uploader.css

@@ -2,7 +2,7 @@
 {
 	border: 2px dotted #A5A5C7;
 	width: 100%;
-	color: #92AAB0;
+	color: #777;
 	text-align: center;
 	vertical-align: middle;
 	padding: 30px 0px;
@@ -22,7 +22,7 @@
 .uploader div.or {
 	font-size: 50%;
 	font-weight: bold;
-	color: #C0C0C0;
+	color: #677;
 	padding: 10px;
 }
 
@@ -39,7 +39,7 @@
 }
 
 .uploader div.browser label {
-	background-color: #5a7bc2;
+	background-color: #416bc4;
 	padding: 5px 15px;
 	color: white;
 	padding: 6px 0px;

themes/default/templates/layouts/default.html.ep

@@ -1,8 +1,10 @@
 % # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
 % use Mojo::Util qw(url_escape);
 % my $url    = url_for('/')->to_abs();
+% my $lang = $self->languages;
+%    $lang =~ s/-(.*)/_\U$1/;
 <!DOCTYPE html>
-<html>
+<html lang="<%= $lang %>">
     <head>
         <title>Lutim</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

themes/default/templates/partial/navbar.html.ep

@@ -39,12 +39,14 @@
             % }
         % }
                 <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
-                        <span class="icon-language"  aria-hidden="true" title="<%= l('Language') %>"></span><span class="caret"></span>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                        <i class="icon-language" aria-hidden="true" title="<%= l('Language') %>"></i>
+                        <span class="sr-only"><%= l('Language') %></span>
+                        <span class="caret"></span>
                     </a>
                     <ul class="dropdown-menu" role="menu">
                     % for my $i (@{$self->available_langs}) {
-                        <li<%== ($i eq $lang) ? ' class="active"' : '' %>>
+                        <li<%== ($i eq $lang) ? ' class="active"' : '' %> role="menuitem">
                             <a href="<%= url_for('lang', l => $i) %>" class="set-lang"><%= iso639_native_name($i) %></a>
                         </li>
                     % }