From a19782f888086f20b5df45429134c40a37eb61cd Mon Sep 17 00:00:00 2001
From: Lucas Cimon <lucas.cimon@gmail.com>
Date: Thu, 17 Aug 2017 18:25:45 +0200
Subject: [PATCH] Improved accessibility using HTML_CodeSniffer

---
 static/css/main.css      | 35 ++++++++++++++++++++++++++++-------
 static/js/tipuesearch.js |  4 ++--
 templates/base.html      | 10 ++++++----
 templates/index.html     | 14 ++++++++++----
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index eeeb0b3..0fd9d8c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -19,13 +19,15 @@ html {
   line-height: 20px; }
 
 a {
-  color: #33b5e5; }
+  color: #007fae; }
   a:hover {
-    color: #0099cc; }
+    color: #33b5e5; }
 
 .uk-navbar-brand {
   text-transform: uppercase; }
 
+.uk-article-meta {
+  color: #767676;  /* required to get an accessible contrast */ }
 .uk-article-meta > a {
   color: #444; }
   .uk-article-meta > a:hover {
@@ -87,7 +89,7 @@ a {
 
 
 .mg-header {
-  background-color: #39B39D; }
+  background-color: #0c8670; }
 
 .mg-header-content {
   display: flex;
@@ -117,11 +119,16 @@ a {
   flex: 1;
   display: flex;
   justify-content: flex-end; }
+
+.mg-tag-filters {
+  list-style-type: none;
+  display: flex;
+  align-items: center; }
 .mg-tag-filter {
   background-color: transparent;
   border: 1px solid white;
   overflow: visible;
-  color: inherit;
+  color: black;
   font: inherit;
   padding: .5rem 1.5rem;
   margin: .5rem 1rem;
@@ -147,6 +154,10 @@ a {
   margin-bottom: 3em;
   min-height: 100%; }
 
+
+.mg-articles {
+  list-style-type: none; }
+
 .mg-article-short {
   display: flex;
   align-items: center;
@@ -168,7 +179,7 @@ a {
   flex: 3 1 35rem; }
 
 .mg-feed {
-  color: #FF6600; }
+  color: #bf4d00; }
   .mg-feed:hover {
     text-decoration: none;
     color: #FF6600; }
@@ -178,9 +189,8 @@ a {
   text-align: right; }
 .mg-tag {
   margin: 0 .5rem;
-  color: #FF6600; }
+  color: #c95000; }
   .mg-tag:hover {
-    text-decoration: none;
     color: #FF6600; }
   .mg-tag > .uk-icon-tag {
     display: inline; /* so that the icon stick with the tag label */
@@ -251,6 +261,17 @@ a {
   padding: 0.2em 0; }
 
 
+.mg-search {
+  display: flex; }
+.mg-search-button {
+  font-family: FontAwesome;
+  background-color: transparent;
+  border: none;
+  cursor: pointer; }
+.mg-search-query {
+  padding: 0; } /* override uk-search-field */
+
+
 .mg-tagcloud {
   list-style: none;
   padding: 0;
diff --git a/static/js/tipuesearch.js b/static/js/tipuesearch.js
index 10ef6ca..e45d811 100644
--- a/static/js/tipuesearch.js
+++ b/static/js/tipuesearch.js
@@ -95,9 +95,9 @@ http://www.tipue.com/search
                {
                     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20')) || null;
                }
-               if (getURLP('q'))
+               if (getURLP('content'))
                {
-                    $('main .tipue_search').val(getURLP('q'));
+                    $('main .tipue_search').val(getURLP('content'));
                     getTipueSearch(0, true);
                }
 
diff --git a/templates/base.html b/templates/base.html
index df59c3e..955e482 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -136,8 +136,9 @@
 
             {% if not DISABLE_SEARCH %}
             <div class="uk-panel uk-panel-box">
-                <form class="uk-search" action="{{ SITEURL }}/search.html" data-uk-search>
-                    <input class="uk-search-field tipue_search" type="search" name="q" autocomplete="off" placeholder="Search...">
+                <form class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
+                    <input type="submit" class="mg-search-button" value="&#xf002;">
+                    <input class="mg-search-query uk-search-field tipue_search" type="search" name="content" autocomplete="off" placeholder="Search...">
                 </form>
             </div>
             {% endif %}
@@ -202,8 +203,9 @@
     <div class="uk-offcanvas-bar">
 
         {% if not DISABLE_SEARCH %}
-        <form class="uk-search" action="{{ SITEURL }}/search.html" data-uk-search>
-            <input class="uk-search-field tipue_search" type="search" name="q" autocomplete="off" placeholder="Search...">
+        <form class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
+            <input type="submit" class="mg-search-button" value="&#xf002;">
+            <input class="uk-search-field tipue_search" type="search" name="content" autocomplete="off" placeholder="Search...">
         </form>
         {% endif %}
 
diff --git a/templates/index.html b/templates/index.html
index 3901d50..7440c56 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,13 +3,17 @@
 {% block content_title %}{% endblock %}
 
 {% block header_extra %}
+{% if MG_LANG_FILTER_TAGS or MG_FILTER_TAGS %}
+<ul class="mg-tag-filters">
 {% if MG_LANG_FILTER_TAGS %}
-<button class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)({{ MG_LANG_FILTER_TAGS|tojson }})'>lang</button>
+<li><button class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)({{ MG_LANG_FILTER_TAGS|tojson }})'>lang</button></li>
 {% endif %}
 {% if MG_FILTER_TAGS %}
 {% for filter_tag in MG_FILTER_TAGS %}
-<button class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')">{{ filter_tag.replace('lang:', '') }}</button>
+<li><button class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')">{{ filter_tag.replace('lang:', '') }}</button></li>
 {% endfor %}
+</ul>
+{% endif %}
 {% endif %}
 {% endblock %}
 
@@ -17,15 +21,17 @@
 <div class="uk-width-medium-4-5">
 
 {% if articles %}
+<ul class="mg-articles">
 {% for article in (articles_page.object_list if articles_page else articles) %}
-
+    <li>
     {% if not MG_NO_EXCERPT and loop.index == 1 %}
         {% include "partials/article-excerpt.html" %}
     {% else %}
         {% include "partials/article-short.html" %}
     {% endif %}
-
+    </li>
 {% endfor %}
+</ul>
 {% if DEFAULT_PAGINATION  and articles_paginator.num_pages > 1 %}
     <ul class="uk-pagination">
         {% if articles_previous_page %}<li><a href="{{ SITEURL }}/{{ articles_previous_page.url }}"><i class="uk-icon-angle-double-left"></i></a></li>{% endif %}