Skip to content

E
edx-platform
Commit 2fd68dc9 by Will Daly
Options

ECOM-1724 a11y footer updates 

* Add action text to social media links.
* Make the alt text for mobile links more descriptive.
parent f73b68d6
Showing with 35 additions and 15 deletions
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
......@@ -1911,25 +1911,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
......@@ -1947,7 +1951,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
......@@ -1965,7 +1970,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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment