Make it possible to navigate the menu with the keyboard. Fix #202

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## [Unreleased]
 
 - Disable pointer events on menu chevron to allow clicks ([#202](https://github.com/torchbox/django-pattern-library/issues/202), [#205](https://github.com/torchbox/django-pattern-library/pull/205))
+- Improve menu accessibility by using buttons for menu items ([#207](https://github.com/torchbox/django-pattern-library/pull/207)).
 
 ## [1.0.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.0.0) - 2022-06-10
 

pattern_library/static/pattern_library/src/js/components/navigation.js

@@ -1,10 +1,11 @@
 export function toggleNavItems() {
-    const headings = document.querySelectorAll('.js-toggle-pattern');
-    headings.forEach(heading => {
-        heading.addEventListener('click', e => {
+    const categoryButtons = document.querySelectorAll('.js-toggle-pattern');
+
+    categoryButtons.forEach((button) => {
+        button.addEventListener('click', (e) => {
             e.target.classList.toggle('is-open');
-            for ( const element of e.target.parentNode.childNodes ) {
-                if ( element.nodeName === "UL" ){
+            for (const element of e.target.closest('.js-list-item').childNodes) {
+                if (element.nodeName === 'UL') {
                     element.classList.toggle('is-open');
                 }
             }

pattern_library/static/pattern_library/src/scss/components/_list.scss

@@ -19,23 +19,24 @@
         padding-left: 15px;
     }
 
-    &__item-heading {
+    &__button {
         display: flex;
         align-items: center;
         margin: 10px 0;
         user-select: none;
-        font-weight: 500;
         font-size: 19px;
+        appearance: none;
+        background-color: transparent;
+        border: 0;
+        gap: 5px;
+        padding: 0;
 
         &:hover {
             cursor: pointer;
         }
 
-        &--light {
-            font-weight: 200;
-        }
-
-        &--small{
+        &--child {
+            color: $mid-grey;
             font-size: 13px;
         }
     }
@@ -44,7 +45,8 @@
         width: 15px;
         height: 15px;
         pointer-events: none;
-
+        transition: transform 0.15s ease-in-out;
+
         .is-open > & {
             transform: rotate(90deg);
         }

pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss

@@ -1,12 +1,15 @@
 .sidebar {
     background-color: $off-white;
-    padding: 20px;
     height: 100vh;
     margin-left: 0;
     overflow: auto;
     -ms-grid-column: 1;
     -ms-grid-row: 2;
 
+    &__inner {
+        padding: 20px;
+    }
+
     &__search {
         width: 100%;
         padding: 10px;

pattern_library/templates/pattern_library/base.html

@@ -22,24 +22,26 @@ <h1 class="header__title">
         </h1>
     </header>
     <aside class="sidebar">
-        <label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
-        <input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
-        <div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
-        <nav class="sidebar__nav" id="sidebar-nav">
-            <ul class="list">
-                {% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
-                <li class="list__item">
-                    <h2 class="list__item-heading js-toggle-pattern">
-                        <svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
-                            <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
-                        </svg>
-                        {{ pattern_type_group|title }}
-                    </h2>
-                    {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
-                </li>
-                {% endfor %}
-            </ul>
-        </nav>
+        <div class="sidebar__inner">
+            <label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
+            <input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
+            <div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
+            <nav class="sidebar__nav" id="sidebar-nav">
+                <ul class="list">
+                    {% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
+                    <li class="list__item js-list-item">
+                        <button class="list__button list__button--parent js-toggle-pattern">
+                            <svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
+                                <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
+                            </svg>
+                            {{ pattern_type_group|title }}
+                        </button>
+                        {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
+                    </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
     </aside>
     <main class="main">
         {% block content %}{% endblock %}

pattern_library/templates/pattern_library/pattern_group.html

@@ -1,12 +1,12 @@
 <ul class="list list--child">
     {% for group_name, pattern_templates in groups.items %}
-    <li class="list__item">
-        <h3 class="list__item-heading list__item-heading--small list__item-heading--light js-toggle-pattern">
+    <li class="list__item js-list-item">
+        <button class="list__button list__button--child js-toggle-pattern">
             <svg class="list__item-icon list__item-icon--small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
-                <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
+                <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" fill="currentColor" />
             </svg>
             {{ group_name }}
-        </h3>
+        </button>
         {% if pattern_templates.template_groups %}
             {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
         {% endif %}

tests/tests/test_sections.py

@@ -13,7 +13,10 @@ def get_sections(self):
 
         soup = BeautifulSoup(response.content, features="html.parser")
         sidebar_nav = soup.select_one("#sidebar-nav")
-        sections = [h.text.strip() for h in sidebar_nav.find_all("h2")]
+        sections = [
+            h.text.strip()
+            for h in sidebar_nav.find_all("button", {"class": "list__button--parent"})
+        ]
 
         return sections
 

tox.ini

@@ -3,8 +3,9 @@ envlist = py{37,38,39,310,311}-dj{32,40,41,main}, lint
 skipsdist = true
 
 [testenv]
-whitelist_externals =
+allowlist_externals =
     poetry
+    ./tox_install.sh
 install_command =
     ./tox_install.sh {packages}
 commands =