oruga icon indicating copy to clipboard operation
oruga copied to clipboard

Programmatically associate inputs with field messages

Open mmazanec22 opened this issue 8 months ago • 0 comments

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

mmazanec22 avatar May 30 '24 17:05 mmazanec22