PLANET-7135: Fix country selector tab index (#2187)

* PLANET-7136: Fix country selector tab index

Ref: https://jira.greenpeace.org/browse/PLANET-7135

- Implement a new script
- Improve SEO on this element
- Fix border bottom
- Fix tabindex to country group
- Fix focus tab
- Change the order of elements programatically
- Apply transition duration dynamic variable
- Update JSDoc

---------

Co-authored-by: Dan Tovbein <dtovbein@gmail.com>

assets/src/js/app.js

@@ -11,6 +11,7 @@ import {setupQueryLoopCarousel} from './query_loop_carousel';
 import {setupClickabelActionsListCards} from './actions_list_clickable_cards';
 import {removeNoPostText} from './query-no-posts';
 import {removeRelatedPostsSection} from './remove_related_section_no_posts';
+import {setupCountrySelector} from './country_selector';
 
 function requireAll(r) {
   r.keys().forEach(r);
@@ -29,3 +30,4 @@ setupQueryLoopCarousel();
 removeNoPostText();
 removeRelatedPostsSection();
 setupClickabelActionsListCards();
+setupCountrySelector();

assets/src/js/country_selector.js

@@ -0,0 +1,62 @@
+/**
+ * The script basically add/remove the tabindex attribute within the country selector
+ * It helps to improve SEO
+ * @return {void}
+ */
+export const setupCountrySelector = () => {
+  const targetNode = document.querySelector('#country-selector');
+  const countriesList = document.querySelector('.countries-list');
+  const footerMenu = document.querySelector('.footer-menu');
+  const footerSocialMedia = document.querySelector('.footer-social-media');
+
+  if (!targetNode || !countriesList || !footerMenu || !footerSocialMedia) {
+    return;
+  }
+
+  const largeAndUpScreens = '(min-width: 992px)';
+  const countriesListTransitionDuration = (
+    parseFloat(getComputedStyle(countriesList).transitionDuration) * 1000
+  ) || 500;
+
+  /**
+   * This funtion re-order the elements from the footer
+   * @param {*} evt
+   */
+  const switchOrders = (evt = null) => {
+    const event = evt ? evt : window.matchMedia(largeAndUpScreens);
+    if (event.matches) {
+      footerMenu.parentNode.prepend(footerMenu);
+    } else {
+      footerSocialMedia.parentNode.prepend(footerSocialMedia);
+    }
+  };
+
+  // Create an observer instance linked to the callback function
+  const observer = new MutationObserver(
+    // Callback function to execute when mutations are observed
+    mutationList => {
+      // Set default visibility
+      for (const mutation of mutationList) {
+        if (mutation.attributeName === 'class') {
+          if (targetNode.classList.contains('open')) {
+            countriesList.style.visibility = 'visible';
+          } else {
+            setTimeout(() => {
+              countriesList.style.visibility = 'hidden';
+            }, countriesListTransitionDuration);
+          }
+        }
+      }
+    }
+  );
+
+  // Start observing the target node for configured mutations
+  observer.observe(targetNode, {attributes: true, childList: true, subtree: true});
+
+  window.matchMedia(largeAndUpScreens).addEventListener('change', event => {
+    switchOrders(event);
+  });
+
+  // Set default order
+  switchOrders();
+};

assets/src/scss/layout/_country-selector.scss

@@ -28,7 +28,6 @@
 
   &.open {
     .country-selector-toggle-container {
-      border-bottom: 1px solid rgba($white, 1);
       transition-delay: 0s;
     }
 
@@ -94,6 +93,8 @@
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s cubic-bezier(0, 1.04, .38, .37) 0s;
+  // Set to hidden because of focus behaviour and a18y
+  visibility: hidden;
 }
 
 .countries-list .container {

templates/footer.twig

@@ -6,7 +6,7 @@
         {% include 'footer_country_selector.twig' %}
     </div>
     {% endif %}
-    <div class="container d-flex flex-column flex-lg-row-reverse">
+    <div class="container d-flex flex-column flex-lg-row">
         {% if (social_overrides is defined and social_overrides|length) or footer_social_menu|length %}
             {% include 'footer_social_media.twig' %}
         {% endif %}

templates/footer_country_selector.twig

@@ -29,7 +29,7 @@
             <ul aria-label="{{ __('Sites starting with the letter .' ~ initial ~ '.', 'planet4-master-theme') }}" role="list">
                 {% for country in countries %}
                 {% set main_lang, lang_count = country.lang|first, country.lang|length %}
-                <li>
+                <li role="listitem">
                     <a href="{{ main_lang.url }}"
                         hreflang="{{ main_lang.locale[0] }}"
                         data-ga-category="Country Selector"
@@ -39,7 +39,7 @@
                     {% if lang_count > 1  %}
                     <ul class="lang-list" role="list">
                         {% for k, lang in country.lang %}
-                        <li>
+                        <li role="listitem">
                             <a href="{{ lang.url }}"
                                 hreflang="{{ lang.locale[0] }}"
                                 data-ga-category="Country Selector"

templates/footer_social_media.twig

@@ -3,8 +3,9 @@
   <ul class="list-unstyled">
     {% if social_overrides is defined and social_overrides|length %}
       {% for social in social_overrides %}
-        <li>
+        <li tabindex="-1">
           <a
+            tabindex="0"
             href="{{ social.url }}"
             data-ga-category="Footer Navigation"
             data-ga-action="Social Icons"
@@ -29,12 +30,14 @@
             {% set name = class_name %}
           {% endif %}
         {% endfor %}
-        <li>
+        <li tabindex="-1">
           <a
+            tabindex="0"
             href="{{ social.url }}"
             data-ga-category="Footer Navigation"
             data-ga-action="Social Icons"
             data-ga-label="{{ social.title }}"
+
             {% if ( social.target is same as '_blank' ) %}
               target="_blank"
               rel="me noopener noreferrer"