The Trans Directory
feat(explorer): improve accessibility and consistency (+ bug fix) (#488)
* feat(consistency): use `all: unset` on button
* style: improve accessibility and consistency for explorer
* fix: localStorage bug with folder name changes
* chore: bump quartz version
authored by
Ben Schlegel
and committed by
GitHub
b029eead
6a9e6352
+21
-16
+1
-1
package.json
+1
-1
package.json
+2
-2
quartz/components/Explorer.tsx
+2
-2
quartz/components/Explorer.tsx
···
79
79
data-savestate={opts.useSavedState}
80
80
data-tree={jsonTree}
81
81
>
82
-
<h3>{opts.title}</h3>
82
+
<h1>{opts.title}</h1>
83
83
<svg
84
84
xmlns="http://www.w3.org/2000/svg"
85
85
width="14"
···
98
98
<div id="explorer-content">
99
99
<ul class="overflow" id="explorer-ul">
100
100
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
101
-
<div id="explorer-end" />
101
+
<li id="explorer-end" />
102
102
</ul>
103
103
</div>
104
104
</div>
+5
-5
quartz/components/ExplorerNode.tsx
+5
-5
quartz/components/ExplorerNode.tsx
···
145
145
}
146
146
147
147
return (
148
-
<div>
148
+
<li>
149
149
{node.file ? (
150
150
// Single file node
151
151
<li key={node.file.slug}>
···
174
174
<polyline points="6 9 12 15 18 9"></polyline>
175
175
</svg>
176
176
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
177
-
<li key={node.name} data-folderpath={folderPath}>
177
+
<div key={node.name} data-folderpath={folderPath}>
178
178
{folderBehavior === "link" ? (
179
179
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
180
180
{node.name}
181
181
</a>
182
182
) : (
183
183
<button class="folder-button">
184
-
<h3 class="folder-title">{node.name}</h3>
184
+
<p class="folder-title">{node.name}</p>
185
185
</button>
186
186
)}
187
-
</li>
187
+
</div>
188
188
</div>
189
189
)}
190
190
{/* Recursively render children of folder */}
···
210
210
</div>
211
211
</div>
212
212
)}
213
-
</div>
213
+
</li>
214
214
)
215
215
}
+5
-3
quartz/components/scripts/explorer.inline.ts
+5
-3
quartz/components/scripts/explorer.inline.ts
···
113
113
) as HTMLElement
114
114
115
115
// Get corresponding content <ul> tag and set state
116
-
const folderUL = folderLi.parentElement?.nextElementSibling
117
-
if (folderUL) {
118
-
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
116
+
if (folderLi) {
117
+
const folderUL = folderLi.parentElement?.nextElementSibling
118
+
if (folderUL) {
119
+
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
120
+
}
119
121
}
120
122
})
121
123
} else {
+8
-5
quartz/components/styles/explorer.scss
+8
-5
quartz/components/styles/explorer.scss
···
1
1
button#explorer {
2
+
all: unset;
2
3
background-color: transparent;
3
4
border: none;
4
5
text-align: left;
···
8
9
display: flex;
9
10
align-items: center;
10
11
11
-
& h3 {
12
+
& h1 {
12
13
font-size: 1rem;
13
14
display: inline-block;
14
15
margin: 0;
···
58
59
max-height 0.35s ease,
59
60
transform 0.35s ease,
60
61
opacity 0.2s ease;
61
-
& div > li > a {
62
+
& li > a {
62
63
color: var(--dark);
63
64
opacity: 0.75;
64
65
pointer-events: all;
···
92
93
color: var(--tertiary) !important;
93
94
}
94
95
95
-
& li > button {
96
+
& div > button {
96
97
color: var(--dark);
97
98
background-color: transparent;
98
99
border: none;
···
103
104
display: flex;
104
105
align-items: center;
105
106
106
-
& h3 {
107
+
& p {
107
108
font-size: 0.95rem;
108
109
display: inline-block;
109
110
color: var(--secondary);
···
138
139
139
140
#explorer-end {
140
141
// needs height so IntersectionObserver gets triggered
141
-
height: 1px;
142
+
height: 4px;
143
+
// remove default margin from li
144
+
margin: 0;
142
145
}