Add aria-label to aside landmarks on home page (Fixes #15000) (#15016)

* Add aria-label to aside landmarks on home page (Fixes #15000)
mozilla · Aug 29, 2024 · 6705d27 · 6705d27
1 parent 7fa85e0
commit 6705d27
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 5 deletions.
diff --git a/bedrock/base/templates/includes/banners/base.html b/bedrock/base/templates/includes/banners/base.html
@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<aside class="c-banner hide-from-legacy-ie {% block banner_class %}{% endblock %}" id="{% block banner_id %}{% endblock %}">
+<aside class="c-banner hide-from-legacy-ie {% block banner_class %}{% endblock %}" id="{% block banner_id %}{% endblock %}" aria-label="{{ ftl('ui-promo-label') }}">
   {# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
   <div class="c-banner-inner" data-nosnippet="true">
     <button type="button" class="c-banner-close"><span>{{ ftl('ui-close') }}</span></button>

diff --git a/bedrock/base/templates/includes/banners/basic.html b/bedrock/base/templates/includes/banners/basic.html
@@ -5,7 +5,7 @@
 #}
 
 {# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
-<aside class="c-banner hide-from-legacy-ie {% block banner_class %}{% endblock %}" id="{% block banner_id %}{% endblock %}" data-nosnippet="true">
+<aside class="c-banner hide-from-legacy-ie {% block banner_class %}{% endblock %}" id="{% block banner_id %}{% endblock %}" aria-label="{{ ftl('ui-promo-label') }}" data-nosnippet="true">
   <button type="button" class="c-banner-close"><span>{{ ftl('ui-close') }}</span></button>
   {% block banner_content %}{% endblock%}
 </aside>
diff --git a/bedrock/base/templates/includes/banners/mobile/firefox-app-store.html b/bedrock/base/templates/includes/banners/mobile/firefox-app-store.html
@@ -8,7 +8,7 @@
 {% set ios_url = app_store_url('firefox', 'app-store-banner') %}
 
 {% if ftl_has_messages('banner-firefox-app-store-title', 'banner-firefox-app-store-free-google-play', 'banner-firefox-app-store-free-app-store', 'ui-view') %}
-<aside class="c-banner hide-from-legacy-ie mzp-t-firefox t-native" id="firefox-app-store-banner">
+<aside class="c-banner hide-from-legacy-ie mzp-t-firefox t-native" id="firefox-app-store-banner" aria-label="{{ ftl('banner-firefox-app-store-label') }}">
   {# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
   <div class="c-banner-inner" data-nosnippet="true">
     <div class="mzp-l-content">

diff --git a/bedrock/base/templates/includes/banners/mobile/focus-app-store.html b/bedrock/base/templates/includes/banners/mobile/focus-app-store.html
@@ -8,7 +8,7 @@
 {% set ios_url = app_store_url('focus', 'app-store-banner') %}
 
 {% if ftl_has_messages('banner-firefox-focus-app-store-title', 'banner-firefox-app-store-free-google-play', 'banner-firefox-app-store-free-app-store', 'ui-view') %}
-<aside class="c-banner hide-from-legacy-ie mzp-t-firefox t-native" id="firefox-app-store-banner">
+<aside class="c-banner hide-from-legacy-ie mzp-t-firefox t-native" id="firefox-app-store-banner" aria-label="{{ ftl('banner-firefox-app-store-label') }}">
   {# Exclude banners from search result snippets using `data-nosnippet` (issue 8739) #}
   <div class="c-banner-inner" data-nosnippet="true">
     <div class="mzp-l-content">

diff --git a/bedrock/mozorg/templates/mozorg/home/home-new.html b/bedrock/mozorg/templates/mozorg/home/home-new.html
@@ -339,7 +339,7 @@ <h2>{{ ftl('home-that-one-time') }}</h2>
     </div>
   </section>
 
-  <aside class="c-newsletter">
+  <aside class="c-newsletter" aria-label="{{ ftl('newsletter-form-label') }}">
     <div class="c-newsletter-wrapper mzp-l-content mzp-t-content-lg">
       <div class="c-newsletter-info">
         <h2>{{ ftl('home-get-good-news') }}</h2>

diff --git a/l10n/en/banners/firefox-app-store.ftl b/l10n/en/banners/firefox-app-store.ftl
@@ -9,3 +9,6 @@ banner-firefox-focus-app-store-title = { -brand-name-firefox-focus }: The privac
 banner-firefox-app-store-mozilla = { -brand-name-mozilla }
 banner-firefox-app-store-free-google-play = Free – In { -brand-name-google-play }
 banner-firefox-app-store-free-app-store = Free – In the { -brand-name-app-store }
+
+# An accessible label used to describe the purpose of the page element.
+banner-firefox-app-store-label = App store download
diff --git a/l10n/en/newsletter_form.ftl b/l10n/en/newsletter_form.ftl
@@ -36,6 +36,10 @@ newsletter-form-thanks = Thanks!
 newsletter-form-leave-this-field-empty = Leave this field empty.
 newsletter-form-yes = Yes
 newsletter-form-no = No
+
+# An accessible label used to describe purpose of the form.
+newsletter-form-label = Newsletter sign up form
+
 multi-newsletter-form-checkboxes-legend = I want information about:
 multi-newsletter-form-checkboxes-label-mozilla = { -brand-name-mozilla-foundation }
 multi-newsletter-form-checkboxes-label-firefox = { -brand-name-firefox }

diff --git a/l10n/en/ui.ftl b/l10n/en/ui.ftl
@@ -20,3 +20,6 @@ ui-show-all = Show All
 ui-hide-all = Hide All
 ui-learn-more = Learn more
 ui-view = View
+
+# An accessible label used to describe the purpose of a cross-promotional page element.
+ui-promo-label = Promotion