Evaluate using <fieldset> on ClearableFileInput

[Johannes Maron]

Howdy,

I noticed Django sometimes replaces the label with a fieldset tag. However, input labels are required as of WCAG 2.1; see also: ​https://www.w3.org/TR/WCAG21/#labels-or-instructions

Since Django must be WCAG2.2 AAA compliant, we might even want to patch all supported versions. However, this would mean shipping a rendering change in a bugfix.

My current impulse would be to enforce labels for WCAG compliance in 6.1, since shipping a rendering change within a bug fix release might result into more issues for users.

Cheers!
Joe

[Youngkwang Yang]

This looks similar to #36724 (fixed in PR ​https://github.com/django/django/pull/20080).
could you check which version you're testing with?

[Johannes Maron]

Thanks! Yes, that does resolve half of the issue. We have correct HTML, but the WCAG violation remains.

[Antoliny]

Thank you, Joe :)

Could you share an example of where the issue shows up?

My guess is that you’re referring to ClearableFileInput, which was recently switched to use a fieldset. When using the ClearableFileInput widget and an initial value is present, it appears that the input for changing the value does not have an associated label.

Since the original label was replaced by a legend, it seems that this part (the “changed” input) should now have an associated label.

Is this the case you had in mind?

[Jacob Walls]

Accepting as a 6.0 regression on the basis that when use_fieldset = True was used on ClearableFileInput in #35892, we didn't audit its template for the presence of a <label>. radio_option.html had a label, but clearable_file_input.html didn't.

Since the original label was replaced by a legend, it seems that this part (the “changed” input) should now have an associated label.

I agree -- thanks for the triage!!

When using the ClearableFileInput widget and an initial value is present, it appears that the input for changing the value does not have an associated label.

I don't think it depends on the initial value, see:

from django.db import models
from django import forms

class Upload(models.Model):
    file = models.FileField(
        verbose_name="CSV-File",
        upload_to="csv",
        help_text="File containing comma separated values.",
    )
    class Meta:
        app_label = "myapp.Upload"

class UploadForm(forms.ModelForm):
    class Meta:
        model = Upload
        fields = ["file"]

print(UploadForm().as_div())

5.2.9, with <label>:

<div>
    <label for="id_file">CSV-File:</label>

<div class="helptext" id="id_file_helptext">File containing comma separated values.</div>

<input type="file" name="file" required aria-describedby="id_file_helptext" id="id_file">
    
      
    
</div>

6.0, without:

<div>
    <fieldset aria-describedby="id_file_helptext">
  <legend for="id_file">CSV-File:</legend>

<div class="helptext" id="id_file_helptext">File containing comma separated values.</div>

<input type="file" name="file" required id="id_file"></fieldset>
    
      
    
</div>

We should target a fix for 6.0.1 on January 6.

[Jacob Walls]

No longer a release blocker given #36829 will revert the underlying change here in 6.0.1.

Re-framing as a new cleanup ticket as suggested in ticket:36829#comment:9 to explore using <fieldset> on ClearableFileInput:

• confirming that we want to do so
• changing the default template to have labels
• deciding if the use of fieldset should be conditional somehow

[Jacob Walls]

See ticket:32339#comment:2 for ideation around a deprecation path for widget rendering changes.