Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
We need all our sites to pass WCAG2.1 and a lot of our sites use Umbraco Forms.
These forms are failing our checks as the Input controls have an invalid name attribute or do not have a label.
<input type="hidden" name="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd"
class="datepickerfieldshadow" value="" />
<input type="text" name="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd" id="50a7c4d5-35e0-4f4f-f6fd-ef4b333d26fd_1"
class="datepickerfield" value="" />
This only happens to DateTimePickers - as the visible Id is appended with a _1 to prevent duplicate Ids with the Hidden Input. - can we swap the _1 to the hidden input?
Is there something that we can do to update the input controls so that this can pass the Total validator checks?
Thanks for all your help
You can override the markup of the form fields and make the necessary changes there to be compliant.
Depending on which version of Umbraco Forms you are using there are two different ways:
Thanks for this - its really helpful and exactly what we are looking for.
Can I double check the ID of the Datepicker? it seems to be appending a _1 to the ID. Is it OK to swap this ID with the Hidden field or does the ID of the visible "input" field need to be the one with the Underscore? The reason for this is that the Label For Id has nothing to reference to and Total validator is throwing an accessibility error.
Yes, I think it does use it to set the hidden field value when the date changes. Have a look in the Views\Partials\Forms\DatePicker.cshtml view.
But I guess you could change that bit of code to append the _1 part instead, if you decide to swap the IDs round?
so I have modified Form.cshtml to change label instead of input view and accessibility pass the test
//accessibility fix umbraco forms bug
// cannot modify input so modify label instead
var fId = (f.FieldTypeName.ToLower() == "date") ? (f.Id) + "_1" : f.Id;
<label for="@fId" class="col-12 control-label umbraco-forms-label">
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted