button要素での画面遷移

code:sample.html

// bad case

<button>

<a href="hoge">Link</a>

</button>

button要素は、インタラクティブな要素を子孫に持ってはいけない。という仕様

firefoxはこの仕様に従っており、遷移しない(現在の仕様だと遷移してそう)

chrome, safari, edgeは遷移する

code:インタラクティブな要素

a

audio

button

details

embed

iframe

img

input

keygen

label

menu

object

select

textarea

video

生じた問題

Tabフォーカス移動するときに、同じボタンでもaタグとbuttonタグで別々にフォーカスされる

buttonで何かしら処理を行った後で画面遷移したかったが、aタグにカーソルが当たっていおらず、buttonだけに当たっている場合、処理だけ行われて画面遷移しない

解決策

aタグを使う場合

aタグにbuttonっぽいスタイルをあてる

buttonを使う場合

aタグは子孫に含めない

useRouterなどを使って画面遷移する

(⌘+クリックでの別タブで開くことやURLのコピーはできない)

muiを使っている場合

href属性を書けば見た目はボタンのaタグになる

参考