― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 9 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2024年4月17日(水) 17:16 
Firefox 124.0.2から125.0.1にアップグレードしたところ、動的に生成されたラジオボタンにタブインデックスが設定されているにもかかわらず、他のinput要素からTABキーでのフォーカス移動がなされなくなってしまいました。
何か設定を変更することで、修正することができるのでしょうか?

なお、動的に生成されたチェックボックスには問題なくフォーカスが移動します。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2024年4月17日(水) 21:00 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3742
tsuchiyama さん、EarlgreyTea と申します。

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

試したいので、動的にラジオボタンを表示するサイト(のURL)を教えてください。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2024年4月19日(金) 13:39 
下記のようなコードでお試しいただけると思います。

<!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>

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2024年4月19日(金) 20:43 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3742
tsuchiyama さん、テストコードありがとうございます。
後で試してみますね。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2024年4月20日(土) 07:51 
いろいろ試してみて、ラジオボタンがデフォルトでcheckedになっている場合は、クローンされたものでもフォーカスが移動するようです。
それでは予め選択されていることを見逃すといったことがありえるので、あまり芳しくない感じです。
もしこれが仕様なら、Ver.124以前に戻して欲しい。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2024年4月20日(土) 23:16 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3742
ご提示のテストコードを試すと、タブキーによるフォーカス移動は以下の通りでした。

  • 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 は非表示にしていた場合なので、(同じ原因ならばよいのですが)ここのケースも追加情報として上げたほうがいいのかもしれません。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2024年4月21日(日) 22:26 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3742
別バグで出しても重複になると思うので、Bug 1892529 に別のケースとして追加報告させていただきました。
テストHTMLは非表示とか無くしてクローンだけのシンプル(jQuery使わない)なものにしておきました。

なお、JavaScriptで要素を新規に追加するケースもやってみましたが、こちらは問題なかったです。
したがいまして、動的に生成ではなくクローンした場合ということになるかと思います。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2024年4月22日(月) 18:36 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3742
tsuchiyama さん
クローンして別の場所に追加したラジオボタンにタブキーでフォーカス移動できないのは、意図した挙動である旨の回答がありました。

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

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

ちなみに、ChromeやEdgeでは上と下のラジオボタンをタブで移動できました。
この挙動がいいのかどうかは私にはわかりません。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2024年4月22日(月) 23:47 
なるほど、未チェックのラジオボタンはグループの最初のボタンに移動する仕様、とのこと。
了解しました。

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

色々動いて下さり、ありがとうございました。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0


通報する
ページトップ
  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 9 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[6人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean