GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 05:14:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix a11y for explorer

Browse Source
This commit is contained in:
MathieuDR 2025-05-11 00:11:45 +02:00
parent e98d97a271
commit 9691ef3e2e
No known key found for this signature in database
GPG Key ID: BB1B6AEC733F6F80
3 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
quartz/components/Explorer.tsx
View File

@ -61,7 +61,7 @@ export default ((userOpts?: Partial<Options>) => {
const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => { const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
return ( return (
<div <nav
class={classNames(displayClass, "explorer")} class={classNames(displayClass, "explorer")}
data-behavior={opts.folderClickBehavior} data-behavior={opts.folderClickBehavior}
data-collapsed={opts.folderDefaultState} data-collapsed={opts.folderDefaultState}
@ -78,6 +78,7 @@ export default ((userOpts?: Partial<Options>) => {
class="explorer-toggle mobile-explorer hide-until-loaded" class="explorer-toggle mobile-explorer hide-until-loaded"
data-mobile={true} data-mobile={true}
aria-controls="explorer-content" aria-controls="explorer-content"
aria-label="Explorer"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -116,7 +117,7 @@ export default ((userOpts?: Partial<Options>) => {
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </button>
<div class="explorer-content" aria-expanded={false}> <div id="explorer-content">
<OverflowList class="explorer-ul" /> <OverflowList class="explorer-ul" />
</div> </div>
<template id="template-file"> <template id="template-file">
@ -152,7 +153,7 @@ export default ((userOpts?: Partial<Options>) => {
</div> </div>
</li> </li>
</template> </template>
</div> </nav>
) )
} }

2
quartz/components/scripts/explorer.inline.ts
View File

@ -151,7 +151,7 @@ function createFolderNode(
} }
async function setupExplorer(currentSlug: FullSlug) { async function setupExplorer(currentSlug: FullSlug) {
const allExplorers = document.querySelectorAll("div.explorer") as NodeListOf<HTMLElement> const allExplorers = document.querySelectorAll("nav.explorer") as NodeListOf<HTMLElement>
for (const explorer of allExplorers) { for (const explorer of allExplorers) {
const dataFns = JSON.parse(explorer.dataset.dataFns || "{}") const dataFns = JSON.parse(explorer.dataset.dataFns || "{}")

14
quartz/components/styles/explorer.scss
View File

@ -2,10 +2,12 @@
@media all and ($mobile) { @media all and ($mobile) {
.page>#quartz-body { .page>#quartz-body {
// Shift page position when toggling Explorer on mobile. // Shift page position when toggling Explorer on mobile.
&> :not(.sidebar.left:has(.explorer)) { &> :not(.sidebar.left:has(.explorer)) {
transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out;
} }
&.lock-scroll> :not(.sidebar.left:has(.explorer)) { &.lock-scroll> :not(.sidebar.left:has(.explorer)) {
transform: translateX(100dvw); transform: translateX(100dvw);
transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out;
@ -20,7 +22,7 @@
margin: 0; margin: 0;
} }
.hide-until-loaded ~ .explorer-content { .hide-until-loaded~#explorer-content {
display: none; display: none;
} }
} }
@ -33,8 +35,10 @@
min-height: 1.2rem; min-height: 1.2rem;
flex: 0 1 auto; flex: 0 1 auto;
&.collapsed { &.collapsed {
flex: 0 1 1.2rem; flex: 0 1 1.2rem;
& .fold { & .fold {
transform: rotateZ(-90deg); transform: rotateZ(-90deg);
} }
@ -108,7 +112,7 @@ button.desktop-explorer {
} }
} }
.explorer-content { #explorer-content {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
@ -215,7 +219,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
&.collapsed { &.collapsed {
flex: 0 0 34px; flex: 0 0 34px;
& > .explorer-content { &>#explorer-content {
transform: translateX(-100vw); transform: translateX(-100vw);
visibility: hidden; visibility: hidden;
} }
@ -224,13 +228,13 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
&:not(.collapsed) { &:not(.collapsed) {
flex: 0 0 34px; flex: 0 0 34px;
& > .explorer-content { &>#explorer-content {
transform: translateX(0); transform: translateX(0);
visibility: visible; visibility: visible;
} }
} }
.explorer-content { #explorer-content {
box-sizing: border-box; box-sizing: border-box;
z-index: 100; z-index: 100;
position: absolute; position: absolute;