From a9d6b0609237233525e825e4e929afd7d8396f96 Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:00:08 +0000 Subject: [PATCH 01/12] change list item elements to a button so they can receive focus and the icon can be clicked --- .../src/js/components/navigation.js | 11 ++++++----- .../src/scss/components/_list.scss | 15 ++++++++------- .../templates/pattern_library/base.html | 18 +++++++++--------- .../pattern_library/pattern_group.html | 6 +++--- 4 files changed, 26 insertions(+), 24 deletions(-) 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..b51c6dd5 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; } } diff --git a/pattern_library/templates/pattern_library/base.html b/pattern_library/templates/pattern_library/base.html index e5deb10a..39bbbfc2 100644 --- a/pattern_library/templates/pattern_library/base.html +++ b/pattern_library/templates/pattern_library/base.html @@ -28,18 +28,18 @@

+
  • + + {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %} +
    • {% 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..6dbb8d96 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 %} From 5daed713e4abf95f67de79d2b875108baf8e961d Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:01:49 +0000 Subject: [PATCH 02/12] remove pointer events from list item icon as it's now in a button --- .../static/pattern_library/src/scss/components/_list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b51c6dd5..0fe2a20a 100644 --- a/pattern_library/static/pattern_library/src/scss/components/_list.scss +++ b/pattern_library/static/pattern_library/src/scss/components/_list.scss @@ -45,7 +45,7 @@ width: 15px; height: 15px; pointer-events: none; - + .is-open > & { transform: rotate(90deg); } From 5abfe01c0d7c9f41d3cd1e841ec36bd602e1d9c7 Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:02:03 +0000 Subject: [PATCH 03/12] transition the list item icon when opening/closing --- .../static/pattern_library/src/scss/components/_list.scss | 1 + 1 file changed, 1 insertion(+) 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 0fe2a20a..1a4df040 100644 --- a/pattern_library/static/pattern_library/src/scss/components/_list.scss +++ b/pattern_library/static/pattern_library/src/scss/components/_list.scss @@ -45,6 +45,7 @@ width: 15px; height: 15px; pointer-events: none; + transition: transform 0.15s ease-in-out; .is-open > & { transform: rotate(90deg); From dcfcb962367b458cee353aaf85758c7b69ac2d22 Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:02:43 +0000 Subject: [PATCH 04/12] move padding off the sidebar so you can't see elements within it when it's closed --- .../src/scss/layout/_sidebar.scss | 5 ++++- .../templates/pattern_library/base.html | 20 ++++++++++--------- 2 files changed, 15 insertions(+), 10 deletions(-) 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 39bbbfc2..15aae2ea 100644 --- a/pattern_library/templates/pattern_library/base.html +++ b/pattern_library/templates/pattern_library/base.html @@ -22,15 +22,13 @@

      {% block content %}{% endblock %} From 01bd7668e6cad21f746b2e9a3f899e056750c20c Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:03:01 +0000 Subject: [PATCH 05/12] match list item icon to it's parents colour --- pattern_library/templates/pattern_library/pattern_group.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pattern_library/templates/pattern_library/pattern_group.html b/pattern_library/templates/pattern_library/pattern_group.html index 6dbb8d96..d4b77089 100644 --- a/pattern_library/templates/pattern_library/pattern_group.html +++ b/pattern_library/templates/pattern_library/pattern_group.html @@ -3,7 +3,7 @@
    • From a673c5f9c22a17809436c671140a4bcfebe027f6 Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:15:28 +0000 Subject: [PATCH 06/12] update readme --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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 From a256c51d71ce70adde46f4601dfe7a0a34910762 Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Mon, 31 Oct 2022 17:21:35 +0000 Subject: [PATCH 07/12] update tests after heading tags were replaced with buttons --- tests/tests/test_sections.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/tests/test_sections.py b/tests/tests/test_sections.py index 51d4783b..fe0df1e2 100644 --- a/tests/tests/test_sections.py +++ b/tests/tests/test_sections.py @@ -13,7 +13,7 @@ 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")] return sections From bcc9096cb508404a9a49861e72cf5b5f9c256f6a Mon Sep 17 00:00:00 2001 From: Chris Lawton Date: Thu, 3 Nov 2022 16:00:30 +0000 Subject: [PATCH 08/12] fix test_just_atoms by adding a class to parent buttons --- pattern_library/templates/pattern_library/base.html | 2 +- tests/tests/test_sections.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pattern_library/templates/pattern_library/base.html b/pattern_library/templates/pattern_library/base.html index 15aae2ea..4b6b5be7 100644 --- a/pattern_library/templates/pattern_library/base.html +++ b/pattern_library/templates/pattern_library/base.html @@ -30,7 +30,7 @@

        {% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
      • -