Accesibilidad

Etiquetas visibles y nombres accesibles

Utiliza label en campos de texto, interruptores y checkboxes para que el propósito permanezca visible después de escribir. Input pasa su etiqueta al control de texto nativo. Button utiliza label como nombre accesible salvo que aportes accessibilityLabel. IconButton exige label porque un símbolo por sí solo no explica su acción.

Conserva el texto visible dentro del nombre accesible: un botón Save puede llamarse Save profile name para añadir contexto. Describe la acción, no el dibujo. Usa Add item en lugar de Plus icon. Un nombre accesible no es automáticamente un tooltip visible.

Los errores necesitan palabras además de color

Input, Textarea, Password e InputMask pasan la ayuda o el error activo al campo nativo mediante accessibilityHint. Activa required y traduce requiredLabel cuando el dato sea obligatorio. Esto comunica el requisito; la validación sigue siendo responsabilidad de tu aplicación.

NeuFormField es un contenedor visual de contenido proyectado. No transfiere automáticamente su etiqueta, obligatoriedad ni mensajes al control interior. Enlaza accessibilityLabel y accessibilityHint en el input nativo real. Referencia el contenedor con #field y enlaza accessibilityLabelledBy a field.labelId para que Android asocie la etiqueta visible con el campo rellenado, como muestra el ejemplo de FormField. Este componente es distinto de FormField de Angular Signal Forms.

Un borde rojo no explica cómo resolver el problema. Pasa invalid junto con un mensaje error útil. Input muestra el error con el rol nativo alert cuando invalid es true y error no está vacío; si no, hint puede explicar el dato esperado. Decide cuándo mostrar la validación, por ejemplo tras tocar el campo o intentar guardar.

Coloca el componente siguiente dentro del neu-theme raíz de la aplicación.

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-profile-name',
  imports: [Text, View, NeuInputComponent, NeuButtonComponent],
  template: `
    <view class="content">
      <text class="heading" accessibilityRole="header">Profile</text>
      <neu-input label="Full name" [(value)]="name"
        [required]="true" requiredLabel="Required"
        hint="Shown to your team" [invalid]="showError()" [touched]="showError()"
        error="Enter your name before saving." />
      <neu-button label="Save" accessibilityLabel="Save profile name" (pressed)="save()" />
      <text class="feedback">{{ feedback() }}</text>
    </view>
  `,
  styles: `
    .content { padding: 24px; gap: 16px; }
    .heading { color: var(--neu-text); font-size: 24px; font-weight: 600; }
    .feedback { color: var(--neu-text); }
  `,
})
export class ProfileNameComponent {
  readonly name = signal('');
  readonly showError = signal(false);
  readonly feedback = signal('');

  save(): void {
    this.showError.set(!this.name().trim());
    this.feedback.set(this.showError() ? '' : 'Profile name ready.');
  }
}

Revisa la pantalla completa

Comprueba la accesibilidad de tu aplicación

Utiliza nombres accesibles claros y comprueba la pantalla completa con VoiceOver o TalkBack. Incluye el texto ampliado, el orden del foco, los mensajes de validación y el movimiento reducido en los tests de tu aplicación.