diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6ed404a..e5f0d7fe 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/pattern_library/static/pattern_library/src/js/components/navigation.js b/pattern_library/static/pattern_library/src/js/components/navigation.js
index 8c62f537..31c211fa 100644
--- a/pattern_library/static/pattern_library/src/js/components/navigation.js
+++ b/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');
}
}
diff --git a/pattern_library/static/pattern_library/src/scss/components/_list.scss b/pattern_library/static/pattern_library/src/scss/components/_list.scss
index 5819421f..1a4df040 100644
--- a/pattern_library/static/pattern_library/src/scss/components/_list.scss
+++ b/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);
}
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss b/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss
index 1a311c32..b24d5e71 100644
--- a/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss
+++ b/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;
diff --git a/pattern_library/templates/pattern_library/base.html b/pattern_library/templates/pattern_library/base.html
index e5deb10a..4b6b5be7 100644
--- a/pattern_library/templates/pattern_library/base.html
+++ b/pattern_library/templates/pattern_library/base.html
@@ -22,24 +22,26 @@
{% block content %}{% endblock %}
diff --git a/pattern_library/templates/pattern_library/pattern_group.html b/pattern_library/templates/pattern_library/pattern_group.html
index dd44d18e..d4b77089 100644
--- a/pattern_library/templates/pattern_library/pattern_group.html
+++ b/pattern_library/templates/pattern_library/pattern_group.html
@@ -1,12 +1,12 @@
{% for group_name, pattern_templates in groups.items %}
- -
-
+
-
+
{% if pattern_templates.template_groups %}
{% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
{% endif %}
diff --git a/tests/tests/test_sections.py b/tests/tests/test_sections.py
index 51d4783b..49a249fc 100644
--- a/tests/tests/test_sections.py
+++ b/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
diff --git a/tox.ini b/tox.ini
index 0f36493c..413a5fc1 100644
--- a/tox.ini
+++ b/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 =