starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-02 18:58:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed lost tab focus on collapsible navigation

Browse Source
This commit is contained in:
squidfunk
2018-01-11 20:42:30 +01:00
committed by Martin Donath
parent 809f943240
commit 7a0c464ed6
11 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets/javascripts/components/Material/Nav/Collapse.js
View File

@@ -44,6 +44,18 @@ export default class Collapse {
this.el_ = ref
}
/**
* Initialize overflow and display for accessibility
*/
setup() {
const current = this.el_.getBoundingClientRect().height
/* Hidden links should not be focusable, so hide them when the navigation
is collapsed and set overflow so the outline is not cut off */
this.el_.style.display = current ? "block" : "none"
this.el_.style.overflow = current ? "visible" : "hidden"
}
/**
* Animate expand and collapse smoothly
*
@@ -54,6 +66,10 @@ export default class Collapse {
update() {
const current = this.el_.getBoundingClientRect().height
/* Reset overflow to CSS defaults */
this.el_.style.display = "block"
this.el_.style.overflow = ""
/* Expanded, so collapse */
if (current) {
this.el_.style.maxHeight = `${current}px`
@@ -89,6 +105,11 @@ export default class Collapse {
target.removeAttribute("data-md-state")
target.style.maxHeight = ""
/* Hidden links should not be focusable, so hide them when the navigation
is collapsed and set overflow so the outline is not cut off */
target.style.display = current ? "none" : "block"
target.style.overflow = current ? "hidden" : "visible"
/* Only fire once, so directly remove event listener */
target.removeEventListener("transitionend", end)
}
@@ -101,5 +122,7 @@ export default class Collapse {
reset() {
this.el_.dataset.mdState = ""
this.el_.style.maxHeight = ""
this.el_.style.display = ""
this.el_.style.overflow = ""
}
}