Improve accessibility of panel heading elements

_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 %}

_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 %}

_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 %}

_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 {

_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%;

_sass/layout/post.scss

@@ -150,9 +150,6 @@ img.preview-img {
     top: 6rem;
   }
 
-  > span {
-    @include panel-label;
-  }
 }
 
 #toc li a {