Issue 5406 - Create Site Footer Component for Help Center

includes/layout/footer.tmpl

 <footer id="site-footer" class="navbar">

[juliandoucette, 2017/09/06 17:48:20]

Note: (Added after the comments below) It looks like we should considering using
a menubar / menu / menu button pattern as described here
https://www.w3.org/TR/wai-aria-practices/#menu,
https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1....

[ire, 2017/09/08 09:53:33]

Good idea! Done.

There are improvements I can make to this component to satisfy the keyboard
support for a menu. I would like to make these changes in a separate issue
though.

[juliandoucette, 2017/09/08 17:02:52]

Acknowledged.

   <div class="navbar-wrapper row">
-    <div class="column one-fourth">
+    <div id="site-footer-locales" class="column one-fourth">
       <div class="custom-select">
-        <button class="custom-select-selected" aria-expanded="false" aria-controls="language-options">

[juliandoucette, 2017/09/06 17:48:21]

Is there a reason that you didn't add aria-haspopup and/or aria-expanded?

[ire, 2017/09/08 09:53:34]

See comment above.

-          {{config.get("langnames", locale)}}
+        <button class="custom-select-selected" aria-expanded="false" aria-haspopup="true">
+          {{ config.get("langnames", locale) }}
         </button>
-        <ul id="language-options" class="custom-select-options">

[juliandoucette, 2017/09/06 17:48:21]

Is there a reason that you didn't add aria-labelledby?

[ire, 2017/09/08 09:53:34]

See comment above.

-          {% for lang in available_locales %}

[juliandoucette, 2017/09/06 17:48:20]

NIT: These are locale codes not languages or language codes? ( <- that might be
a stretch )

[ire, 2017/09/08 09:53:34]

Not sure what you mean. Am I using the wrong variable here?

[juliandoucette, 2017/09/08 17:02:52]

I was suggesting that you use a variable like "available_locale" instead of
"lang" because "locale" is more accurate than "language" in this case. (I was
being too picky.)

[ire, 2017/09/12 08:57:53]

Ah I see. "available_locale" makes more sense, not too picky :) 

Done.

-          <li>
-            {{page|linkify(lang)}}
-              {{config.get("langnames", lang)}}

[juliandoucette, 2017/09/06 17:48:21]

NIT: You are spacing {{ }} inconsistently in this file. I suggest always adding
one space after opening and before closing.

[ire, 2017/09/08 09:53:34]

Done.

-            </a>
+        <ul class="custom-select-options" aria-label="{{ "Select Language" | translate("language-options-label", "Label") }}" role="menu" tabindex="-1">
+          {% for available_locale in available_locales %}
+          <li role="none">
+            {{ page | linkify(available_locale) }}{{ config.get("langnames", available_locale) }}</a>
           </li>
           {% endfor %}
         </ul>
       </div>
     </div>
-    <div class="column three-fourths">
-      <nav id="site-footer-nav">
-        <ul>
+    <div id="site-footer-nav" class="column three-fourths">
+      <nav>
+        <ul class="horizontal-list">
           <li><a href="">{{ "Legal" | translate("footer-nav-link-1", "Navigation link") }}</a></li>
           <li><a href="https://adblockplus.org/privacy">{{ "Privacy Policy" | translate("footer-nav-link-2", "Navigation link") }}</a></li>
         </ul>
       </nav>
       <small class="muted">
         {{ "<a href=\"https://adblockplus.org\">Adblock Plus</a> is a registered trademark of <a href=\"https://eyeo.com\">eyeo GmbH</a>" | translate("footer-trademark-notice", "Paragraph") }}
       </small>
     </div>
   </div>
 </footer>