Docs: change sidebar collapse controls to actual button elements (#31098)

apart from the visual styling, there's probably no good reason why these shouldn't be `<button>` elements, semantically

the buttons still look a shade too button-like, despite using `.btn-light`. the last remnant of button styling can probably be suppressed further, *or* this makes the case for expanding the core button styles to have one that looks completely non-button and non-link like (for cases where an additional style/hint was given already, or it's clear from context that something's an actionable button or link)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 0575a465e52d13c8f5602b3a8e76ceb00ead87b5..9a933831fa2212cdd2039c8b63ae1e25d762cb02 100644 (file)
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -32,6 +32,7 @@
   a {
     padding: .1875rem .5rem;
     margin-top: .125rem;
+    margin-left: 1.25rem;
     color: rgba($black, .65);
     text-decoration: if($link-decoration == none, null, none);
 
@@ -41,28 +42,40 @@
       text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: rgba($bd-purple-bright, .1);
     }
+  }
+
+  .btn {
+    // Custom styles (as we don't have a completely neutral button style)
+    padding: .25rem .5rem;
+    font-weight: 600;
+    color: rgba($black, .65);
+    background-color: none;
+    border: 0;
+
+    &:hover,
+    &:focus {
+      color: rgba($black, .85);
+      background-color: rgba($bd-purple-bright, .1);
+    }
 
-    // Indent if there's no submenu
-    &:only-child {
-      margin-left: 1.25rem;
+    &:focus {
+      box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7);
     }
 
     // Add chevron if there's a submenu
-    &:not(:only-child) {
-      &::before {
-        width: 1.25em;
-        line-height: 0; // Align in the middle
-        content: escape-svg($sidebar-collapse-icon);
-        @include transition(transform .35s ease);
-        transform-origin: .5em 50%;
-      }
+    &::before {
+      width: 1.25em;
+      line-height: 0; // Align in the middle
+      content: escape-svg($sidebar-collapse-icon);
+      @include transition(transform .35s ease);
+      transform-origin: .5em 50%;
+    }
 
-      &:not(.collapsed) {
-        color: rgba($black, .85);
+    &[aria-expanded="true"] {
+      color: rgba($black, .85);
 
-        &::before {
-          transform: rotate(90deg);
-        }
+      &::before {
+        transform: rotate(90deg);
       }
     }
   }

diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 06900cb23114b6b541cd452da204b17ce6d0bfa7..94acb47863ebafcd3a1ef5e8fad20f01abb8e0c4 100644 (file)
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -16,9 +16,9 @@
     {{- $is_active_group := eq $.Page.Params.group $group_slug }}
 
     <li class="mb-1{{ if $is_active_group }} active{{ end }}">
-      <a class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
+      <button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
         {{ $group.title }}
-      </a>
+      </button>
 
       {{- if $group.pages }}
       <div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">