"form-control-has-label" should take into account aria-hidden
Closed this issue · 10 comments
I think it would make sense to not report "form-control-has-label" when the given element or one of its parents have aria-hidden="true" set since in those cases accessibility doesn't apply to that element.
This issue might apply to other rules also (maybe all?).
makes sense to me
but anyway, what would be the use case of a aria-hidden input?
Here we have a statement from MDN that says that no focusable element should have a aria-hidden property into it, and it kinda makes sense.
According to the fourth rule of ARIA, aria-hidden="true" should not be used on a focusable element. Additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute
In the specific case that prompted me to file this, the input was a hidden file input used for uploading an avatar image in a programmatic way.
but isn't there a replacement UI element for interacting with this input[type=file]?
maybe you could only point the aria-labelled-by to the UI element that interacts with the input
but isn't there a replacement UI element for interacting with this
input[type=file]?
There might be but I would guess is more modern and maybe less backward-compatible (which might not matter anymore I guess).
But when we think about this issue in more generic terms, wouldn't it always make sense to ignore aria issues on elements that have aria-hidden set (on itself or ancestor and irrespective of specific use-cases)?
I guess it does make sense... 🤔
Hi! Sorry I'm finally getting back around to these issues. Could you give some example HTML of what would be valid/invalid here? Want to make sure I'm understanding correctly.
Valid
<div aria-hidden="true">
<input value="1" type="text" />
</div>Invalid
<div>
<input value="1" type="text" />
</div>