Make heading are semantic while maintaining font-size

Headings should only ever increment by one

https://dequeuniversity.com/rules/axe/4.1/heading-order

Author: barrymcgee

includes/article.html

@@ -48,7 +48,7 @@ <h1 class="border-bottom-0">{{ page.title }}</h1>
     <div class="article-grid-toc border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0">
       <div class="article-grid-toc-content">
         {% if miniTocItems.size > 1 %}
-        <h3 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-this-article">{% data ui.pages.miniToc %}</a></h3>
+        <h2 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-this-article">{% data ui.pages.miniToc %}</a></h2>
         <ul class="list-style-none pl-0 f5 mb-0">
           {% for item in miniTocItems %}
           <li class="ml-{{ item.indentationLevel | times: 3 }} {{ item.platform }} mb-2 lh-condensed">{{ item.contents }}</li>

includes/contribution.html

@@ -1,11 +1,11 @@
 {% unless enterpriseServerReleases.isOldestReleaseDeprecated and currentVersion contains enterpriseServerReleases.oldestSupported %}
 <div class="mt-3 f5 contribution">
-  <h4>{% data ui.contribution_cta.title %}</h4>
+  <h2 class="f5">{% data ui.contribution_cta.title %}</h2>
   <p class="text-gray f6">{% data ui.contribution_cta.body %}</p>
   <a class="btn btn-outline" href={{ "https://github.com/github/docs/edit/main/content/" | append: page.relativePath }}>
     {% octicon "git-pull-request" height="16" %}
     {% data ui.contribution_cta.button %}
   </a>
   <p class="text-gray f6 mt-2">{% data ui.contribution_cta.or %} <a href="https://github.com/github/docs/blob/main/CONTRIBUTING.md" target="_blank">{% data ui.contribution_cta.to_guidelines %}</a></p>
 </div>
-{% endunless %}
+{% endunless %}

includes/helpfulness.html

@@ -1,13 +1,13 @@
 {% unless enterpriseServerReleases.isOldestReleaseDeprecated and currentVersion contains enterpriseServerReleases.oldestSupported %}
 <form class="js-helpfulness mt-4 f5">
-  <h4
+  <h2
     data-help-start
     data-help-yes
     data-help-no
-    class="mb-1"
+    class="mb-1 f5"
   >
     {% data ui.helpfulness.able_to_find %}
-  </h4>
+  </h2>
   <p class="f6">
     <a href="/github/site-policy/github-privacy-statement">Privacy policy</a>
   </p>

includes/landing.html

@@ -17,7 +17,7 @@ <h1 class="h1-mktg mb-3">{% data ui.search.need_help %}</h1>
   <!-- Explore by product -->
   <section class="container-xl pb-lg-4 my-8 px-3 px-md-6">
     <div class="">
-      <h3 class="text-mono f5 text-normal text-gray text-md-center mb-4">{% data ui.homepage.explore_by_product %}</h3>
+      <h2 class="text-mono f5 text-normal text-gray text-md-center mb-4">{% data ui.homepage.explore_by_product %}</h2>
       <div class="d-flex flex-wrap gutter gutter-xl-spacious">
       {% for product in activeProducts %}
       {% if product.versions contains currentVersion or currentVersion == 'homepage' %}

includes/liquid-tags/link-with-intro.html

@@ -1,4 +1,4 @@
 <a class="link-with-intro Bump-link--hover no-underline" href="{{ fullPath }}">
-  <h4 class="link-with-intro-title">{{ title }}<span class="Bump-link-symbol">→</span></h4>
+  <h2 class="link-with-intro-title f4">{{ title }}<span class="Bump-link-symbol">→</span></h2>
 </a>
 {% if intro %}<p class="link-with-intro-intro">{{ intro }}</p>{% endif %}

includes/support.html

@@ -1,9 +1,9 @@
 <!-- Contact support banner -->
 <section class="mt-lg-9 py-7 no-print js-support-banner" style="background-color: #fafbfc;">
   <div class="container-xl px-3 px-md-6 ">
-    <h4 class="mb-2">
+    <h3 class="mb-2 f4">
       {% data ui.support.still_need_help %}
-    </h4>
+    </h3>
     {% if currentVersion contains 'enterprise' %}{% assign isEnterprise = true %}{% else %}{% assign isEnterprise = false %}{% endif %}
     <a id="ask-community" href="https://github.community" class="btn btn-outline mr-4 mt-2">
       {% octicon "people" width="16" %}

layouts/enterprise-server-releases.html

@@ -9,9 +9,9 @@
       <main class="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
         <article class="markdown-body width-full">
           <div class="d-lg-flex flex-justify-between"></div>
-      
+
           <div class="mt-2 article-grid-container">
-      
+
           <div class="article-grid-head">
             <div class="d-flex flex-items-baseline flex-justify-between mt-3">
               <h1 class="border-bottom-0">{% data ui.enterprise_releases_list.title %}</h1>
@@ -20,7 +20,7 @@ <h1 class="border-bottom-0">{% data ui.enterprise_releases_list.title %}</h1>
           <div class="article-grid-toc border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0">
             <div class="article-grid-toc-content">
               {% if miniTocItems.size > 1 %}
-              <h3 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-this-article">{% data ui.pages.miniToc %}</a></h3>
+              <h2 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-this-article">{% data ui.pages.miniToc %}</a></h2>
               <ul class="list-style-none pl-0 f5 mb-0">
                 {% for item in miniTocItems %}
                 <li class="ml-{{ item.indentationLevel | times: 3 }} mb-2 lh-condensed">{{ item.contents }}</li>
@@ -58,7 +58,7 @@ <h2 id="deprecated-on-developer.github.com"><a href="#deprecated-on-developer.gi
           </div>
         </article>
       </main>
-      
+
     </main>
   </body>
 </html>

layouts/product-landing.html

@@ -80,7 +80,7 @@ <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.
               {% for link in featuredLinks.popular %}
                 <li class="border-top">
                   <a class="link-with-intro Bump-link--hover no-underline d-block py-3" href="{{ link.href }}">
-                    <h4 class="link-with-intro-title">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
+                    <h2 class="link-with-intro-title f5">{{ link.title }}<span class="Bump-link-symbol">→</span></h2>
                   </a>
                 </li>
               {% endfor %}