≪ Today I learned. RSS購読
公開日
タグ
HTML
著者
ダーシノ(@bc_rikko)

ダイアログを開いたときのフォーカス

<dialog>でマークアップされていればautofocus属性があってもなくても関係なく最初のfocusableな要素にフォーカスされるみたいなので、現時点ではまだ考えなくても良さそう。

※モーダルを<div style="display: none;">とかでマークアップしている場合はフォーカスされないし、tabindexをちゃんと考えないとやばめ(非干渉うんぬん)

ボタンのみのダイアログ

<dialog id="confirm">
  <form>
    <button type="submit" autofocus>OK</button>
    <button type="button">Cancel</button>
  </form>
</dialog>

入力フィールドがあるダイアログ

<dialog id="input">
  <form>
    <input type="text" autofocus>
    <button type="submit">Submit</button>
  </form>
</dialog>