MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

動的に生成されたラジオボタンフォーカスが移動しない
https://forums.mozillazine.jp/viewtopic.php?f=2&t=22576		 ページ 1 ／ 1
作成者:  tsuchiyama [ 2024年4月17日(水) 17:16 ]
記事の件名:  動的に生成されたラジオボタンフォーカスが移動しない
Firefox 124.0.2から125.0.1にアップグレードしたところ、動的に生成されたラジオボタンにタブインデックスが設定されているにもかかわらず、他のinput要素からTABキーでのフォーカス移動がなされなくなってしまいました。
何か設定を変更することで、修正することができるのでしょうか？

なお、動的に生成されたチェックボックスには問題なくフォーカスが移動します。
作成者:  EarlgreyTea [ 2024年4月17日(水) 21:00 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
tsuchiyama さん、EarlgreyTea と申します。

tsuchiyama さんが書きました:
Firefox 124.0.2から125.0.1にアップグレードしたところ、動的に生成されたラジオボタンにタブインデックスが設定されているにもかかわらず、他のinput要素からTABキーでのフォーカス移動がなされなくなってしまいました。

試したいので、動的にラジオボタンを表示するサイト（のURL）を教えてください。
作成者:  tsuchiyama [ 2024年4月19日(金) 13:39 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
下記のようなコードでお試しいただけると思います。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#searchresulttemplate').hide();
});

$(document).on('click', '#search', function(){
$('#searchresult').html('');
$('#searchresulttemplate .elements')
.clone()
.appendTo('#searchresult')
.show();
});
</script>
<title>Test</title>
</head>

<body>
<article>
<section>
<p>ボタンをクリックしたときにフォームテンプレートを複製するスクリプトでは、Tabキーを押しても複製されたラジオボタンにフォーカスが移動しません。<br>
In a script that clones a form template when a button is clicked, pressing the tab key does not move the focus to the cloned radio button.</p>
</section>
<section>
<h1>Push Search Button</h1>
</section>
<section>
<div class="content">
<button id="search" tabindex="10000">Search</button>
<div id="searchresulttemplate">
<div class="elements">
<h2>Serach Result</h2>
<div class="detailinfo">
<p>
<input type="radio" name="sampler" value="A1" tabindex="10000"><label>A1</label>&nbsp;
<input type="radio" name="sampler" value="A2" tabindex="10000"><label>A2</label>
</p>
<p>
<input type="checkbox" name="samplec" value="B1" tabindex="10000"><label>B1</label>&nbsp;
<input type="checkbox" name="samplec" value="B2" tabindex="10000"><label>B2</label>
</p>
<p><input type="text" name="samplet" value="" class="nonent issuedate" tabindex="10000"></p>
</dl>
</div>
</div>
</div>
<div id="searchresult"></div>
</div>
</section>
</article>
</body>
</html>
作成者:  EarlgreyTea [ 2024年4月19日(金) 20:43 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
tsuchiyama さん、テストコードありがとうございます。
後で試してみますね。
作成者:  tsuchiyama [ 2024年4月20日(土) 07:51 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
いろいろ試してみて、ラジオボタンがデフォルトでcheckedになっている場合は、クローンされたものでもフォーカスが移動するようです。
それでは予め選択されていることを見逃すといったことがありえるので、あまり芳しくない感じです。
もしこれが仕様なら、Ver.124以前に戻して欲しい。
作成者:  EarlgreyTea [ 2024年4月20日(土) 23:16 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
ご提示のテストコードを試すと、タブキーによるフォーカス移動は以下の通りでした。

  • Firefox 124.0.2：「Search」→「A1」→「A2」→「B1」→「B2」
  • Firefox 125.0.1：「Search」→「B1」→「B2」
  • Chrome 124.0.6367.61：「Search」→「A1」→「B1」→「B2」
  • Edge 124.0.2478.51：「Search」→「A1」→「B1」→「B2」

Firefoxでの挙動の変化ですが、開発版（Nightly）の方で変化したビルドを調べたところ下記の変更によるものであることがわかりました。

Bug 1267488 Radio button group tabbing does not conform to WAI-ARIA design pattern when no button is checked

チェックされていないラジオボタンがチェックボックスと同様にグループ内でタブで移動する（Firefox 124.0.2）のは WAI-ARIAのRadio Group Patternに沿っていないため、最初のラジオボタンにだけ移動する（Chrome、Edge）挙動に修正しようとしたわけです。
しかし、テストコードにおいては最初のラジオボタンもフォーカスが当たりませんね。

この Bug 1267488 によるリグレッションだとして下記のバグが起票されているのを見つけました。

Bug 1892529 Unable to focus radio button with Tab key if the first radio button is hidden,

日本時間だと今日の06:42なので、このトピックを見ての起票なのかも。
ただ、Bug 1892529 は非表示にしていた場合なので、（同じ原因ならばよいのですが）ここのケースも追加情報として上げたほうがいいのかもしれません。
作成者:  EarlgreyTea [ 2024年4月21日(日) 22:26 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
別バグで出しても重複になると思うので、Bug 1892529 に別のケースとして追加報告させていただきました。
テストHTMLは非表示とか無くしてクローンだけのシンプル（jQuery使わない）なものにしておきました。

なお、JavaScriptで要素を新規に追加するケースもやってみましたが、こちらは問題なかったです。
したがいまして、動的に生成ではなくクローンした場合ということになるかと思います。
作成者:  EarlgreyTea [ 2024年4月22日(月) 18:36 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
tsuchiyama さん
クローンして別の場所に追加したラジオボタンにタブキーでフォーカス移動できないのは、意図した挙動である旨の回答がありました。

name属性が同じであるため（場所は離れていますが）同じグループとなり、チェックされていないラジオボタンはグループの最初のボタンに移動する仕様です。
同じグループなので矢印キーで上の2つと下の2つの4つのボタン間を移動できます。

テンプレートにする要素を同じドキュメント内に置いておいて、それをまるっとクローンして使うのはよろしく無いやり方のように思います。
JavaScript側で生成するようにしてはどうでしょうか。

ちなみに、ChromeやEdgeでは上と下のラジオボタンをタブで移動できました。
この挙動がいいのかどうかは私にはわかりません。
作成者:  tsuchiyama [ 2024年4月22日(月) 23:47 ]
記事の件名:  Re: 動的に生成されたラジオボタンフォーカスが移動しない
なるほど、未チェックのラジオボタンはグループの最初のボタンに移動する仕様、とのこと。
了解しました。

クローン前後でname属性値を変えてあげれば、フォーカスが移動できるか実験してみましたところ、希望通りに動きましたので、最悪そういった方法もとれるなということで納得致します。

色々動いて下さり、ありがとうございました。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/