django-crispy-forms · smithdc1 · Oct 22, 2023 · Oct 22, 2023
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -17,6 +17,8 @@ jobs:
         - '3.8'
         - '3.9'
         - '3.10'
+        - '3.11'
+        - '3.12'
 
     steps:
     - uses: actions/checkout@v4
@@ -38,7 +40,7 @@ jobs:
         ENV_PREFIX=$(tr -C -d "0-9" <<< "${{ matrix.python-version }}")
         TOXENV=$(tox --listenvs | grep "^py$ENV_PREFIX" | tr '\n' ',') tox
     - name: Run lint
-      if: ${{ matrix.python-version == '3.9' }}
+      if: ${{ matrix.python-version == '3.12' }}
       run: |
         tox -e lint
     - name: Upload coverage to Codecov

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -16,6 +16,8 @@ jobs:
         - '3.8'
         - '3.9'
         - '3.10'
+        - '3.11'
+        - '3.12'
 
     steps:
     - uses: actions/checkout@v4
@@ -37,7 +39,7 @@ jobs:
         ENV_PREFIX=$(tr -C -d "0-9" <<< "${{ matrix.python-version }}")
         TOXENV=$(tox --listenvs | grep "^py$ENV_PREFIX" | tr '\n' ',') tox
     - name: Run lint
-      if: ${{ matrix.python-version == '3.9' }}
+      if: ${{ matrix.python-version == '3.12' }}
       run: |
         tox -e lint
 
@@ -49,7 +51,7 @@ jobs:
     - name: Set up Python
       uses: actions/setup-python@v3
       with:
-        python-version: '3.9'
+        python-version: '3.12'
     - name: Install dependencies
       run: |
         pip install build twine

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # CHANGELOG for crispy-tailwind
 
 ## Next Release (tbc)
+* Added support for Django 5.0 (#142)
+* Added support for Python 3.11 and 3.12 (#142)
 * Added support for Python 3.10 (#116)
 * Added support for Django 4.2 (#135)
 * Dropped support for Django 2.2 (#116)

diff --git a/crispy_tailwind/templates/tailwind/layout/help_text.html b/crispy_tailwind/templates/tailwind/layout/help_text.html
@@ -1,7 +1,7 @@
 {% if field.help_text %}
     {% if help_text_inline %}
-        <p id="hint_{{ field.auto_id }}" class="text-gray-600">{{ field.help_text|safe }}</p>x
+        <p {% if field.id_for_label %}id="{{ field.id_for_label }}_helptext" {% endif %}class="text-gray-600">{{ field.help_text|safe }}</p>x
     {% else %}
-        <small id="hint_{{ field.auto_id }}" class="text-gray-600">{{ field.help_text|safe }}</small>
+        <small {% if field.id_for_label %}id="{{ field.id_for_label }}_helptext" {% endif %}class="text-gray-600">{{ field.help_text|safe }}</small>
     {% endif %}
 {% endif %}
diff --git a/pyproject.toml b/pyproject.toml
@@ -14,13 +14,16 @@ classifiers=[
     "Environment :: Web Environment",
     "Framework :: Django",
     "Framework :: Django :: 4.2",
+    "Framework :: Django :: 5.0",
     "License :: OSI Approved :: MIT License",
     "Operating System :: OS Independent",
     "Programming Language :: JavaScript",
     "Programming Language :: Python :: 3",
     "Programming Language :: Python :: 3.8",
     "Programming Language :: Python :: 3.9",
     "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "Programming Language :: Python :: 3.12",
     "Topic :: Internet :: WWW/HTTP",
     "Topic :: Internet :: WWW/HTTP :: Dynamic Content",
     "Topic :: Software Development :: Libraries :: Python Modules",

diff --git a/tests/results/filter/crispy_filter.html b/tests/results/filter/crispy_filter.html
@@ -7,9 +7,9 @@
             *</span> </label>
     <input type="text" name="email" maxlength="30" class="textinput textInput inputtext w-full rounded-lg
             border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block
-            leading-normal"
+            leading-normal" aria-describedby="id_email_helptext"
            required id="id_email">
-    <small id="hint_id_email" class="text-gray-600">Insert your email</small></div>
+    <small id="id_email_helptext" class="text-gray-600">Insert your email</small></div>
 
 <div id="div_id_password1" class="mb-3">
     <label for="id_password1" class="block text-gray-700 text-sm font-bold mb-2">password<span

diff --git a/tests/results/filter/crispy_filter_lt50.html b/tests/results/filter/crispy_filter_lt50.html
@@ -0,0 +1,77 @@
+<div id="div_id_is_company" class="mb-3">
+    <label for="id_is_company" class="block text-gray-700 text-sm font-bold mb-2">company</label>
+    <input type="checkbox" name="is_company" class="checkboxinput " id="id_is_company"></div>
+
+<div id="div_id_email" class="mb-3">
+    <label for="id_email" class="block text-gray-700 text-sm font-bold mb-2">email<span class="asteriskField">
+            *</span> </label>
+    <input type="text" name="email" maxlength="30" class="textinput textInput inputtext w-full rounded-lg
+            border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block
+            leading-normal"
+           required id="id_email">
+    <small id="id_email_helptext" class="text-gray-600">Insert your email</small></div>
+
+<div id="div_id_password1" class="mb-3">
+    <label for="id_password1" class="block text-gray-700 text-sm font-bold mb-2">password<span
+            class="asteriskField">*</span>
+    </label>
+    <input type="password" name="password1" maxlength="30"
+           class="passwordinput w-full rounded-lg
+            border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block
+            leading-normal" required id="id_password1">
+</div>
+
+<div id="div_id_password2" class="mb-3">
+    <label for="id_password2" class="block text-gray-700 text-sm font-bold mb-2">
+        re-enter password<span class="asteriskField">*</span> </label>
+    <input type="password" name="password2" maxlength="30"
+           class="passwordinput w-full rounded-lg
+            border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block
+            leading-normal"
+           required id="id_password2"></div>
+
+<div id="div_id_first_name" class="mb-3">
+    <label for="id_first_name" class="block text-gray-700 text-sm font-bold mb-2">
+        first name<span class="asteriskField">*</span> </label>
+    <input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext w-full
+            rounded-lg border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none
+            px-4 block leading-normal"
+    required id="id_first_name">
+</div>
+
+<div id="div_id_last_name" class="mb-3">
+    <label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2">
+        last name<span class="asteriskField">*</span> </label>
+    <input type="text" name="last_name" maxlength="5"
+           class="textinput textInput inputtext w-full rounded-lg border appearance-none py-2 border-gray-300
+            bg-white text-gray-700 focus:outline-none px-4 block leading-normal" required id="id_last_name">
+</div>
+
+<div id="div_id_datetime_field" class="mb-3">
+    <label class="block text-gray-700 text-sm font-bold mb-2" for="">
+        date time<span class="asteriskField">*</span> </label>
+    <input type="text" name="datetime_field_0"
+           class="dateinput rounded-lg focus:outline border appearance-none py-2 mr-2 border-gray-300 bg-white
+            text-gray-700 focus:outline-none px-4 leading-normal" required id="id_datetime_field_0">
+    <input type="text" name="datetime_field_1" class="timeinput rounded-lg focus:outline border
+            appearance-none py-2 mr-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4
+            leading-normal" required id="id_datetime_field_1"></div>
+
+<div id="div_id_tos_accepted" class="mb-3">
+    <label for="id_tos_accepted" class="block text-gray-700 text-sm font-bold mb-2">
+        terms of service<span class="asteriskField">*</span> </label>
+    <div class="mb-3">
+        <div class="relative">
+            <select class="bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full
+            appearance-none leading-normal text-gray-700" name="tos_accepted">
+                <option value="accepted">Accepted</option>
+                <option value="not_accepted">Not accepted</option>
+            </select>
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/tests/results/helper/charfield_failing.html b/tests/results/helper/charfield_failing.html
@@ -1,7 +1,7 @@
 <form method="post">
     <div id="div_id_name" class="mb-3">
         <label for="id_name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
-        <input type="text" name="name" class="textinput textInput inputtext focus:outline-none w-full bg-white border-red-500 px-4 block rounded-lg text-gray-700 appearance-none py-2 leading-normal border" required id="id_name" />
+        <input aria-invalid="true" type="text" name="name" class="textinput textInput inputtext focus:outline-none w-full bg-white border-red-500 px-4 block rounded-lg text-gray-700 appearance-none py-2 leading-normal border" required id="id_name" />
         <p id="error_1_id_name" class="text-red-500 text-xs italic"><strong>This field is required.</strong></p>
     </div>
 </form>
diff --git a/tests/results/helper/charfield_failing_lt50.html b/tests/results/helper/charfield_failing_lt50.html
@@ -0,0 +1,7 @@
+<form method="post">
+    <div id="div_id_name" class="mb-3">
+        <label for="id_name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
+        <input type="text" name="name" class="textinput textInput inputtext focus:outline-none w-full bg-white border-red-500 px-4 block rounded-lg text-gray-700 appearance-none py-2 leading-normal border" required id="id_name" />
+        <p id="error_1_id_name" class="text-red-500 text-xs italic"><strong>This field is required.</strong></p>
+    </div>
+</form>
diff --git a/tests/results/helper/col_row.html b/tests/results/helper/col_row.html
@@ -33,8 +33,9 @@
                 class="textinput textInput inputtext border w-full bg-white appearance-none block focus:outline-none leading-normal py-2 border-gray-300 text-gray-700 rounded-lg px-4"
                 required
                 id="id_email"
+                aria-describedby="id_email_helptext"
             />
-            <small id="hint_id_email" class="text-gray-600">Insert your email</small>
+            <small id="id_email_helptext" class="text-gray-600">Insert your email</small>
         </div>
     </div>
 </div>
diff --git a/tests/results/helper/col_row_lt50.html b/tests/results/helper/col_row_lt50.html
@@ -0,0 +1,40 @@
+<div class="flex flex-row">
+    <div class="px-2">
+        <div id="div_id_first_name" class="mb-3">
+            <label for="id_first_name" class="block text-gray-700 text-sm font-bold mb-2"> first name<span class="asteriskField">*</span> </label>
+            <input
+                type="text"
+                name="first_name"
+                maxlength="5"
+                class="textinput textInput inputtext border w-full bg-white appearance-none block focus:outline-none leading-normal py-2 border-gray-300 text-gray-700 rounded-lg px-4"
+                required
+                id="id_first_name"
+            />
+        </div>
+        <div id="div_id_last_name" class="mb-3">
+            <label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2"> last name<span class="asteriskField">*</span> </label>
+            <input
+                type="text"
+                name="last_name"
+                maxlength="5"
+                class="textinput textInput inputtext border w-full bg-white appearance-none block focus:outline-none leading-normal py-2 border-gray-300 text-gray-700 rounded-lg px-4"
+                required
+                id="id_last_name"
+            />
+        </div>
+    </div>
+    <div class="px-2">
+        <div id="div_id_email" class="mb-3">
+            <label for="id_email" class="block text-gray-700 text-sm font-bold mb-2"> email<span class="asteriskField">*</span> </label>
+            <input
+                type="text"
+                name="email"
+                maxlength="30"
+                class="textinput textInput inputtext border w-full bg-white appearance-none block focus:outline-none leading-normal py-2 border-gray-300 text-gray-700 rounded-lg px-4"
+                required
+                id="id_email"
+            />
+            <small id="id_email_helptext" class="text-gray-600">Insert your email</small>
+        </div>
+    </div>
+</div>
diff --git a/tests/results/helper/div.html b/tests/results/helper/div.html
@@ -8,7 +8,8 @@
             class="textinput textInput inputtext appearance-none border bg-white focus:outline-none py-2 w-full text-gray-700 border-gray-300 leading-normal block px-4 rounded-lg"
             required
             id="id_email"
+            aria-describedby="id_email_helptext"
         />
-        <small id="hint_id_email" class="text-gray-600">Insert your email</small>
+        <small id="id_email_helptext" class="text-gray-600">Insert your email</small>
     </div>
 </div>
diff --git a/tests/results/helper/div_lt50.html b/tests/results/helper/div_lt50.html
@@ -0,0 +1,14 @@
+<div class="test class">
+    <div id="div_id_email" class="mb-3">
+        <label for="id_email" class="block text-gray-700 text-sm font-bold mb-2"> email<span class="asteriskField">*</span> </label>
+        <input
+            type="text"
+            name="email"
+            maxlength="30"
+            class="textinput textInput inputtext appearance-none border bg-white focus:outline-none py-2 w-full text-gray-700 border-gray-300 leading-normal block px-4 rounded-lg"
+            required
+            id="id_email"
+        />
+        <small id="id_email_helptext" class="text-gray-600">Insert your email</small>
+    </div>
+</div>
diff --git a/tests/results/helper/fieldset.html b/tests/results/helper/fieldset.html
@@ -15,7 +15,8 @@
             class="textinput textInput inputtext text-gray-700 py-2 w-full px-4 block focus:outline-none leading-normal bg-white rounded-lg border border-gray-300 appearance-none"
             required
             id="id_email"
+            aria-describedby="id_email_helptext"
         />
-        <small id="hint_id_email" class="text-gray-600">Insert your email</small>
+        <small id="id_email_helptext" class="text-gray-600">Insert your email</small>
     </div>
 </fieldset>
diff --git a/tests/results/helper/fieldset_lt50.html b/tests/results/helper/fieldset_lt50.html
@@ -0,0 +1,21 @@
+<fieldset>
+    <legend class="block text-gray-700 font-bold mb-2">Text for the legend</legend>
+    <div id="div_id_is_company" class="mb-3">
+        <label for="id_is_company" class="block text-gray-700 text-sm font-bold mb-2">
+            company
+        </label>
+        <input type="checkbox" name="is_company" class=" checkboxinput" id="id_is_company" />
+    </div>
+    <div id="div_id_email" class="mb-3">
+        <label for="id_email" class="block text-gray-700 text-sm font-bold mb-2"> email<span class="asteriskField">*</span> </label>
+        <input
+            type="text"
+            name="email"
+            maxlength="30"
+            class="textinput textInput inputtext text-gray-700 py-2 w-full px-4 block focus:outline-none leading-normal bg-white rounded-lg border border-gray-300 appearance-none"
+            required
+            id="id_email"
+        />
+        <small id="id_email_helptext" class="text-gray-600">Insert your email</small>
+    </div>
+</fieldset>
diff --git a/tests/results/helper/formset.html b/tests/results/helper/formset.html
@@ -10,8 +10,9 @@
         maxlength="30"
         class="textinput textInput inputtext border appearance-none block rounded-lg border-gray-300 px-4 py-2 text-gray-700 w-full leading-normal bg-white focus:outline-none"
         id="id_form-0-email"
+        aria-describedby="id_form-0-email_helptext"
     />
-    <small id="hint_id_form-0-email" class="text-gray-600">Insert your email</small>
+    <small id="id_form-0-email_helptext"  class="text-gray-600">Insert your email</small>
 </div>
 <div id="div_id_form-1-email" class="mb-3">
     <label for="id_form-1-email" class="block text-gray-700 text-sm font-bold mb-2"> email<span class="asteriskField">*</span> </label>
@@ -21,6 +22,7 @@
         maxlength="30"
         class="textinput textInput inputtext border appearance-none block rounded-lg border-gray-300 px-4 py-2 text-gray-700 w-full leading-normal bg-white focus:outline-none"
         id="id_form-1-email"
+        aria-describedby="id_form-1-email_helptext"
     />
-    <small id="hint_id_form-1-email" class="text-gray-600">Insert your email</small>
+    <small id="id_form-1-email_helptext" class="text-gray-600">Insert your email</small>
 </div>
diff --git a/tests/results/helper/formset_errors.html b/tests/results/helper/formset_errors.html
@@ -21,6 +21,7 @@
         maxlength="3"
         class="textinput textInput inputtext leading-normal bg-white w-full focus:outline-none text-gray-700 py-2 appearance-none rounded-lg px-4 block border border-red-500"
         id="id_name-0-name"
+        aria-invalid="true"
     />
     <p id="error_1_id_name-0-name" class="text-red-500 text-xs italic"><strong>Ensure this value has at most 3 characters (it has 4).</strong></p>
 </div>

diff --git a/tests/results/helper/formset_errors_lt50.html b/tests/results/helper/formset_errors_lt50.html
@@ -0,0 +1,46 @@
+<div>
+    <input type="hidden" name="name-TOTAL_FORMS" value="3" id="id_name-TOTAL_FORMS" /> <input type="hidden" name="name-INITIAL_FORMS" value="0" id="id_name-INITIAL_FORMS" />
+    <input type="hidden" name="name-MIN_NUM_FORMS" value="0" id="id_name-MIN_NUM_FORMS" /> <input type="hidden" name="name-MAX_NUM_FORMS" value="0" id="id_name-MAX_NUM_FORMS" />
+</div>
+<div class="alert mb-4">
+    <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
+        Non Form Errors
+    </div>
+    <div class="border border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
+        <ul>
+            <li>Please submit at most 2 forms.</li>
+        </ul>
+    </div>
+</div>
+<div id="div_id_name-0-name" class="mb-3">
+    <label for="id_name-0-name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
+    <input
+        type="text"
+        name="name-0-name"
+        value="test"
+        maxlength="3"
+        class="textinput textInput inputtext leading-normal bg-white w-full focus:outline-none text-gray-700 py-2 appearance-none rounded-lg px-4 block border border-red-500"
+        id="id_name-0-name"
+    />
+    <p id="error_1_id_name-0-name" class="text-red-500 text-xs italic"><strong>Ensure this value has at most 3 characters (it has 4).</strong></p>
+</div>
+<div id="div_id_name-1-name" class="mb-3">
+    <label for="id_name-1-name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
+    <input
+        type="text"
+        name="name-1-name"
+        maxlength="3"
+        class="textinput textInput inputtext leading-normal bg-white w-full focus:outline-none text-gray-700 py-2 appearance-none rounded-lg px-4 block border border-gray-300"
+        id="id_name-1-name"
+    />
+</div>
+<div id="div_id_name-2-name" class="mb-3">
+    <label for="id_name-2-name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
+    <input
+        type="text"
+        name="name-2-name"
+        maxlength="3"
+        class="textinput textInput inputtext leading-normal bg-white w-full focus:outline-none text-gray-700 py-2 appearance-none rounded-lg px-4 block border border-gray-300"
+        id="id_name-2-name"
+    />
+</div>
diff --git a/tests/results/helper/formset_form_tag.html b/tests/results/helper/formset_form_tag.html
@@ -11,8 +11,9 @@
             maxlength="30"
             class="textinput textInput inputtext border border-gray-300 py-2 px-4 block rounded-lg appearance-none w-full leading-normal bg-white text-gray-700 focus:outline-none"
             id="id_form-0-email"
+            aria-describedby="id_form-0-email_helptext"
         />
-        <small id="hint_id_form-0-email" class="text-gray-600">Insert your email</small>
+        <small id="id_form-0-email_helptext" class="text-gray-600">Insert your email</small>
     </div>
     <div id="div_id_form-1-email" class="mb-3">
         <label for="id_form-1-email" class="block text-gray-700 text-sm font-bold mb-2"> email<span class="asteriskField">*</span> </label>
@@ -22,7 +23,8 @@
             maxlength="30"
             class="textinput textInput inputtext border border-gray-300 py-2 px-4 block rounded-lg appearance-none w-full leading-normal bg-white text-gray-700 focus:outline-none"
             id="id_form-1-email"
+            aria-describedby="id_form-1-email_helptext"
         />
-        <small id="hint_id_form-1-email" class="text-gray-600">Insert your email</small>
+        <small id="id_form-1-email_helptext" class="text-gray-600">Insert your email</small>
     </div>
 </form>