You don't know HTML: inert
Несколько лет назад в HTML появился глобальный атрибут inert. Он позволяет делать часть страницы инертной, то есть недоступной для взаимодействия. Это нужно при разработке модальных компонентов.
Например, модальный диалог согласно рекомендациям должен отображаться поверх страницы, замыкать в себе фокус и не давать взаимодействовать со страницей. Чтобы реализовать такое поведение, нужно изрядно постараться и написать много Javascript.
Атрибут inert решает задачу более простым способом. Это глобальный атрибут, поэтому его можно добавить к любому элементу. Когда атрибут установлен, происходит следующее:
- все дочерние интерактивные элементы становятся недоступными для взаимодействия, как будто для них установлено свойство pointer-events: none
- все дочерние интерактивные элементы пропадают из последовательности табуляции, как будто для них установлен атрибут tabindex="-1"
- элемент вместе со своими дочерними элементами скрывается из дерева доступности, как будто для них установлен атрибут aria-hidden="true".
ссылка
Удалить
Вы действительно хотите удалить запись?
Да
Нет
Таким образом, пользователь не сможет взаимодействовать с инертной частью страницы, а скринридеры не будут её зачитывать.
#ydkhtml
Несколько лет назад в HTML появился глобальный атрибут inert. Он позволяет делать часть страницы инертной, то есть недоступной для взаимодействия. Это нужно при разработке модальных компонентов.
Например, модальный диалог согласно рекомендациям должен отображаться поверх страницы, замыкать в себе фокус и не давать взаимодействовать со страницей. Чтобы реализовать такое поведение, нужно изрядно постараться и написать много Javascript.
Атрибут inert решает задачу более простым способом. Это глобальный атрибут, поэтому его можно добавить к любому элементу. Когда атрибут установлен, происходит следующее:
- все дочерние интерактивные элементы становятся недоступными для взаимодействия, как будто для них установлено свойство pointer-events: none
- все дочерние интерактивные элементы пропадают из последовательности табуляции, как будто для них установлен атрибут tabindex="-1"
- элемент вместе со своими дочерними элементами скрывается из дерева доступности, как будто для них установлен атрибут aria-hidden="true".
ссылка
Удалить
Вы действительно хотите удалить запись?
Да
Нет
Таким образом, пользователь не сможет взаимодействовать с инертной частью страницы, а скринридеры не будут её зачитывать.
#ydkhtml