Fix: Accessibility issues on contact page (#15695)

* Update heading levels to maintain semantic order

* Remove role=navigation and add <nav> wrapper

* Added aria-label to navigation

Co-authored-by: maureenlholland <maureen@silverorange.com>

---------

Co-authored-by: maureenlholland <maureen@silverorange.com>

bedrock/mozorg/templates/mozorg/contact/contact-landing.html

@@ -44,7 +44,7 @@ <h2>Contacting Mozilla</h2>
 
       <div class="contact-sections">
         <div class="contact-section">
-          <h4>Find us online</h4>
+          <h3>Find us online</h3>
           <ul class="mzp-u-list-styled">
             <li><a href="https://facebook.com/mozilla" hreflang="en-US" rel="external">Facebook</a></li>
             <li><a href="{{ mozilla_twitter_url() }}" rel="external">X (formerly Twitter)</a></li>
@@ -53,7 +53,7 @@ <h4>Find us online</h4>
         </div>
 
         <div class="contact-section">
-          <h4>Join us</h4>
+          <h3>Join us</h3>
           <ul class="mzp-u-list-styled">
             <li><a href="{{ url('mozorg.contribute') }}">Get involved</a></li>
             <li><a href="{{ url('careers.home') }}">Career opportunities</a></li>
@@ -62,7 +62,7 @@ <h4>Join us</h4>
         </div>
 
         <div class="contact-section">
-          <h4>Questions &amp; feedback</h4>
+          <h3>Questions &amp; feedback</h3>
           <ul class="mzp-u-list-styled">
             <li><a href="https://support.mozilla.org/">Get support</a></li>
             <li><a href="{{ url('foundation.licensing') }}">Browser distribution &amp; licensing</a></li>

bedrock/mozorg/templates/mozorg/contact/includes/tab-nav.html

@@ -4,14 +4,16 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<ul class="category-tabs" role="navigation">
-  <li {% if current == 'contact' %}class="current"{% endif %} data-id="contact">
-    <a href="{{ url('mozorg.contact.contact-landing') }}">Contact us</a>
-  </li>
-  <li {% if current == 'spaces' %}class="current"{% endif %} data-id="spaces">
-    <a href="{{ url('mozorg.contact.spaces.spaces-landing') }}">Spaces</a>
-  </li>
-  <li data-id="communities">
-    <a href="https://community.mozilla.org/groups/">Communities</a>
-  </li>
-</ul>
+<nav aria-label="Category">
+  <ul class="category-tabs">
+    <li {% if current == 'contact' %}class="current"{% endif %} data-id="contact">
+      <a href="{{ url('mozorg.contact.contact-landing') }}">Contact us</a>
+    </li>
+    <li {% if current == 'spaces' %}class="current"{% endif %} data-id="spaces">
+      <a href="{{ url('mozorg.contact.spaces.spaces-landing') }}">Spaces</a>
+    </li>
+    <li data-id="communities">
+      <a href="https://community.mozilla.org/groups/">Communities</a>
+    </li>
+  </ul>
+</nav>