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 @@