WT874,875 - fix a11y violations (fix #1330) (#1338)

* WT874,875 - fix a11y violations (fix #1330)

* address review feedback

* remove duplicate id

* remove duplicate classes

* move fl-main class away from main

* fix failing python test

---------

Co-authored-by: Kasey Kelly <kasey@servee.com>

Author: wen-2018

media/css/cms/components/flare26-navigation.css

@@ -162,7 +162,12 @@
 }
 
 .fl-menu-title,
-.fl-menu-title h2,
+.fl-menu-title .fl-menu-heading {
+    line-height: unset;
+}
+
+.fl-menu-title,
+.fl-menu-title .fl-menu-heading,
 .fl-menu-subtitle {
     color: var(--fl-theme-color-text);
     font-family: var(--fl-theme-font-family-body);
@@ -436,7 +441,7 @@
     }
 
     .fl-menu-title,
-    .fl-menu-title h2,
+    .fl-menu-title .fl-menu-heading,
     .fl-menu-subtitle {
         font-size: var(--fl-theme-font-size-body-sm);
     }
@@ -470,15 +475,15 @@
         pointer-events: auto;
     }
 
-    .fl-menu-category h2::after {
+    .fl-menu-category .fl-menu-heading::after {
         display: inline-block;
     }
 
     .fl-menu-title {
         color: var(--fl-menu-title-color);
     }
 
-    .fl-menu-title h2 {
+    .fl-menu-title .fl-menu-heading {
         font-weight: var(--token-font-weight-regular);
         margin: 0;
         padding: 0 var(--token-spacing-sm);

springfield/cms/templates/cms/article_detail_page.html

@@ -9,9 +9,11 @@
 
 {% block body_class %}fl-article-body {% if not switch("flare26_enabled") %}disable-dark-mode{% endif %}{% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page fl-article-page">
-  <main class="fl-main">
+  <div class="fl-main">
     <div class="fl-article-main">
       <header class="fl-article-header">
         <include:heading
@@ -79,7 +81,7 @@
         {% include_block block %}
       {% endfor %}
     {% endif %}
-  </main>
+  </div>
   {% if not switch("flare26_enabled") %}
     {% set value = get_download_firefox_cta_snippet() %}
     {% if value %}

springfield/cms/templates/cms/article_index_page.html

@@ -11,9 +11,11 @@
   <include:flare26-header theme="dark"/>
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page">
-  <main class="fl-main has-gradient-bottom">
+  <div class="fl-main has-gradient-bottom">
     <div class="fl-split-page-upper has-gradient-bottom">
 
       <section class="fl-section">
@@ -354,7 +356,7 @@ <h3 class="fl-heading fl-heading-size-3">
         </div>
       </section>
     </div>
-  </main>
+  </div>
 </div>
 {% endblock %}
 

springfield/cms/templates/cms/article_theme_page.html

@@ -13,10 +13,12 @@
   <include:flare26-header theme="{{ header_theme }}" />
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page fl-features-theme-page">
   {% if page.upper_content|length %}
-    <main class="fl-main">
+    <div class="fl-main">
       {% set ns = namespace(headings=0) %}
       {% set block_level = 1 %}
 
@@ -50,9 +52,9 @@
           {% include_block block %}
         {% endfor %}
       </div>
-    </main>
+    </div>
   {% else %}
-    <main class="fl-main has-gradient-bottom">
+    <div class="fl-main has-gradient-bottom">
       {% set ns = namespace(headings=0) %}
       {% for block in page.content %}
         {% set block_index = loop.index %}
@@ -66,7 +68,7 @@
 
         {% include_block block %}
       {% endfor %}
-    </main>
+    </div>
   {% endif %}
 </div>
 {% endblock %}

springfield/cms/templates/cms/base-flare26.html

@@ -109,12 +109,11 @@
     {% block sub_navigation %}
     {% endblock %}
 
+    <main class="{% block main_class %}fl26-content{% endblock %}"{% block main_attrs %}{% endblock %}>
     {% block content %}
-    <main class="fl26-content">
       <div class="fl26-content-inner">
         <h1>{{ page.title if page is defined and page.title is defined else 'Firefox' }}</h1>
       </div>
-    </main>
     {% endblock %}
 
     {% block pre_footer %}
@@ -152,6 +151,7 @@ <h1>{{ page.title if page is defined and page.title is defined else 'Firefox' }}
       {% endif %}
 
     {% endblock pre_footer %}
+    </main>
 
     {% block flare_footer %}
       <include:flare26-footer />

springfield/cms/templates/cms/base-pattern.html

@@ -22,4 +22,6 @@
   </div>
 {% endblock %}
 
+{% block pre_footer %}{% endblock %}
+
 {% block flare_footer %}{% endblock %}

springfield/cms/templates/cms/blocks/download-support.html

@@ -17,7 +17,7 @@
       {% if ftl_has_messages('firefox-desktop-download-if-you-see-a-prompt', 'firefox-desktop-download-visit-support-for-more') %}
         <include:conditional-display platform_conditions="{{ ['windows-10-plus'] }}">
           <div class="fl-notification-wrapper">
-            <aside class="fl-notification fl-notification-stacked">
+            <div class="fl-notification fl-notification-stacked">
               <div class="fl-notification-icon-section">
 
                 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="35" class="fl-windows-disclaimer-logo">
@@ -33,7 +33,7 @@
                 <p>{{ ftl('firefox-desktop-download-if-you-see-a-prompt', attrs='href="https://support.mozilla.org/kb/windows-10-warns-me-use-microsoft-verified-app%s" rel="external noopener" data-cta-text="Get help with your installation"'|safe|format(params)) }}</p>
                 <p><a href="https://support.mozilla.org/kb/windows-10-warns-me-use-microsoft-verified-app{{ params }}" rel="external noopener" data-cta-text="Visit Support for More Details">{{ ftl('firefox-desktop-download-visit-support-for-more') }}</a></p>
               </div>
-            </aside>
+            </div>
           </div>
         </include:conditional-display>
       {% endif %}

springfield/cms/templates/cms/download_page.html

@@ -16,9 +16,11 @@
   <include:flare26-header theme="dark" />
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page">
-  <main class="fl-main">
+  <div class="fl-main">
     <section class="fl-split-page-upper has-gradient-bottom fl-download-intro">
       <h1 class="fl-heading fl-heading-size-1">
         {% if LANG.startswith('en-') %}
@@ -144,7 +146,7 @@ <h1 class="fl-heading fl-heading-size-1">
         {% include_block block %}
       {% endfor %}
     </section>
-  </main>
+  </div>
 </div>
 {% endblock %}
 

springfield/cms/templates/cms/free_form_page2026.html

@@ -14,10 +14,12 @@
   <include:flare26-header theme="{{ theme }}" hide_nav_cta="{{ hide_nav_cta }}" no_menu="{{ no_menu }}" />
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page fl-freeform-2026-page">
   {% if page.upper_content %}
-    <main class="fl-main has-gradient-bottom">
+    <div class="fl-main has-gradient-bottom">
       {% set ns = namespace(headings=0) %}
       {% set block_level = 1 %}
 
@@ -52,9 +54,9 @@
           {% endfor %}
         </div>
       {% endif %}
-    </main>
+      </div>
   {% else %}
-    <main class="fl-main has-gradient-bottom">
+    <div class="fl-main has-gradient-bottom">
       {% set ns = namespace(headings=0) %}
       {% for block in page.content %}
         {% set block_index = loop.index %}
@@ -68,7 +70,7 @@
 
         {% include_block block %}
       {% endfor %}
-    </main>
+    </div>
   {% endif %}
 </div>
 {% endblock %}

springfield/cms/templates/cms/home_page.html

@@ -14,9 +14,11 @@
   <include:flare26-header theme="dark" />
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page">
-  <main class="fl-main">
+  <div class="fl-main">
     <div class="fl-split-page-upper">
       {% set ns = namespace(headings=0) %}
       {% set block_level = 1 %}
@@ -48,6 +50,6 @@
         {% include_block block %}
       {% endfor %}
     </div>
-  </main>
+  </div>
 </div>
 {% endblock %}