From 16a6e753e446aa42d9c30fc3c92d19fe6318325e Mon Sep 17 00:00:00 2001
From: Morgan Aubert <morgan.aubert@savoirfairelinux.com>
Date: Fri, 19 Aug 2016 16:32:22 -0400
Subject: [PATCH] Improve accessibility in the home page

---
 eruditorg/static/sass/layout/_nav-public.scss | 91 -------------------
 eruditorg/templates/public/base.html          | 31 ++++---
 eruditorg/templates/public/home.html          | 19 ++--
 3 files changed, 25 insertions(+), 116 deletions(-)

diff --git a/eruditorg/static/sass/layout/_nav-public.scss b/eruditorg/static/sass/layout/_nav-public.scss
index f8f44c9c3..3f85c8a85 100644
--- a/eruditorg/static/sass/layout/_nav-public.scss
+++ b/eruditorg/static/sass/layout/_nav-public.scss
@@ -180,97 +180,6 @@
     }
 
   }
-
-/*
-  // overrides for mobile nav
-  &.collapse.in, &.collapsing {
-
-    > .navbar-nav {
-      position: static;
-      top: auto;
-      transform: none;
-
-      .main-section {
-        border-top: 1px solid $dark-grey;
-        font-size: 18px;
-        margin-top: 5px;
-      }
-
-      li {
-        display: block;
-        margin-left: 0;
-        padding: 5px 0;
-        font-size: 16px;
-      }
-
-    }
-
-    .search {
-      display: none;
-    }
-
-    .search-form {
-      opacity: 1;
-      pointer-events: all;
-      position: static;
-      background: none;
-      top: 0;
-
-      form {
-        padding-top: 20px;
-      }
-
-      input {
-        border-color: #000;
-        color: #000;
-      }
-
-      .input-group-btn {
-        text-align: left;
-      }
-
-      .btn {
-        background: #000;
-        border-color: #000;
-        color: #FFF;
-      }
-
-    }
-
-    .dropdown {
-
-      .caret {
-        display: none;
-      }
-
-      > ul {
-        display: block;
-        position: static;
-        border: none;
-        background: none;
-
-        li {
-          border: none;
-        }
-
-        a {
-          padding: 10px 0;
-          display: inline;
-
-          &:hover, &:active, &:focus {
-            background: none;
-            color: #000;
-            text-indent: 0;
-          }
-
-        }
-
-      }
-
-    }
-
-  }
-*/
 }
 
 // hamburger menu
diff --git a/eruditorg/templates/public/base.html b/eruditorg/templates/public/base.html
index e216d5a1c..345fb23e5 100644
--- a/eruditorg/templates/public/base.html
+++ b/eruditorg/templates/public/base.html
@@ -121,17 +121,18 @@ <h2 class="hidden">{% trans "Menu principal" %}</h2>
           </li>
           <li>
             <a href="#" data-trigger-search-bar class="search"><span class="ion-ios-search-strong"></span></a>
-          </li>
-          <li class="search-form">
-            <form action="{% url 'public:search:results' %}" class="search-bar" method="get">
-              <div class="form-group">
-                <div class="input-group-btn">
-                  <input name="basic_search_term" type="search" class="search-terms form-control" placeholder="{% trans 'Par auteur, titre, mots-clés...' %}">
-                  <button type="submit" class="btn btn-primary-outlined">{% trans 'Rechercher' %}</button>
-                  <a data-trigger-search-bar class="close"><span class="ion-android-close"></span></a>
+            <div class="search-form">
+              <form action="{% url 'public:search:results' %}" class="search-bar" method="get">
+                <div class="form-group">
+                  <div class="input-group-btn">
+                    <label for="basic_search_term" class="hidden">{% trans "Mots-clés" %}</label>
+                    <input name="basic_search_term" type="search" class="search-terms form-control" placeholder="{% trans 'Par auteur, titre, mots-clés...' %}">
+                    <button type="submit" class="btn btn-primary-outlined">{% trans 'Rechercher' %}</button>
+                    <a data-trigger-search-bar class="close"><span class="ion-android-close"></span></a>
+                  </div>
                 </div>
-              </div>
-            </form>
+              </form>
+            </div>
           </li>
           {% endblock %}
         </ul>
@@ -265,27 +266,27 @@ <h2 class="hidden">{% trans "Fil d'Ariane" %}</h2>
             <p>{% trans "Suivez-nous&nbsp;:" %}</p>
             <ul class="social-icons inline">
               <li>
-                <a href="https://www.facebook.com/%C3%89rudit-141469165320/">
+                <a href="https://www.facebook.com/%C3%89rudit-141469165320/" title="Facebook">
                   <span class="ion-social-facebook"></span>
                 </a>
               </li>
               <li>
-                <a href="https://twitter.com/eruditorg">
+                <a href="https://twitter.com/eruditorg" title="Twitter">
                   <span class="ion-social-twitter"></span>
                 </a>
               </li>
               <li>
-                <a href="https://github.com/erudit/">
+                <a href="https://github.com/erudit/" title="Github">
                   <span class="ion-social-github"></span>
                 </a>
               </li>
               <li>
-                <a href="https://www.linkedin.com/company/3628951">
+                <a href="https://www.linkedin.com/company/3628951" title="LinkedIn">
                   <span class="ion-social-linkedin"></span>
                 </a>
               </li>
               <li>
-                <a href="rss.xml">
+                <a href="rss.xml" title="RSS">
                   <span class="ion-social-rss"></span>
                 </a>
               </li>
diff --git a/eruditorg/templates/public/home.html b/eruditorg/templates/public/home.html
index 31113681f..da6c3fc10 100644
--- a/eruditorg/templates/public/home.html
+++ b/eruditorg/templates/public/home.html
@@ -63,9 +63,10 @@ <h2 class="glory--header--title">{% trans "Explorez plus de 200&nbsp;000 publica
             <div class="form-group">
               <label for="basic-search" class="h3">Recherche</label>
               <div class="input-group">
-                <input name="basic_search_term" id="basic-search" type="search" class="form-control" placeholder="{% trans "Par auteur, titre, mots-clés&hellip;" %}">
+                <input name="basic_search_term" id="basic-search" type="search" class="form-control" placeholder="{% trans "Par auteur, titre, mots-clés&hellip;" %}" autofocus>
                 <div class="input-group-addon">
                   <button type="submit" class="btn">
+                    <span class="hidden">{% trans "Rechercher" %}</span>
                     <span class="ion ion-ios-search-strong"></span>
                   </button>
                 </div>
@@ -94,8 +95,7 @@ <h3><a href="#">{% trans "Littérature grise" %}</a></h3>
         <!-- DISCIPLINES -->
         <div class="col-xs-12 col-sm-4 glory--disciplines">
           <h3>{{ disciplines|length }} {% trans "disciplines" %}</h3>
-          <p>{{ disciplines|slice:":10"|join:", "|lower }}&hellip;</p>
-          <a href="{% url 'public:journal:journal_list' %}?sorting=disciplines">{% trans "Voir toutes les disciplines" %}</a>
+          <p>{{ disciplines|slice:":10"|join:", "|lower }}&hellip;<br /><a href="{% url 'public:journal:journal_list' %}?sorting=disciplines">{% trans "Voir toutes les disciplines" %}</a></p>
         </div>
       </div>
     </div>
@@ -121,19 +121,19 @@ <h2>{% trans "Derniers numéros" %}</h2>
             <div class="col-xs-3 col-sm-12">
               <p class="category-tag">{{ issue.journal.disciplines.all|join:", " }}</p>
               <h3 class="latest-issues--article--journal-title">
-                <a href="{% url 'public:journal:issue_detail' issue.journal.code issue.volume_slug issue.localidentifier %}">
+                <a href="{% url 'public:journal:issue_detail' issue.journal.code issue.volume_slug issue.localidentifier %}" title="{{ issue.journal.name }} - {% if issue.title %}{{ issue.title }}, {% endif %}{{ issue.volume_title }}">
                   {{ issue.journal.name }}
                 </a>
               </h3>
             </div>
             <div class="col-xs-9 col-sm-12">
               {% if issue.has_coverpage %}
-              <a href="{% url 'public:journal:issue_detail' issue.journal.code issue.volume_slug issue.localidentifier %}">
-                <img src="{% url 'public:journal:issue_coverpage' issue.journal.code issue.volume_slug issue.localidentifier %}" alt="{{ issue.title }} - {{ issue.journal.name }}" class="img-responsive latest-issues--article--cover">
+              <a href="{% url 'public:journal:issue_detail' issue.journal.code issue.volume_slug issue.localidentifier %}" title="{{ issue.journal.name }} - {% if issue.title %}{{ issue.title }}, {% endif %}{{ issue.volume_title }}">
+                <img src="{% url 'public:journal:issue_coverpage' issue.journal.code issue.volume_slug issue.localidentifier %}" alt="{% blocktrans with journal_name=issue.journal.name issue_title=issue.title|default:issue.volume_title %}Couverture du numéro '{{ issue_title }}' de la revue '{{ journal_name }}'{% endblocktrans %}" class="img-responsive latest-issues--article--cover">
               </a>
               {% endif %}
               <h4>
-                <a href="{% url 'public:journal:issue_detail' issue.journal.code issue.volume_slug issue.localidentifier %}">
+                <a href="{% url 'public:journal:issue_detail' issue.journal.code issue.volume_slug issue.localidentifier %}" title="{{ issue.journal.name }} - {% if issue.title %}{{ issue.title }}, {% endif %}{{ issue.volume_title }}">
                   {% if issue.title %}<span class="latest-issues--article--theme">{{ issue.title }}</span>{% endif %}
                   {% if issue.volume_title %}<span class="latest-issues--article--volume">{{ issue.volume_title }}</span>{% endif %}
                 </a>
@@ -164,7 +164,7 @@ <h2>{% trans "Nouvelles" %}</h2>
       <li class="col-md-4 col-sm-6 news--article">
         <p class="category-tag">{{ entry.category }}</p>
         <h3 class="news--article--title"><a href="{{ entry.link }}" target="_blank">{{ entry.title }}</a></h3>
-        <p class="summary">{{ entry.summary|safe|truncatewords_html:20 }}</p>
+        <p class="summary">{{ entry.summary|safe|truncatewords_html:20 }}&nbsp;<a href="{{ entry.link }}" target="_blank">{% trans "Lire la suite" %}</a></p>
         <time class="news--article--date text-muted" datetime="2001-05-15">{{ entry.dt_published|date:"DATE_FORMAT" }}</time>
       </li>
       {% endfor %}
@@ -187,8 +187,7 @@ <h3 class="news--article--title"><a href="{{ entry.link }}" target="_blank">{{ e
         <div class="row">
           <div class="col-sm-4 col-md-3"><h2 class="about-erudit--title">erudit.<br>org</h2></div>
           <div class="col-sm-4 col-md-3">
-            <p class="about-erudit--description">{% trans "Érudit offre l'accès à de nombreuses collections de documents en sciences humaines et sociales&nbsp;: revues, livres et actes, thèses, littérature grise." %}</p>
-            <p><a href="http://apropos.erudit.org" target="_blank" class="text-muted">{% trans "En savoir plus" %}</a></p>
+            <p class="about-erudit--description">{% trans "Érudit offre l'accès à de nombreuses collections de documents en sciences humaines et sociales&nbsp;: revues, livres et actes, thèses, littérature grise." %}<br /><br /><a href="http://apropos.erudit.org" target="_blank" class="text-muted">{% trans "En savoir plus" %}</a></p>
           </div>
           <div class="col-sm-4 col-md-6">
             <div class="about-erudit--video-container">