This page documents the VoiceOver experience when using the <auro-input> component. It covers announcements, focus behavior, and how different states affect the screen reader experience.

When focus is given to the input element the following is announced:

1. Label: label slot content
2. Current value: [current value if present]
3. Role: "text field" (or "secure text field" for type="password")
4. State hints:

   State	What gets announced
   Required	"required"
   Invalid	"invalid data"
   Disabled	"dimmed"
   Readonly	"read only"

5. Additional description: helpText slot content if present (after a brief pause)

When the clear button is visible (input has a value, is not disabled or readonly, and the component has focus or is being hovered), it participates in the tab order. When focused, VoiceOver announces the ariaLabel.clear slot content (defaults to "Reset") followed by "button".

When type="password" is set and the input has a value, the show/hide password button is visible. When focused, VoiceOver announces the ariaLabel.password.show or ariaLabel.password.hide slot content followed by "button".

When a validation error occurs, the error message is rendered with role="alert" and aria-live="assertive", causing VoiceOver to immediately announce the error message without requiring the user to move focus.

What VoiceOver does:

• Focuses the element and announces it (e.g., "[label], dimmed, text field" on macOS / "[label], dimmed" on iOS).
• The word "dimmed" is VoiceOver's way of indicating disabled.
• The element remains in the focus order (Tab still reaches it).
• The user cannot interact with it — no text can be entered, and the clear button is not shown.

Key distinction from aria-hidden: A disabled element is reachable but not operable. If you want VoiceOver to skip it entirely, you would need aria-hidden="true" or tabindex="-1", but that is generally not recommended for disabled controls — users benefit from knowing the field exists and why it may be unavailable.

This is consistent across NVDA and JAWS as well, though the announcement wording differs (e.g., NVDA says "unavailable").

When an <auro-input> is invalid the following occurs:

• Focus — VoiceOver announces "invalid data" (macOS) or "invalid entry" (iOS) after the element's label.
• The Help Text will render the error message and it will be included in the VoiceOver focus announcement.

Example: when focusing on an invalid <auro-input> the VoiceOver announces something like "Full name, invalid data, text field, required, Please fill in this field".

When readonly is set:

• The input is focusable and VoiceOver announces "read only" as part of the element description.
• The user can navigate to the field but cannot modify its value.