feat: add getAriaInvalid helper to handle aria-invalid and validity
This commit is contained in:
parent
0eb406b26e
commit
bc03ba5c02
|
|
@ -461,6 +461,23 @@ export function getElementAccessibleDescription(element: Element, includeHidden:
|
||||||
return accessibleDescription;
|
return accessibleDescription;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// https://www.w3.org/TR/wai-aria-1.2/#aria-invalid
|
||||||
|
export const kAriaInvalidRoles = ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'];
|
||||||
|
|
||||||
|
export function getAriaInvalid(element: Element): 'false' | 'true' | 'grammar' | 'spelling' {
|
||||||
|
const role = getAriaRole(element) || '';
|
||||||
|
if (!role || !kAriaInvalidRoles.includes(role))
|
||||||
|
return 'false';
|
||||||
|
if (element instanceof HTMLInputElement && element.validity)
|
||||||
|
return element.validity.valid ? 'false' : 'true';
|
||||||
|
const ariaInvalid = element.getAttribute('aria-invalid');
|
||||||
|
if (!ariaInvalid || ariaInvalid.trim() === '' || ariaInvalid.toLocaleLowerCase() === 'false')
|
||||||
|
return 'false';
|
||||||
|
if (ariaInvalid === 'true' || ariaInvalid === 'grammar' || ariaInvalid === 'spelling')
|
||||||
|
return ariaInvalid;
|
||||||
|
return 'true';
|
||||||
|
}
|
||||||
|
|
||||||
export function getElementAccessibleErrorMessage(element: Element): string {
|
export function getElementAccessibleErrorMessage(element: Element): string {
|
||||||
// SPEC: https://w3c.github.io/aria/#aria-errormessage
|
// SPEC: https://w3c.github.io/aria/#aria-errormessage
|
||||||
//
|
//
|
||||||
|
|
@ -471,8 +488,7 @@ export function getElementAccessibleErrorMessage(element: Element): string {
|
||||||
if (accessibleErrorMessage === undefined) {
|
if (accessibleErrorMessage === undefined) {
|
||||||
accessibleErrorMessage = '';
|
accessibleErrorMessage = '';
|
||||||
|
|
||||||
const ariaInvalid = element.getAttribute('aria-invalid');
|
const isAriaInvalid = getAriaInvalid(element) !== 'false';
|
||||||
const isAriaInvalid = ariaInvalid !== null && ariaInvalid.toLowerCase() !== 'false';
|
|
||||||
if (isAriaInvalid) {
|
if (isAriaInvalid) {
|
||||||
const errorMessageId = element.getAttribute('aria-errormessage');
|
const errorMessageId = element.getAttribute('aria-errormessage');
|
||||||
const errorMessages = getIdRefs(element, errorMessageId);
|
const errorMessages = getIdRefs(element, errorMessageId);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue