mirror of
https://github.com/alrayyes/wiki.git
synced 2025-06-11 07:53:39 +00:00
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.
This commit is contained in:
parent
12904ab796
commit
27a41abb62
6 changed files with 39 additions and 4 deletions
quartz/components
|
@ -26,7 +26,13 @@ const TableOfContents: QuartzComponent = ({
|
|||
|
||||
return (
|
||||
<div class={classNames(displayClass, "toc")}>
|
||||
<button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
|
||||
<button
|
||||
type="button"
|
||||
id="toc"
|
||||
class={fileData.collapseToc ? "collapsed" : ""}
|
||||
aria-controls="toc-content"
|
||||
aria-expanded={!fileData.collapseToc}
|
||||
>
|
||||
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue