review fixes, add caret icons

bedrock/base/templates/includes/protocol/footer/footer-refresh.html

@@ -93,7 +93,7 @@ <h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-firefox')
       <a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-type="button" data-link-text="Donate">
         <span class="mzp-c-button-icon-start">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M16.34 2.93c-1.26 0-2.34.46-3.2 1.03-.11.09-.57.43-.84.82h-.71c-.28-.4-.75-.75-.85-.81s-.02-.01-.03-.02h-.01c-.85-.56-1.92-1-3.16-1-3.09 0-5.6 2.57-5.6 5.73 0 1.6.52 3.26 1.55 4.94.79 1.28 1.87 2.57 3.22 3.85 2.27 2.14 4.51 3.49 4.61 3.55l.29.17h.66l.29-.17c.09-.06 2.34-1.41 4.61-3.55 1.35-1.28 2.44-2.57 3.22-3.85 1.03-1.68 1.55-3.34 1.55-4.94 0-3.16-2.51-5.73-5.6-5.73Zm-.8 12.74c-1.4 1.33-2.82 2.34-3.61 2.87-.78-.53-2.21-1.54-3.61-2.87-1.82-1.72-3.99-4.34-3.99-7.02 0-1.83 1.44-3.33 3.2-3.33.78 0 1.58.33 2.36.99.37.31.66.63.83.85s0 .01 0 .01v2.39h2.4V7.15c.18-.22.46-.53.83-.84.78-.66 1.58-.99 2.36-.99 1.76 0 3.2 1.49 3.2 3.33 0 2.68-2.17 5.29-3.99 7.02Z"/>
+            <path fill="currentColor" d="M16.34 2.93c-1.26 0-2.34.46-3.2 1.03-.11.09-.57.43-.84.82h-.71c-.28-.4-.75-.75-.85-.81s-.02-.01-.03-.02h-.01c-.85-.56-1.92-1-3.16-1-3.09 0-5.6 2.57-5.6 5.73 0 1.6.52 3.26 1.55 4.94.79 1.28 1.87 2.57 3.22 3.85 2.27 2.14 4.51 3.49 4.61 3.55l.29.17h.66l.29-.17c.09-.06 2.34-1.41 4.61-3.55 1.35-1.28 2.44-2.57 3.22-3.85 1.03-1.68 1.55-3.34 1.55-4.94 0-3.16-2.51-5.73-5.6-5.73Zm-.8 12.74c-1.4 1.33-2.82 2.34-3.61 2.87-.78-.53-2.21-1.54-3.61-2.87-1.82-1.72-3.99-4.34-3.99-7.02 0-1.83 1.44-3.33 3.2-3.33.78 0 1.58.33 2.36.99.37.31.66.63.83.85s0 .01 0 .01v2.39h2.4V7.15c.18-.22.46-.53.83-.84.78-.66 1.58-.99 2.36-.99 1.76 0 3.2 1.49 3.2 3.33 0 2.68-2.17 5.29-3.99 7.02Z"/>
           </svg>
         </span>
         <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-donate') }}</span>

bedrock/base/templates/includes/protocol/lang-switcher-refresh.html

@@ -8,8 +8,8 @@
 
  {% if available_languages|length > 1 %}
    <form id="lang_form" class="moz24-c-language-switcher" method="get" action="#">
+    <a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-refresh-all-languages', fallback='footer-refresh-language') }}</a>
     <label for="page-language-select">{{ ftl('footer-refresh-language') }}</label>
-    <a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-refresh-language') }}</a>
      <select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr" data-testid="footer-language-select">
        {% for code, label in available_languages|dictsort -%}
          {# Don't escape the label as it may include entity references

l10n/en/footer-refresh.ftl

@@ -39,6 +39,7 @@ footer-refresh-websites-cookies = Cookies
 footer-refresh-websites-legal = Legal
 footer-refresh-community-participation-guidelines = Community Participation Guidelines
 footer-refresh-about-this-site = About this site
+footer-refresh-all-languages = All languages
 footer-refresh-language = Language
 footer-refresh-primary-nav-aria-label = Footer primary
 footer-refresh-secondary-nav-aria-label = Footer secondary

media/css/m24/components/footer-refresh.scss

@@ -263,19 +263,20 @@ $max-footer-content-width: $content-max;
         text-decoration: none;
     }
 
+    &:active,
     &:hover,
-    &:visited:hover,
     &:focus,
-    &:focus-visible,
-    &:visited:focus-visible {
+    &:focus-visible {
+        background-color: $m24-color-alt-black;
         color: $m24-color-white;
-        background-color: $m24-color-black;
-    }
 
-    &:active,
-    &:visited:active {
-        background-color: transparent;
-        box-shadow: none;
+        .mzp-c-button-icon-start path {
+            fill: $m24-color-white;
+        }
+
+        .mzp-c-button-icon-text {
+            color: $m24-color-white;
+        }
     }
 
     @media(min-width: $screen-md) {
@@ -327,7 +328,8 @@ $max-footer-content-width: $content-max;
     }
 
     .mzp-js-language-switcher-select {
-        background: $m24-color-alt-white url('/media/img/logos/mozilla/footer-refresh/icon-arrow-down.svg') 95px 9px no-repeat;
+        background: $m24-color-alt-white url('/media/img/icons/m24-small/down-caret-white.svg') 95px 0.75em no-repeat;
+        background-size: 16px 16px;
         border-radius: 0;
         border: $border-width solid transparent;
         color: $m24-color-black;
@@ -336,7 +338,6 @@ $max-footer-content-width: $content-max;
         min-width: unset;
         padding-left: 36px;
         width: 136px;
-        margin-top: 16px;
 
         &:hover,
         &:focus,