Andrew
2024-08-24 4c9e8601504f76dcc3c273ea8ad1862df432b7b4
refs
author Andrew <80933354+ndrooo@users.noreply.github.com>
Saturday, August 24, 2024 20:33 +0000
committer GitHub <noreply@github.com>
Saturday, August 24, 2024 20:33 +0000
commit4c9e8601504f76dcc3c273ea8ad1862df432b7b4
tree c0ab2af445bf70dfa826f50a17d9abf4f23e502b tree | zip | gz
parent 46b63b68bf02491f841a794d72f3def6649ec72f view | diff
a11y(darkmode): use a button for the theme toggle (#1335)

* 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>
3 files modified
104 ■■■■ changed files
quartz/components/Darkmode.tsx 67 ●●●● diff | view | raw | blame | history
quartz/components/scripts/darkmode.inline.ts 13 ●●●●● diff | view | raw | blame | history
quartz/components/styles/darkmode.scss 24 ●●●● diff | view | raw | blame | history