fix: fix inability to previously open / close / traverse pattern lab's navigation via keyboard

Author: sghoweri

packages/uikit-workshop/src/html/partials/pattern-nav.html

@@ -1,16 +1,16 @@
 {{# patternTypes }}
 <li class="pl-c-nav__item pl-c-nav__item--{{ patternTypeLC }}">
 
-	<a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" tabindex="0" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</a>
+	<button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</button>
 
 	<ol class="pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel" id="{{ patternTypeLC }}">
 
 		{{# patternTypeItems }}
 		<li class="pl-c-nav__item pl-c-nav__item--{{ patternSubtypeLC }}">
 
-			<a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle">{{ patternSubtypeUC }}</a>
+			<button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" aria-controls="{{ patternSubtypeUC }}" role="tab">{{ patternSubtypeUC }}</button>
 
-			<ol class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
+			<ol id="{{ patternSubtypeUC }}" class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
 
 				{{# patternSubtypeItems }}
 				<li class="pl-c-nav__item">

packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss

@@ -185,6 +185,7 @@
 .pl-c-nav__subsublist--dropdown {
   @include listReset();
   @include accordionPanel();
+  visibility: hidden;
 }
 
 /**
@@ -194,6 +195,7 @@
 .pl-c-nav__sublist--dropdown.pl-is-active,
 .pl-c-nav__subsublist--dropdown.pl-is-active {
   margin-left: $pl-space / 2;
+  visibility: visible;
 
   @media all and (min-width: $pl-bp-med) {
     height: auto;

packages/uikit-workshop/src/scripts/components/styleguide.js

@@ -63,8 +63,6 @@ import { urlHandler, DataSaver } from '../utils';
 
   // Accordion dropdown
   $('.pl-js-acc-handle').on('click', function(e) {
-    e.preventDefault();
-
     const $this = $(this);
     const $panel = $this.next('.pl-js-acc-panel');
     const subnav = $this