Могу ли я избежать инертности при использовании HTML инертного свойства? ⇐ Html

[Anonymous]

Я строю веб -компонент, который содержит элемент . Я открываю диалог с htmladialogelement.showmodal () , который перемещает диалог в верхний слой. Некоторые из содержимого диалога несовместимы на высшем уровне, а именно Google Recaptcha, который отображается под диалоговым окном. С точки зрения удобства использования, я думаю, что это приемлемо, но с точки зрения доступности, я бы очень хотел бы получить преимущества, которые предоставляют htmladialogelement.showmodal () . А именно, делая все другие HTML -элементы инертными и, следовательно, неинтактивными и скрытыми от дерева доступности. И, используя атрибут или свойство Inert , я могу сделать определенную поддерею HTML Document Inert. Например, используя Chrome/Edge, со следующим HTML, я не могу взаимодействовать с элементами внутри диалога, если открыт с помощью .show () , когда я пытаюсь намеренно «инертность побега», устанавливая инерцию диалога на ложные. class = "Snippet">

Код: Выделить всё

const dialogOpener = document.getElementById("dialogOpener")
const modalOpener = document.getElementById("modalOpener")
const dialogCloser = document.getElementById("dialogCloser")
const testDialog = document.getElementById("testDialog")

dialogOpener.addEventListener("click", evt => {
testDialog.show()
document.body.inert = true
testDialog.inert = false
})

modalOpener.addEventListener("click", evt => {
testDialog.showModal()
// modal inertness is implicit, and the following lines have no effect:
document.body.inert = true
testDialog.inert = false
})

document.getElementById("dialogCloser").addEventListener("click", evt => {
testDialog.close()
document.body.inert = null
testDialog.inert = null
})< /code>
.showModal()
.show()



... Some [url=https://developer.mozilla.org/en-US/docs/Glossary/Top_layer]HTML Top Layer[/url]-incompatible content here


Close Dialog

Подробнее здесь: https://stackoverflow.com/questions/773 ... t-property