aタグとlabelタグのクリックの競合について

Question

<!-- A -->
<label for="radio1">
  <a href="https://www.google.co.jp" target="_blank">aiueo</a>
</label>
<input type="radio" id="radio1" name="btn">

<!-- B -->
<a href="https://www.google.co.jp" target="_blank">
  <label for="radio2">AIUEO</label>
</a>
<input type="radio" id="radio2" name="btn">

Aのコードでは、ラジオボタンがチェックされませんが、別タブでGoogleのトップページが開きます。Bのコードでは、ラジオボタンはチェックされますが、Googleのページは開きません。

ラジオボタンがチェックされて、かつ、Googleのページが開くようにすることはかのうでしょうか？

Answer 1

a要素はその内容として interactive content(対話型コンテンツ) を含めることができないので、そもそも後者はHTMLとして成り立ちません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

前者もどうかとは思うのですが仕様上は可能のようなので、次のようなスクリプトを書いてみてはどうでしょうか？

document.querySelector('label[for]>a').addEventListener('click', function(event) {
  document.getElementById(event.currentTarget.parentNode.htmlFor).click();
}, false);

Answer 2

タグにより優先と言うのがあるのでHTMLのみでの同居は難しいように思います。
AでOnClick時にラジオボタンにチェックするか
BでOnClick時にリンクを開くようにするか
どちらかで対応されてはいかがでしょうか。

HTML的にはAの方が良さそうですが。