_content: fix for dropdown to not autoopen when receive focus
Change-Id: Iee3897aa4f5c1311141411ec44193751cb516e4d Reviewed-on: https://go-review.googlesource.com/c/website/+/509857 Auto-Submit: Jamal Carvalho <jamal@golang.org> TryBot-Result: Gopher Robot <gobot@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> Reviewed-by: Jamal Carvalho <jamal@golang.org>
This commit is contained in:
Родитель
57cac55d24
Коммит
647c4b2c5a
|
@ -24,8 +24,8 @@ window.initFuncs = [];
|
||||||
}
|
}
|
||||||
// prevents menus that have been tabbed into from staying open
|
// prevents menus that have been tabbed into from staying open
|
||||||
// when you hover over another menu
|
// when you hover over another menu
|
||||||
e.target.focus();
|
e.target.classList.remove('forced-closed');
|
||||||
e.target.blur();
|
e.target.classList.add('forced-open');
|
||||||
});
|
});
|
||||||
const toggleForcedOpen = e => {
|
const toggleForcedOpen = e => {
|
||||||
const isForced = e.target.classList.contains('forced-open');
|
const isForced = e.target.classList.contains('forced-open');
|
||||||
|
@ -43,16 +43,17 @@ window.initFuncs = [];
|
||||||
} else {
|
} else {
|
||||||
target.classList.remove('forced-closed');
|
target.classList.remove('forced-closed');
|
||||||
target.classList.add('forced-open');
|
target.classList.add('forced-open');
|
||||||
target.focus();
|
|
||||||
target.addEventListener('blur', e =>
|
|
||||||
target.classList.remove('forced-open')
|
|
||||||
);
|
|
||||||
target.parentNode.removeEventListener('mouseout', () => {
|
target.parentNode.removeEventListener('mouseout', () => {
|
||||||
target.classList.remove('forced-closed');
|
target.classList.remove('forced-closed');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
e.target.focus();
|
||||||
};
|
};
|
||||||
menuItemHover.addEventListener('click', toggleForcedOpen);
|
menuItemHover.addEventListener('click', toggleForcedOpen);
|
||||||
|
menuItemHover.addEventListener('focus', e => {
|
||||||
|
e.target.classList.add('forced-closed');
|
||||||
|
e.target.classList.remove('forced-open');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// ensure desktop submenus are closed when esc is pressed
|
// ensure desktop submenus are closed when esc is pressed
|
||||||
|
@ -61,6 +62,7 @@ window.initFuncs = [];
|
||||||
header.addEventListener('keyup', e => {
|
header.addEventListener('keyup', e => {
|
||||||
if (e.key === 'Escape') {
|
if (e.key === 'Escape') {
|
||||||
e.target.blur();
|
e.target.blur();
|
||||||
|
e.target.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -65,9 +65,12 @@
|
||||||
{{- $currentPage := .}}
|
{{- $currentPage := .}}
|
||||||
{{- range $menus.main}}
|
{{- range $menus.main}}
|
||||||
<li class="Header-menuItem {{if strings.HasPrefix $currentPage.URL .url}} Header-menuItem--active{{end}}">
|
<li class="Header-menuItem {{if strings.HasPrefix $currentPage.URL .url}} Header-menuItem--active{{end}}">
|
||||||
<a href="{{if .children}}#{{else}}{{.url}}{{end}}" {{if .children}}aria-haspopup="true" class="js-desktop-menu-hover"{{end}}>
|
<a href="{{if .children}}#{{else}}{{.url}}{{end}}" {{if .children}} class="js-desktop-menu-hover"{{end}} aria-label={{.name}} aria-describedby="dropdown-description">
|
||||||
{{.name}} {{if .children}}<i class="material-icons">arrow_drop_down</i>{{end}}
|
{{.name}} {{if .children}}<i class="material-icons" aria-hidden="true">arrow_drop_down</i>{{end}}
|
||||||
</a>
|
</a>
|
||||||
|
<div class="screen-reader-only" id="dropdown-description" hidden>
|
||||||
|
Press Enter to activate/deactivate dropdown
|
||||||
|
</div>
|
||||||
{{- if .children}}
|
{{- if .children}}
|
||||||
<ul class="Header-submenu js-desktop-submenu-hover" aria-label="submenu">
|
<ul class="Header-submenu js-desktop-submenu-hover" aria-label="submenu">
|
||||||
{{- range .children}}
|
{{- range .children}}
|
||||||
|
|
Загрузка…
Ссылка в новой задаче