oruga
oruga copied to clipboard
Programmatically associate inputs with field messages
Overview of the problem
Oruga version: all (we're on 0.5.10 but it looks like this is still an issue in the version the docs use) Vuejs version: 3.3.2 OS/Browser: Chrome on pop!_os
Description
Field messages are not programmatically associated with inputs. Screen reader users will not hear an announcement of the associated message when they focus on an input field.
Steps to reproduce
Inspect the HTML in the docs for input, or in any oruga field component using the message attribute.
Expected behavior
The p
rendered by the field message should have a unique id
attribute. If the field status is error
, then it should be associated with the input using aria-errormessage
on the input and aria-invalid should be set to true on the input. If the field status is warning
or info
, then the input should be associated using aria-describedby
.
Actual behavior
The field message does not have an ID and input uses neither aria-describedby nor aria-errormessage to associate the input with the message