-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unnecessary aria-describedby attribute causes WCAG scans to fail #2094
Comments
I thought we fixed this with a recent release... |
Just looked into the issue and tried the provided steps, I see no Can you please provide a reproducible example so we can look into it. Thanks! |
Will close for now because of inactivity. Feel free to ask further questions/provide furhter information regarding this topic here. We can re-open if required. |
Hi, I too have been experiencing this problem. I have attached a couple of images each showing shows a couple of divs with label and associated input tags: before shows the values prior to populating the CompanyName field, and after (unsurprisingly) shows the values after I've tabbed out (note: there is a value in CompanyName so it is not in error) I hope this helps. jQuery validation: 1.17.0 |
I would like to get attention for this issue, caused by this line of code (please reopen):
That line makes it so aria-describedby is always added. When jquery tries to validate, after validation aria-describedby will be added regardless of the status of the errors, thus pointing to nothing when there are no errors. I tried to fix it myself, but im missing code, that may require some regex.
Hope this helps jQuery validation: 1.17.0 |
Hi @chrisgreen500 and @luisluix We will try to reinvestigate the issue another time later this week. But if any of you would like to provide a working example containing a set of reproducible steps on JSFiddle or JSBin, that will really help us a lot as we don't have the bandwidth for investigating all the issues right now. Even better, if someone would like to write a patch for this, I'd be more than happy to walk you through the steps involved. Thanks. |
Here you go, although not sure if this might be caused by unobtrusive, or by .net itself: https://dotnetfiddle.net/HiDCu5 Step 1; click submit If you check the "aria-described by" of the elemements, input1 aria-described by points to "inputtext-error", but since we already fixed the error, the element with the "inputtext-error" ID no longer exists. This is what is causing the WCAG error. When we do step 2, aria-described by on input1 should be removed as well. I posted this issue for unobtrusive as well, feel free to close it if it doesnt belongs here. |
Thanks for the example. I will check it later this week. |
Here is another example that I am experiencing. Steps to reproduce:
Before:
After:
Hope this helps. it doesn't seem to add it when you are just focused in the input field, but when I go in and inspect it, it looks like it is firing some part of the validation. |
Would the steps involved be more or less wrapping an if statement around the block where it adds the aria-describedby to the element and removing it in an else? I do realize there would be a little more to it, but generally speaking is that all that needs to be done? I am willing to take a stab at it, but would need to know all the caveats I would need to be aware of. |
What about something similar to this? I was looking at the cleanup functions, but not sure if something easier can be used. Not sure about how this works if the element is grouped. Havent tested that part with this.
Update: I went in and added some whitespace trimming of the start and end. Can I just add a trim() to the escapeCssMeta function to fix it across the board ? |
Hi @abbottmw Sorry for the delayed answer. And thank you for your interest in fixing this issue. You are on the right path. Basically, you should split the value of the Finally, you join the remaining ids (if there still some) and reassign the new value to Sample code to help you with the task (you will not need to do the trimming): // We split the aria-describedby value to multiple Ids
var describedByIds = describedBy.split( " " );
// Get the index of our error element
var index = $.inArray( describedByIds, errorID );
// Remove it if it exist
if ( index > -1 ) {
describedByIds.splice( index, 1 );
}
// Replace the value of aria-describedby
if ( describedByIds.length ) {
$( element ).attr( "aria-describedby", describedByIds.join( " " ) );
// Or remove the attribute if our error is the only referenced element
} else {
$( element ).removeAttr( "aria-describedby" );
} Also, we will need to change the method errorsFor: function( element ) {
var name = this.escapeCssMeta( this.idOrName( element ) ),
describer = $( element ).attr( "aria-describedby" ),
selector = "label[for='" + name + "'], label[for='" + name + "'] *";
// 'aria-describedby' should directly reference the error element
if ( describer ) {
selector = selector + ", #" + this.escapeCssMeta( describer )
.replace( /\s+/g, ", #" );
+ } else {
+ selector = selector + ", #" + name + "-error";
}
return this
.errors()
.filter( selector );
}, You will also need to adjust the related tests in
Adding trimming ability to |
Are there any updates on this? According to the release notes for 1.18.0, the fix for this bug did not make the build. I glanced at the commits to master since the release of 1.18.0, and it doesn't appear that any commits are related to this bug. As ADA compliance becomes more of a requirement rather than a suggestion, I worry a bit that this bug has been outstanding for quite some time. That said, I completely understand that no one is getting paid to work on and maintain this project...just looking for any updates. :) We are using v1.17.0 right now. |
Hi @cameron-gray, Thanks a lot for the reminder! time flies, It's been almost a year since my last comment. Lately I have been very busy, so I wont promise you anything, but I will try my best to implement the changes I mentioned in my comment #2094 (comment) as soon as I got some free time, unless someone beat me to it. Thanks! |
Hi errorPlacement: (err, elm) => {
The 'id' attribute is required for having this to work; in fact this ID is given to the element pointed by the aria-describedby attribute given to the element with the error Hope this might help |
Just wanted to add that this has been an issue flagged by our ADA compliance partner. This issue has been and will be marked on our WCAG statement. |
We managed to work around this issue by using: var advancedValidationSettings = {
success: function (label, element) {
var describedBy = $(element).attr("aria-describedBy")
.replace(new RegExp("(.*)\\s+" + element.id + "-error(.*)"), "$1 $2")
.trim();
if (describedBy) {
$(element).attr("aria-describedBy", describedBy);
} else {
$(element).removeAttr("aria-describedBy");
}
}
};
$.validator.unobtrusive.options = advancedValidationSettings; Maybe this helps somebody in the meantime. |
Got same problem in cloned fields, solved by removing the attribute just after cloning fields. Gave me a bit of headache though |
I'm having this same exact issue. Where would I place this code? I'm a newbie. Thank you! |
@thomastwosome basically anywhere after you included jquery.validation. For example in a new |
Hi @Arkni Also, another issue is the validation is not triggering like the old version 1.13.0 when a control value changes. Any solution for this? @pkunze - I will try this. Thanks a lot. |
Hi Ajith,
Unfortunately no. I wasn't able to be active the last two years due to some
health issues and probably will not be able to allocate enough time for
Open Source for the next few months.
I hope someone will try to fix this in the near future and can get
inspiration from one of my previous comments I shared two years ago.
As for the second issue, the validation was changed from eager to lazy
after 1.13.0, but I don't remember as of which version exactly. You may
find an answer in the changelog.
Hope this answers your question.
Thanks,
…On Fri, 26 Jun 2020 at 17:26, Ajith ***@***.***> wrote:
Hi @Arkni <https://github.com/Arkni>
Any update on this?
We are using jQuery.Validation -Version 1.19.1
I am getting a similar issue when I scan the pages.
Also, another issue is the validation is not triggering like the old
version 1.13.0 when a control value changes.
Scenario
Enter something in the text box and clear the same field value without
moving the mouse cursor by pressing the backspace key.. This time in the
old version will show a validation message. but in new version which is not
triggering a validation message.
Any solution for this?
@pkunze <https://github.com/pkunze> - I will try this. Thanks a lot.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#2094 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABURU6345TNZX7IL77JYCFDRYTD3NANCNFSM4D7Z4MXQ>
.
|
I have an update almost ready that adds an Updating unobtrusive to include this setting should resolve the issue there, though I won't be able to make the change myself. I'm adding one or two more unit tests, after which I should be ready to submit a PR. |
@bytestream It seems that you have taken over as the maintainer of this project. Do you think it would be possible to review the PR that eden-jh created (#2410)? It was created in the time between when Markus & Brahim were maintaining the repo and when you started to do so, and it was auto-closed for being stale. I can submit a new PR for it, but if the existing one would still be applicable, it would be easier to just re-open it and merge it. |
Subject of the issue
Valid form elements get aria-describedby added to them when they shouldn't
Your environment
Steps to reproduce
1 - Create a form with at least 2 fields with validation on them
2 - Inspect the form fields and verify that they do not have aria-describedby attributes
3 - Submit the form with at least one field value that passes validation and at least one that does not, so the form doesn't actually post
4 - Inspect the valid form field
Expected behaviour
Nothing pointing to an error ought to change or be added to the field, since it's valid
Actual behaviour
The valid form field has had the aria-describedby attribute added, though the fieldname-error HTML element it references doesn't exist, since no error message was necessary. A WCAG/ADA scanner run at that point (for example, the aXe Chrome plugin) will flag the valid field as having a problem because the aria-describedby value is invalid
I corrected this locally by adding a check if message is null in the showLabel method before adding that attribute. That doesn't seem to have hurt anything, but counting on the absence of a message doesn't seem great. Some way to check if the element is valid before adding the new attribute would be great.
The text was updated successfully, but these errors were encountered: