Make it possibe to focus expand links in sidebar

Author: angelikatyborska

assets/css/sidebar.css

@@ -240,34 +240,49 @@
   margin-left: 10px;
 }
 
-.sidebar #full-list li a span.icon-expand:after {
+.sidebar #full-list li a.expand + button.icon-expand {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  margin-right: 10px;
+  font-size: calc(1.2 * 16px);
+  line-height: 20px;
+  position: absolute;
+  display: flex;
+  right: 0;
+  transform: translateY(calc(-100% - 4px));
+}
+
+.sidebar #full-list li a + button.icon-expand:after {
   font-family: remixicon;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sidebar #full-list li a.expand > span.icon-expand:after {
+.sidebar #full-list li a.expand + button.icon-expand:after {
   content: var(--icon-arrow-down-s);
-  margin-right: 10px;
-  font-size: 1.2em;
-  position: absolute;
-  right: 0;
 }
 
-.sidebar #full-list li.open > a.expand > span.icon-expand:after {
+.sidebar #full-list li.open > a.expand + button.icon-expand:after {
   content: var(--icon-arrow-up-s);
 }
 
-.sidebar #full-list li.docs > a > span.icon-expand:after {
+.sidebar #full-list li.docs > a + button.icon-expand {
   margin-right: 12px;
+  font-size: calc(1 * 16px);
+  line-height: 1;
+  transform: translateY(calc(-100% - 5px));
+}
+
+.sidebar #full-list li.docs > a + button.icon-expand:after {
   content: var(--icon-add);
-  font-size: 1em;
-  position: absolute;
-  right: 0;
 }
 
-.sidebar #full-list li.docs.open > a > span.icon-expand:after {
+.sidebar #full-list li.docs.open > a + button.icon-expand:after {
   content: var(--icon-subtract);
 }
 
@@ -305,6 +320,10 @@
   color: var(--sidebarActiveItem);
 }
 
+.sidebar #full-list li .current-section > a + button.icon-expand {
+  color: var(--sidebarActiveItem);
+}
+
 .sidebar #full-list > li > a:hover {
   border-left: 3px solid var(--sidebarLanguageAccentBar);
   padding-left: 12px;

assets/js/handlebars/templates/sidebar-items.handlebars

@@ -16,12 +16,13 @@
       {{else}}
         {{{node.title}}}
       {{/if}}
-      {{#isEmptyArray node.headers}}
-      {{else}}
-        <span class="icon-expand"></span>
-      {{/isEmptyArray}}
     </a>
 
+    {{#isEmptyArray node.headers}}
+    {{else}}
+      <button class="icon-expand" aria-label="expand"></button>
+    {{/isEmptyArray}}
+
     {{#isArray node.headers}}
       {{#isNonEmptyArray node.headers}}
         <ul>
@@ -38,8 +39,8 @@
           <li class="docs {{#isLocal node.id}}open{{/isLocal}}">
             <a href="{{node.id}}.html#content" class="expand">
               Sections
-              <span class="icon-expand"></span>
             </a>
+            <button class="icon-expand" aria-label="expand"></button>
             <ul class="sections-list deflist">
               {{#each sections}}
                 <li>
@@ -58,8 +59,8 @@
           <li class="docs">
             <a href="{{node.id}}.html#{{group.key}}" class="expand">
               {{group.name}}
-              <span class="icon-expand"></span>
             </a>
+            <button class="icon-expand" aria-label="expand"></button>
             <ul class="{{group.key}}-list deflist">
               {{#each group.nodes}}
                 <li>

assets/js/sidebar/sidebar-list.js

@@ -55,19 +55,20 @@ function renderSidebarNodeList (nodesByType, type) {
   })
 
   // Register event listeners
+  nodeList.querySelectorAll('li a + button').forEach(button => {
+    button.addEventListener('click', event => {
+      const target = event.target
+      const listItem = target.closest('li')
+      listItem.classList.toggle('open')
+    })
+  })
+
   nodeList.querySelectorAll('li a').forEach(anchor => {
     anchor.addEventListener('click', event => {
       const target = event.target
       const listItem = target.closest('li')
       const previousSection = nodeList.querySelector('.current-section')
 
-      // Expand icon should not navigate
-      if (target.matches('.icon-expand')) {
-        event.preventDefault()
-        listItem.classList.toggle('open')
-        return
-      }
-
       // Clear the previous current section
       if (previousSection) {
         previousSection.classList.remove('current-section')