keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-06-22 00:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

a11y(darkmode): use a button for the theme toggle (#1335)

Browse Source 
* Use a `<button>` for theme toggle

* docs: Adds back Xinyang's cs garden to showcase (#1323)

adding back my garden which was deleted from the cleanup showcase

* feat(toc,explorer): add accessibility for toggle (#1327)

* Restore focus highlight on explorer toggle button.

Remove `unset: all` declaration causing `outline`
property to be unset. This allows the default
browser focus highlight to be shown.

* Fix semantics of expandable sections (explorer, toc).

This adds the appropriate aria attributes for the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-image-description/#javascriptandcsssourcecode) and uses `visibility: hidden` to remove the hidden elements from the focus order without disrupting the animations. Further work is needed on the tree view nodes.

* Run prettier for SCSS files.

* feat: custom global latex macros (closes #1325)

* chore: ts fixes

* docs: recommend at least node 20 in gh

* fix: unmemoize explorer on rebuild (closes #1077)

* fix: pass buildId to worker

* Fix theme button DOM hierarchy and styles

* Restore functionality of theme button

* `aria-label` on theme svgs so their accessible labels are included in button content

---------

Co-authored-by: Xinyang Yu <47915643+xy-241@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Andrew
2024-08-24 16:33:30 -04:00
committed by GitHub
parent 46b63b68bf
commit 4c9e860150
3 changed files with 48 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
quartz/components/styles/darkmode.scss
View File

@ -1,17 +1,15 @@
.darkmode {
cursor: pointer;
padding: 0;
position: relative;
background: none;
border: none;
width: 20px;
height: 20px;
margin: 0 10px;
& > .toggle {
display: none;
box-sizing: border-box;
}
text-align: inherit;
& svg {
cursor: pointer;
opacity: 0;
position: absolute;
width: 20px;
height: 20px;
@ -29,20 +27,20 @@
color-scheme: light;
}
:root[saved-theme="dark"] .toggle ~ label {
:root[saved-theme="dark"] .darkmode {
& > #dayIcon {
opacity: 0;
display: none;
}
& > #nightIcon {
opacity: 1;
display: inline;
}
}
:root .toggle ~ label {
:root .darkmode {
& > #dayIcon {
opacity: 1;
display: inline;
}
& > #nightIcon {
opacity: 0;
display: none;
}
}