Issue 5406 - Create Site Footer Component for Help Center

includes/layout/footer.tmpl

Index: includes/layout/footer.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/layout/footer.tmpl
@@ -0,0 +1,31 @@
+<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 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>
+        <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>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+    <div class="column three-fourths">
+      <nav id="site-footer-nav">
+        <ul>
+          <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>