Cibles de focus

Une cible de focus est un élément d'interface utilisateur sur lequel le focus clavier peut se déplacer. Les utilisateurs peuvent déplacer le focus clavier à l'aide de la touche Tab ou des touches directionnelles (fléchées) :

  • Tabulation ou Maj+Tabulation : déplace le curseur vers l'avant ou vers l'arrière dans l'ordre d'apparition unidimensionnel.
  • Touches directionnelles : déplacez le focus de façon bidimensionnelle (Haut, Bas, Gauche et Droite).

Les éléments d'interface utilisateur interactifs sont des cibles de focus par défaut

Un composant interactif est une cible de focus par défaut. En d'autres termes, un élément d'interface utilisateur est une cible de focus si les utilisateurs peuvent appuyer ou cliquer dessus.

Prenons l'exemple de trois composants Card. Si la première et la troisième carte sont interactives (elles définissent un rappel onClick), mais que la deuxième carte est purement informative (elle ne gère pas les clics), appuyer sur la touche Tab sur la première carte permet d'ignorer la deuxième carte et de passer directement à la troisième.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}

Vous pouvez définir la deuxième carte comme cible de focus en fournissant un paramètre onClick :

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}

Le modificateur clickable transforme également les éléments d'interface utilisateur personnalisés ou standards en cibles de focus. Pour en savoir plus, consultez Appuyer et appuyer de manière prolongée.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}

Faire d'un composable une cible de sélection non cliquable

Le modificateur focusable fait d'un composable une cible de sélection sans nécessiter de sémantique de clic. Les utilisateurs peuvent déplacer le focus clavier vers le composable modifié (par exemple, pour inspecter le contenu avec des outils d'accessibilité ou faire défiler la fenêtre d'affichage), mais appuyer sur les touches Entrée ou Espace ne déclenche pas d'action de clic :

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}

Rendre un composable non sélectionnable

Dans certains cas, vous pouvez exclure un élément interactif de la navigation au clavier sans désactiver les événements de pointeur ou de clic. Vous pouvez empêcher un composant de recevoir la sélection en définissant canFocus = false dans le modificateur focusProperties :

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)

Précédent
Aperçu
Suivant
Focus traversal order (Ordre de balayage focus)