Merge pull request #8502 from edx/alasdair/ECOM-1724-footer-a11y-update

ECOM-1724 a11y footer updates

lms/djangoapps/branding/api.py

@@ -55,7 +55,8 @@ def get_footer(is_secure=True):
                 "name": "facebook",
                 "title": "Facebook",
                 "url": "http://www.facebook.com/example",
-                "icon-class": "fa-facebook-square"
+                "icon-class": "fa-facebook-square",
+                "action": "Sign up on Facebook!"
             },
             ...
         ],
@@ -71,7 +72,7 @@ def get_footer(is_secure=True):
             {
                 "name": "apple",
                 "title": "Apple",
-                "url": "http://store.apple.com/example_app"
+                "url": "http://store.apple.com/example_app",
                 "image": "http://example.com/static/apple_logo.png"
             },
             ...
@@ -148,14 +149,18 @@ def _footer_social_links():
     Returns: list
 
     """
+    platform_name = microsite.get_value('platform_name', settings.PLATFORM_NAME)
     links = []
+
     for social_name in settings.SOCIAL_MEDIA_FOOTER_NAMES:
+        display = settings.SOCIAL_MEDIA_FOOTER_DISPLAY.get(social_name, {})
         links.append(
             {
                 "name": social_name,
-                "title": unicode(settings.SOCIAL_MEDIA_FOOTER_DISPLAY.get(social_name, {}).get("title", "")),
+                "title": unicode(display.get("title", "")),
                 "url": settings.SOCIAL_MEDIA_FOOTER_URLS.get(social_name, "#"),
-                "icon-class": settings.SOCIAL_MEDIA_FOOTER_DISPLAY.get(social_name, {}).get("icon", ""),
+                "icon-class": display.get("icon", ""),
+                "action": unicode(display.get("action", "")).format(platform_name=platform_name),
             }
         )
     return links
@@ -221,20 +226,26 @@ def _footer_mobile_links(is_secure):
     Returns: list
 
     """
+    platform_name = microsite.get_value('platform_name', settings.PLATFORM_NAME)
+
     mobile_links = []
     if settings.FEATURES.get('ENABLE_FOOTER_MOBILE_APP_LINKS'):
         mobile_links = [
             {
                 "name": "apple",
-                "title": "Apple",
+                "title": _(
+                    "Download the {platform_name} mobile app from the Apple App Store"
+                ).format(platform_name=platform_name),
                 "url": settings.MOBILE_STORE_URLS.get('apple', '#'),
-                "image": _absolute_url_staticfile(is_secure, 'images/app/app_store_badge_135x40.svg')
+                "image": _absolute_url_staticfile(is_secure, 'images/app/app_store_badge_135x40.svg'),
             },
             {
                 "name": "google",
-                "title": "Google",
+                "title": _(
+                    "Download the {platform_name} mobile app from Google Play"
+                ).format(platform_name=platform_name),
                 "url": settings.MOBILE_STORE_URLS.get('google', '#'),
-                "image": _absolute_url_staticfile(is_secure, 'images/app/google_play_badge_45.png')
+                "image": _absolute_url_staticfile(is_secure, 'images/app/google_play_badge_45.png'),
             }
         ]
     return mobile_links

lms/djangoapps/branding/tests/test_views.py

@@ -77,6 +77,7 @@ class TestFooter(TestCase):
             self.assertIn("title", link)
             self.assertIn("url", link)
             self.assertIn("icon-class", link)
+            self.assertIn("action", link)
 
         # Mobile links
         self.assertIn("mobile_links", json_data)

lms/djangoapps/branding/views.py

@@ -206,7 +206,8 @@ def footer(request):
                     "url": "http://example.com/social",
                     "name": "facebook",
                     "icon-class": "fa-facebook-square",
-                    "title": "Facebook"
+                    "title": "Facebook",
+                    "action": "Sign up on Facebook!"
                 },
                 # ...
             ],

lms/envs/common.py

@@ -1914,25 +1914,29 @@ SOCIAL_MEDIA_FOOTER_DISPLAY = {
         # Translators: This is the website name of www.facebook.com.  Please
         # translate this the way that Facebook advertises in your language.
         "title": _("Facebook"),
-        "icon": "fa-facebook-square"
+        "icon": "fa-facebook-square",
+        "action": _("Like {platform_name} on Facebook")
     },
     "twitter": {
         # Translators: This is the website name of www.twitter.com.  Please
         # translate this the way that Twitter advertises in your language.
         "title": _("Twitter"),
-        "icon": "fa-twitter"
+        "icon": "fa-twitter",
+        "action": _("Follow {platform_name} on Twitter")
     },
     "linkedin": {
         # Translators: This is the website name of www.linkedin.com.  Please
         # translate this the way that LinkedIn advertises in your language.
         "title": _("LinkedIn"),
-        "icon": "fa-linkedin-square"
+        "icon": "fa-linkedin-square",
+        "action": _("Follow {platform_name} on LinkedIn")
     },
     "google_plus": {
         # Translators: This is the website name of plus.google.com.  Please
         # translate this the way that Google+ advertises in your language.
         "title": _("Google+"),
-        "icon": "fa-google-plus-square"
+        "icon": "fa-google-plus-square",
+        "action": _("Follow {platform_name} on Google+")
     },
     "tumblr": {
         # Translators: This is the website name of www.tumblr.com.  Please
@@ -1950,7 +1954,8 @@ SOCIAL_MEDIA_FOOTER_DISPLAY = {
         # Translators: This is the website name of www.reddit.com.  Please
         # translate this the way that Reddit advertises in your language.
         "title": _("Reddit"),
-        "icon": "fa-reddit"
+        "icon": "fa-reddit",
+        "action": _("Subscribe to the {platform_name} subreddit"),
     },
     "vk": {
         # Translators: This is the website name of https://vk.com.  Please
@@ -1968,7 +1973,8 @@ SOCIAL_MEDIA_FOOTER_DISPLAY = {
         # Translators: This is the website name of www.youtube.com.  Please
         # translate this the way that YouTube advertises in your language.
         "title": _("Youtube"),
-        "icon": "fa-youtube"
+        "icon": "fa-youtube",
+        "action": _("Subscribe to the {platform_name} YouTube channel")
     }
 }
 

lms/templates/footer-edx-v3.html

@@ -51,6 +51,7 @@
           % for link in footer['social_links']:
           <a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer">
             <span class="icon fa ${link['icon-class']}" aria-hidden="true"></span>
+            <span class="sr">${link['action']}</span>
           </a>
           % endfor
         </div>