I have the below input field, but when I test with AXE or ARC tools, I get the below error: "The aria-required attribute is not allowed on the generic role" . Can somebody tell me what the issue here and how to resolve it?
<input matinput="" width="875px" tabindex="0" id="zipcode-seach" formcontrolname="zipCode" class="mat-input" placeholder="Zip Code / Postal Code - enter full or partial value" aria-invalid="false" aria-required="false">
This attribute is used to indicate that user input is required on an element. However, it is not necessary for semantic HTML elements, such as <input>, which already support the required attribute.
The aria-required attribute is mainly intended for use with custom form controls created using non-semantic elements (<div>, <span>). For semantic elements like <input>, the required attribute should be used instead.
Since you want the required attribute to be false, you can simply omit the attribute.
For example:
<input matinput="" width="875px" tabindex="0" id="zipcode-search" formcontrolname="zipCode" class="mat-input" placeholder="Zip Code / Postal Code - enter full or partial value" aria-invalid="false">
You can refer to the MDN documentation on the aria-required attribute: MDN Web Docs on aria-required.