accessibility: support hiding menus through escape keys (#40930)
This commit is contained in:
parent
bdf7e82f31
commit
202c614849
|
@ -422,4 +422,20 @@ $(function() {
|
|||
paginate_cards($(elem));
|
||||
}
|
||||
});
|
||||
// accessibililty enhancements:
|
||||
// support for hiding some elements (such as submenus)
|
||||
// when the escape key is pressed
|
||||
$(document).keydown(function(e) {
|
||||
if (e.key === "Escape") {
|
||||
$(".hide-on-escape:visible").hide()
|
||||
}
|
||||
});
|
||||
// and ensure the elements can be viewed again
|
||||
// on subsequent hover/focus
|
||||
function reset_hidden_elements(event) {
|
||||
var root_element = $(event.target).closest('.contains-hidden-elements')
|
||||
$(root_element).find('.hide-on-escape').css({display: ''})
|
||||
}
|
||||
$('.contains-hidden-elements').mouseenter(reset_hidden_elements, null)
|
||||
$('.contains-hidden-elements').focusin(reset_hidden_elements)
|
||||
});
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
{% load i18n %}
|
||||
{% if menuitems %}
|
||||
<ul class="{{ is_submenu|yesno:"submenu,menu" }}">
|
||||
<ul class="{{ is_submenu|yesno:"submenu,menu" }} {% if is_submenu %}hide-on-escape{% endif %}">
|
||||
{% spaceless %}
|
||||
{% for menuitem in menuitems %}
|
||||
<li data-menu-page-id="{{ menuitem.page.id }}" class="{{ is_submenu|yesno:"submenu,menu" }}--item menu-{{ menuitem.page.slug }} {% if menuitem.selected %}selected{% endif %}">
|
||||
<li data-menu-page-id="{{ menuitem.page.id }}" class="{% if depth > 1 %}contains-hidden-elements{% endif %} {{ is_submenu|yesno:"submenu,menu" }}--item menu-{{ menuitem.page.slug }} {% if menuitem.selected %}selected{% endif %}">
|
||||
<a
|
||||
{% if menuitem.selected %}title="{{ menuitem.page.title }} - {% trans "active page" %}"{% endif %}
|
||||
href="{% page_absolute_url menuitem.page %}"
|
||||
|
|
Loading…
Reference in New Issue