Merge pull request #2489 from patrickhlauke/phl-fixes2

webcompat site: tweak/remove aria-label in footer links, make search form in top nav only focusable when visible

Author: Mike Taylor

webcompat/static/css/src/nav.css

@@ -87,13 +87,15 @@
   top: 1px;
   transform: rotateY(-90deg);
   transition: all .2s ease 0s;
+  visibility: hidden;
   width: 100%;
   z-index: 1200;
 }
 
 .is-active #search-bar {
   transform: rotateY(0);
   transition: all .5s ease 0s;
+  visibility: visible;
 }
 
 #search-bar .text-field {

webcompat/templates/shared/footer.html

@@ -2,37 +2,37 @@
   <section class="grid-row">
       <ul class="grid-cell x2 footer-list">
         <li class="footer-item{% if request.url_rule.endpoint == 'index' %} active{% endif %}">
-          <a class="footer-item-link" aria-label="go to home" href="{{ url_for('index') }}">
+          <a class="footer-item-link" href="{{ url_for('index') }}">
             Home
           </a>
         </li>
         <li class="footer-item{% if request.url_rule.endpoint == 'show_issues' %} active{% endif %}">
-          <a class="footer-item-link" aria-label="go to list of isses" href="{{ url_for('show_issues') }}">
+          <a class="footer-item-link" href="{{ url_for('show_issues') }}">
             List of issues
           </a>
         </li>
         <li class="footer-item{% if request.url_rule.endpoint == 'about' %} active{% endif %}">
-          <a class="footer-item-link" aria-label="go to about" href="{{ url_for('about') }}">
+          <a class="footer-item-link" href="{{ url_for('about') }}">
             About
           </a>
         </li>
         <li class="footer-item{% if 'contributors' in request.url_rule.endpoint %} active{% endif %}">
-          <a class="footer-item-link" aria-label="go to contribute" href="{{ url_for('contributors') }}">
+          <a class="footer-item-link" href="{{ url_for('contributors') }}">
             Contribute
           </a>
         </li>
         <li class="footer-item{% if request.url_rule.endpoint == 'contact' %} active{% endif %}">
-          <a class="footer-item-link" aria-label="get contact information" href="/contact">
+          <a class="footer-item-link" href="/contact">
             Contact
           </a>
         </li>
         <li class="footer-item{% if request.url_rule.endpoint == 'privacy' %} active{% endif %}">
-          <a class="footer-item-link" aria-label="go to privacy policy" href="{{ url_for('privacy') }}">
+          <a class="footer-item-link" href="{{ url_for('privacy') }}">
             Privacy Policy
           </a>
         </li>
         <li class="footer-item">
-          <a class="footer-item-link" aria-label="go to code of conduct" href="https://github.com/webcompat/webcompat.com/blob/master/CODE_OF_CONDUCT.md">
+          <a class="footer-item-link" href="https://github.com/webcompat/webcompat.com/blob/master/CODE_OF_CONDUCT.md">
             Code of Conduct
           </a>
         </li>
@@ -73,14 +73,14 @@
 
       <ul class="grid-cell x1 footer-sub-icons">
         <li class="footer-icon icon-twitter">
-          <a class="footer-item-link" aria-label="open Twitter in a new tab" href="https://twitter.com/webcompat/with_replies" target="_blank">
-              <svg class="icon" role="presentation" viewBox="0 0 30 30" aria-hidden="true">
+          <a class="footer-item-link" aria-label="Twitter (opens in a new tab)" href="https://twitter.com/webcompat/with_replies" target="_blank">
+              <svg class="icon" role="presentation" viewBox="0 0 30 30 aria-hidden="true">
                   <use xlink:href="#svg-twitter" />
               </svg>
           </a>
         </li>
         <li class="footer-icon icon-twitter">
-          <a class="footer-item-link" aria-label="open Github in a new tab" href=" https://github.com/webcompat/webcompat.com/" target="_blank">
+          <a class="footer-item-link" aria-label="GitHub (opens in a new tab)" href=" https://github.com/webcompat/webcompat.com/" target="_blank">
               <svg class="icon" role="presentation" viewBox="0 0 30 30" aria-hidden="true">
                   <use xlink:href="#svg-github2" />
               </svg>