From cf6c8e9b3aa4002a09432911fc9b7c51a573df9a Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 7 Dec 2021 20:08:53 +0800
Subject: [PATCH] Improve accessibility of panel heading elements

---
 _includes/toc.html           |  4 +---
 _includes/trending-tags.html |  2 +-
 _includes/update-list.html   |  2 +-
 _sass/addon/commons.scss     |  6 ++----
 _sass/addon/module.scss      | 12 ------------
 _sass/layout/post.scss       |  3 ---
 6 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/_includes/toc.html b/_includes/toc.html
index 0ddebdb..b9cea39 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -10,9 +10,7 @@
 <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
 
 <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-  <h4 class="pl-3 pt-2 mb-2">
-    {{- site.data.locales[lang].panel.toc -}}
-  </h4>
+  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
   <nav id="toc" data-toggle="toc"></nav>
 </div>
 {% endif %}
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html
index a5ff0c0..eb645cd 100644
--- a/_includes/trending-tags.html
+++ b/_includes/trending-tags.html
@@ -37,7 +37,7 @@
 
 {% if trending_tags.size > 0 %}
   <div id="access-tags">
-    <h4 class="text-muted">{{- site.data.locales[lang].panel.trending_tags -}}</h4>
+    <div class="panel-heading">{{- site.data.locales[lang].panel.trending_tags -}}</div>
     <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
     {% for tag_name in trending_tags %}
diff --git a/_includes/update-list.html b/_includes/update-list.html
index 4f4201b..e8ec23c 100644
--- a/_includes/update-list.html
+++ b/_includes/update-list.html
@@ -26,7 +26,7 @@
 {% if update_list.size > 0 %}
 
   <div id="access-lastmod" class="post">
-    <h4>{{- site.data.locales[lang].panel.lastmod -}}</h4>
+    <div class="panel-heading">{{- site.data.locales[lang].panel.lastmod -}}</div>
     <ul class="post-content pl-0 pb-1 ml-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: "::" | last | plus: 0 %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index faae717..0729239 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -216,10 +216,8 @@ img[data-src] {
 }
 
 #panel-wrapper {
-  h4 {
-    @include panel-label;
-
-    font-family: inherit;
+  .panel-heading { // the headings
+    @include label(inherit);
   }
 
   .post-tag {
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 45d57bc..7e25531 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -124,18 +124,6 @@
   font-weight: $font-weight;
 }
 
-@mixin panel-label {
-  @include label(inherit);
-
-  display: block;
-  line-height: 1.2;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  margin-top: 0;
-  margin-bottom: 0;
-  letter-spacing: -0.02em;
-}
-
 @mixin align-center {
   position: relative;
   left: 50%;
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index bcb811f..4d09f23 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -150,9 +150,6 @@ img.preview-img {
     top: 6rem;
   }
 
-  > span {
-    @include panel-label;
-  }
 }
 
 #toc li a {