This page documents the VoiceOver experience when using the <auro-form> component. It covers announcements, interactions, and workflows for form submission and validation.

The auro-form element itself does not receive focus and is not announced by VoiceOver. It acts as a passive container. The individual form elements within it are what VoiceOver interacts with.

Each Auro form element within the form (e.g., auro-input, auro-select, auro-datepicker) announces independently when focused:

1. Label: The element's label content
2. Role: Appropriate role for the element type (e.g., "text field", "pop-up button")
3. Required state: "required" if the element has the required attribute
4. Value: The current value if one is set
5. Help text: Additional description from the helpText slot

When submit() is called and a form element fails validation:

• The error state is applied to the invalid element
• The help text region updates to show the validation error message
• VoiceOver announces the error through the element's accessible description when it receives focus

1. Navigate form elements: Tab through each form element; VoiceOver announces labels, roles, and states
2. Enter values: Interact with each element to provide input
3. Submit: Focus the submit button and activate it, or press Enter while focused on any form element
4. Validation feedback: If validation fails, focus moves to (or remains on) the invalid element and VoiceOver announces the error

1. Focus reset/cancel button: VoiceOver announces "Cancel" or "Reset" button label
2. Activate: All form elements return to their initial state
3. Announcement: VoiceOver announces the focused element's cleared state

Enter key: When focused on a form element (not a textarea), pressing Enter triggers form submission. VoiceOver users can use this as an alternative to navigating to the submit button.