accessibility: support hiding menus through escape keys (#40930)

This commit is contained in:
Agate 2022-08-30 11:49:28 +02:00
parent bdf7e82f31
commit 202c614849
2 changed files with 18 additions and 2 deletions

View File

@ -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)
});

View File

@ -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 %}"