У меня есть аккордеон, и я пытаюсь добавить функцию специальных возможностей только для пользователей программ чтения с экрана: если курсор пользователя находится внутри компонента и он нажимает клавишу со стрелкой вниз, он удаляет атрибут «инертный» следующего раздела. Пожалуйста, не спрашивайте, почему я делаю вещи инертными и т. д. или почему я просто не удаляю класс, который делает их инертными при нажатии клавиши. У меня есть причины. Я не уверен, что вы вообще сможете это сделать, если пользователь не сфокусирован на конкретном элементе внутри компонента, но в любом случае сейчас он не работает (сфокусирован он или нет):
$(document).ready(function(){
$(".axxs-accordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert", "");
document.querySelectorAll('.h-trigger').forEach(el => {
el.setAttribute("tabindex", "0");
el.addEventListener("keydown", e => {
if ([" ", "Enter"].includes(e.key)) {
e.target.click();
}
if (["ArrowDown"].includes(e.key)) {
$(this).next(".section.collapsed").removeAttr("inert", "");
}
});
});
$(".axxs-accordion").on("click", ".h-trigger.static", function () {
$(this).closest(".axxs-accordion").find(".h-trigger.active").removeClass("active").addClass("static");
$(this).closest(".axxs-accordion").find(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert", "");
$(this).removeClass("static").addClass("active");
$(this).next(".section.collapsed").removeClass("collapsed").addClass("expanded").removeAttr("inert", "");
});
$(".axxs-accordion").on("click", ".h-trigger.active", function () {
$(this).removeClass("active").addClass("static");
$(this).next(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert", "");
});
});
Heading
Here is some content with text and an image
Here is some more text
Heading 2
[list]
[*]List item 1
[*]List item 2
[/list]
У меня есть аккордеон, и я пытаюсь добавить функцию специальных возможностей только для пользователей программ чтения с экрана: если курсор пользователя находится внутри компонента и он нажимает клавишу со стрелкой вниз, он удаляет атрибут «инертный» следующего раздела. Пожалуйста, не спрашивайте, почему я делаю вещи инертными и т. д. или почему я просто не удаляю класс, который делает их инертными при нажатии клавиши. У меня есть причины. Я не уверен, что вы вообще сможете это сделать, если пользователь не сфокусирован на конкретном элементе внутри компонента, но в любом случае сейчас он не работает (сфокусирован он или нет): [code] $(document).ready(function(){ $(".axxs-accordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert", "");
document.querySelectorAll('.h-trigger').forEach(el => { el.setAttribute("tabindex", "0"); el.addEventListener("keydown", e => { if ([" ", "Enter"].includes(e.key)) { e.target.click(); } if (["ArrowDown"].includes(e.key)) { $(this).next(".section.collapsed").removeAttr("inert", ""); } }); });