#фишка дня
Как предотвратить взаимодействие пользователя с элементом?
pointer-events: none — скажете вы.
Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.
Благо, есть решение!
Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?
Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).
То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).
Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.
Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB
#inert #attribute #html #a11y
