ボタンやフォームに対してフォーカスイベントが発生しないようにしたいときにはdisabled属性でコントロールできるわけですが、
「個々に属性を指定するのは中々煩わしい！！私はこの非表示にしている要素の中身全部をフォーカス当たらないようにしたいんだよ！！」
というような事もあると思います。
古いブラウザには対応していませんが、inert属性が便利です。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/inert
要素およびそのコンテンツをアクセシビリティツリーから除外することで、支援技術から隠します。
ここまでしてくれる！すばらしい！
ただ新しくできた属性なので、React + TypeScript で開発しているとデフォルトではまだ型定義がなくてエラーが出てしまいます。（少なくとも私の使ってるバージョンでは）ignoreはできる限りしたくないものです。一番いいのはおそらく定義を追加してやることですが、オブジェクトでラップすると回避できるという話を見つけました。下のような感じ。
<div {...{inert:(isActive ? undefined : '')}}>>
</div>もしかしたら最新バージョンではもういらない対応かもしれませんが、今後も新しい属性を使うときにはお世話になりそうです。