From 5942ab5eb165ee2e759174e297148a40dd855920 Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Fri, 11 Jun 2021 07:39:12 +0100
Subject: Refs #32338 -- Made RadioSelect/CheckboxSelectMultiple render in
 <div> tags.

This improves accessibility for screen reader users.
---
 docs/ref/forms/widgets.txt | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

(limited to 'docs/ref/forms')

diff --git a/docs/ref/forms/widgets.txt b/docs/ref/forms/widgets.txt
index 48e83a2da9..970e30456c 100644
--- a/docs/ref/forms/widgets.txt
+++ b/docs/ref/forms/widgets.txt
@@ -703,14 +703,19 @@ that specifies the template used to render each choice. For example, for the
     * ``option_template_name``: ``'django/forms/widgets/radio_option.html'``
 
     Similar to :class:`Select`, but rendered as a list of radio buttons within
-    ``<li>`` tags:
+    ``<div>`` tags:
 
     .. code-block:: html
 
-        <ul>
-          <li><input type="radio" name="..."></li>
+        <div>
+          <div><input type="radio" name="..."></div>
           ...
-        </ul>
+        </div>
+
+    .. versionchanged:: 4.0
+
+        So they are announced more concisely by screen readers, radio buttons
+        were changed to render in ``<div>`` tags.
 
     For more granular control over the generated markup, you can loop over the
     radio buttons in the template. Assuming a form ``myform`` with a field
@@ -788,10 +793,10 @@ that specifies the template used to render each choice. For example, for the
         </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
-    ``<li>`` tags, as above.
+    includes ``{{ myform.beatles }}`` -- they'll be output in a ``<div>`` with
+    ``<div>`` tags, as above.
 
-    The outer ``<ul>`` container receives the ``id`` attribute of the widget,
+    The outer ``<div>`` container receives the ``id`` attribute of the widget,
     if defined, or :attr:`BoundField.auto_id` otherwise.
 
     When looping over the radio buttons, the ``label`` and ``input`` tags include
@@ -810,14 +815,19 @@ that specifies the template used to render each choice. For example, for the
 
     .. code-block:: html
 
-        <ul>
-          <li><input type="checkbox" name="..." ></li>
+        <div>
+          <div><input type="checkbox" name="..." ></div>
           ...
-        </ul>
+        </div>
 
-    The outer ``<ul>`` container receives the ``id`` attribute of the widget,
+    The outer ``<div>`` container receives the ``id`` attribute of the widget,
     if defined, or :attr:`BoundField.auto_id` otherwise.
 
+    .. versionchanged:: 4.0
+
+        So they are announced more concisely by screen readers, checkboxes were
+        changed to render in ``<div>`` tags.
+
 Like :class:`RadioSelect`, you can loop over the individual checkboxes for the
 widget's choices. Unlike :class:`RadioSelect`, the checkboxes won't include the
 ``required`` HTML attribute if the field is required because browser validation
-- 
cgit v1.3