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));
|
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 %}
|
{% load i18n %}
|
||||||
{% if menuitems %}
|
{% if menuitems %}
|
||||||
<ul class="{{ is_submenu|yesno:"submenu,menu" }}">
|
<ul class="{{ is_submenu|yesno:"submenu,menu" }} {% if is_submenu %}hide-on-escape{% endif %}">
|
||||||
{% spaceless %}
|
{% spaceless %}
|
||||||
{% for menuitem in menuitems %}
|
{% 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
|
<a
|
||||||
{% if menuitem.selected %}title="{{ menuitem.page.title }} - {% trans "active page" %}"{% endif %}
|
{% if menuitem.selected %}title="{{ menuitem.page.title }} - {% trans "active page" %}"{% endif %}
|
||||||
href="{% page_absolute_url menuitem.page %}"
|
href="{% page_absolute_url menuitem.page %}"
|
||||||
|
|
Loading…
Reference in New Issue