Skip to content

Commit a330dd6

Browse files
chris-lawtonchris-lawton
authored
Make it possible to navigate the menu with the keyboard. Fix #202 (#207)
1 parent c9aaf57 commit a330dd6

File tree

8 files changed

+51
-38
lines changed

8 files changed

+51
-38
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
## [Unreleased]
44

55
- 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))
6+
- Improve menu accessibility by using buttons for menu items ([#207](https://github.com/torchbox/django-pattern-library/pull/207)).
67

78
## [1.0.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.0.0) - 2022-06-10
89

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
export function toggleNavItems() {
2-
const headings = document.querySelectorAll('.js-toggle-pattern');
3-
headings.forEach(heading => {
4-
heading.addEventListener('click', e => {
2+
const categoryButtons = document.querySelectorAll('.js-toggle-pattern');
3+
4+
categoryButtons.forEach((button) => {
5+
button.addEventListener('click', (e) => {
56
e.target.classList.toggle('is-open');
6-
for ( const element of e.target.parentNode.childNodes ) {
7-
if ( element.nodeName === "UL" ){
7+
for (const element of e.target.closest('.js-list-item').childNodes) {
8+
if (element.nodeName === 'UL') {
89
element.classList.toggle('is-open');
910
}
1011
}

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,24 @@
1919
padding-left: 15px;
2020
}
2121

22-
&__item-heading {
22+
&__button {
2323
display: flex;
2424
align-items: center;
2525
margin: 10px 0;
2626
user-select: none;
27-
font-weight: 500;
2827
font-size: 19px;
28+
appearance: none;
29+
background-color: transparent;
30+
border: 0;
31+
gap: 5px;
32+
padding: 0;
2933

3034
&:hover {
3135
cursor: pointer;
3236
}
3337

34-
&--light {
35-
font-weight: 200;
36-
}
37-
38-
&--small{
38+
&--child {
39+
color: $mid-grey;
3940
font-size: 13px;
4041
}
4142
}
@@ -44,7 +45,8 @@
4445
width: 15px;
4546
height: 15px;
4647
pointer-events: none;
47-
48+
transition: transform 0.15s ease-in-out;
49+
4850
.is-open > & {
4951
transform: rotate(90deg);
5052
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
.sidebar {
22
background-color: $off-white;
3-
padding: 20px;
43
height: 100vh;
54
margin-left: 0;
65
overflow: auto;
76
-ms-grid-column: 1;
87
-ms-grid-row: 2;
98

9+
&__inner {
10+
padding: 20px;
11+
}
12+
1013
&__search {
1114
width: 100%;
1215
padding: 10px;

‎pattern_library/templates/pattern_library/base.html

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,26 @@ <h1 class="header__title">
2222
</h1>
2323
</header>
2424
<aside class="sidebar">
25-
<label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
26-
<input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
27-
<div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
28-
<nav class="sidebar__nav" id="sidebar-nav">
29-
<ul class="list">
30-
{% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
31-
<li class="list__item">
32-
<h2 class="list__item-heading js-toggle-pattern">
33-
<svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
34-
<path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
35-
</svg>
36-
{{ pattern_type_group|title }}
37-
</h2>
38-
{% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
39-
</li>
40-
{% endfor %}
41-
</ul>
42-
</nav>
25+
<div class="sidebar__inner">
26+
<label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
27+
<input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
28+
<div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
29+
<nav class="sidebar__nav" id="sidebar-nav">
30+
<ul class="list">
31+
{% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
32+
<li class="list__item js-list-item">
33+
<button class="list__button list__button--parent js-toggle-pattern">
34+
<svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
35+
<path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
36+
</svg>
37+
{{ pattern_type_group|title }}
38+
</button>
39+
{% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
40+
</li>
41+
{% endfor %}
42+
</ul>
43+
</nav>
44+
</div>
4345
</aside>
4446
<main class="main">
4547
{% block content %}{% endblock %}

‎pattern_library/templates/pattern_library/pattern_group.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<ul class="list list--child">
22
{% for group_name, pattern_templates in groups.items %}
3-
<li class="list__item">
4-
<h3 class="list__item-heading list__item-heading--small list__item-heading--light js-toggle-pattern">
3+
<li class="list__item js-list-item">
4+
<button class="list__button list__button--child js-toggle-pattern">
55
<svg class="list__item-icon list__item-icon--small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
6-
<path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
6+
<path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" fill="currentColor" />
77
</svg>
88
{{ group_name }}
9-
</h3>
9+
</button>
1010
{% if pattern_templates.template_groups %}
1111
{% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
1212
{% endif %}

‎tests/tests/test_sections.py

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ def get_sections(self):
1313

1414
soup = BeautifulSoup(response.content, features="html.parser")
1515
sidebar_nav = soup.select_one("#sidebar-nav")
16-
sections = [h.text.strip() for h in sidebar_nav.find_all("h2")]
16+
sections = [
17+
h.text.strip()
18+
for h in sidebar_nav.find_all("button", {"class": "list__button--parent"})
19+
]
1720

1821
return sections
1922

‎tox.ini

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ envlist = py{37,38,39,310,311}-dj{32,40,41,main}, lint
33
skipsdist = true
44

55
[testenv]
6-
whitelist_externals =
6+
allowlist_externals =
77
poetry
8+
./tox_install.sh
89
install_command =
910
./tox_install.sh {packages}
1011
commands =

0 commit comments

Comments
 (0)