From 32b366a86482b06db417aec67e42ca23d69da48a Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Fri, 14 May 2021 08:46:22 +0100
Subject: [3.2.x] Refs #32338 -- Improved accessibility of RadioSelect examples
 in docs.

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

Backport of d8c17aa10c7f41e692fb6f5d0bf2fab7a90b9374 from main
---
 docs/ref/forms/widgets.txt | 85 +++++++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 38 deletions(-)

(limited to 'docs/ref')

diff --git a/docs/ref/forms/widgets.txt b/docs/ref/forms/widgets.txt
index 76f7704690..bf38408368 100644
--- a/docs/ref/forms/widgets.txt
+++ b/docs/ref/forms/widgets.txt
@@ -727,28 +727,34 @@ that specifies the template used to render each choice. For example, for the
 
     .. code-block:: html+django
 
-        {% for radio in myform.beatles %}
-        <div class="myradio">
-            {{ radio }}
-        </div>
-        {% endfor %}
+        <fieldset>
+            <legend>{{ myform.beatles.label }}</legend>
+            {% for radio in myform.beatles %}
+            <div class="myradio">
+                {{ radio }}
+            </div>
+            {% endfor %}
+        </fieldset>
 
     This would generate the following HTML:
 
     .. code-block:: html
 
-        <div class="myradio">
-            <label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" required> John</label>
-        </div>
-        <div class="myradio">
-            <label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required> Paul</label>
-        </div>
-        <div class="myradio">
-            <label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" required> George</label>
-        </div>
-        <div class="myradio">
-            <label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required> Ringo</label>
-        </div>
+        <fieldset>
+            <legend>Radio buttons</legend>
+            <div class="myradio">
+                <label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" required> John</label>
+            </div>
+            <div class="myradio">
+                <label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required> Paul</label>
+            </div>
+            <div class="myradio">
+                <label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" required> George</label>
+            </div>
+            <div class="myradio">
+                <label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required> Ringo</label>
+            </div>
+        </fieldset>
 
     That included the ``<label>`` tags. To get more granular, you can use each
     radio button's ``tag``, ``choice_label`` and ``id_for_label`` attributes.
@@ -756,36 +762,39 @@ that specifies the template used to render each choice. For example, for the
 
     .. code-block:: html+django
 
-        {% for radio in myform.beatles %}
+        <fieldset>
+            <legend>{{ myform.beatles.label }}</legend>
+            {% for radio in myform.beatles %}
             <label for="{{ radio.id_for_label }}">
                 {{ radio.choice_label }}
                 <span class="radio">{{ radio.tag }}</span>
             </label>
-        {% endfor %}
+            {% endfor %}
+        </fieldset>
 
     ...will result in the following HTML:
 
     .. code-block:: html
 
-        <label for="id_beatles_0">
-            John
-            <span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" required></span>
-        </label>
-
-        <label for="id_beatles_1">
-            Paul
-            <span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required></span>
-        </label>
-
-        <label for="id_beatles_2">
-            George
-            <span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" required></span>
-        </label>
-
-        <label for="id_beatles_3">
-            Ringo
-            <span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required></span>
-        </label>
+        <fieldset>
+            <legend>Radio buttons</legend>
+            <label for="id_beatles_0">
+                John
+                <span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" required></span>
+            </label>
+            <label for="id_beatles_1">
+                Paul
+                <span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" required></span>
+            </label>
+            <label for="id_beatles_2">
+                George
+                <span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" required></span>
+            </label>
+            <label for="id_beatles_3">
+                Ringo
+                <span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" required></span>
+            </label>
+        </fieldset>
 
     If you decide not to loop over the radio buttons -- e.g., if your template
     includes ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>`` with
-- 
cgit v1.3