問題タブ [details-tag]

詳細タグ内に必要なチェックボックスがあるフォームがあります。ユーザーがチェックボックスをオンにせずにサイトを送信しようとすると、警告が表示されます。

ただし、ユーザーが詳細を折りたたんだ場合、警告は表示されず、送信は機能しません。これを機能させるためのきれいなhtmlの方法はありますか、それともjavascriptを使用する必要がありますか? 基本的に、ブラウザが詳細を自動的に開き、チェックボックスに警告を表示することを期待しています。

問題については、このデモを参照して ください https://jsfiddle.net/1jwdm8ov/

上記の HTML コードを Firefox ブラウザで開いています。「This」リンクをクリックすると、Firefox は詳細ページに正しくスクロールします。

しかし、タイトル「This is the summary」の左にある三角形をクリックして、詳細 (アンカーのある行を含む) が閉じられる (消える) と、リンクをクリックしても Firefox はアンカーまでスクロールしなくなります。

Firefox は、少なくとも詳細が閉じられている場合でもアンカーを非表示にする表示された概要までスクロールすることを期待していましたが、理想的には詳細を開いてアンカーまで正確にスクロールすることも期待していました。

details-summary ブロックの閉じた (折りたたまれた) 詳細でアンカーへのスクロールを可能にする方法 (HTML? css? どのブラウザを使用していますか? その他?) はありますか?

私の質問は、詳細/要約を展開するときにスクロールしてアンカーに関連していますか? 、ただし、JavaScript を使用しないソリューションが存在する場合は、それをお勧めします。

ソリューションをテストするには、「ここに 1 ページ以上のテキスト」を実際の 1 ページ以上のテキストに置き換えてください。