Guides approfondis
Angular Aria

Select

Vue d'ensemble

Un pattern qui combine une combobox et une listbox pour créer des listes déroulantes à sélection unique, avec navigation au clavier et prise en charge des lecteurs d'écran.

Utilisation

Le pattern select convient le mieux lorsque les utilisateurs doivent choisir une seule valeur parmi un ensemble d'options familier.

Envisagez ce pattern lorsque :

  • La liste d'options est fixe (moins de 20 éléments) - Les utilisateurs peuvent parcourir et choisir sans filtrer
  • Les options sont familières - Les utilisateurs reconnaissent les choix sans avoir besoin de chercher
  • Les formulaires ont besoin de champs standard - Sélection d'un pays, d'une région, d'une catégorie ou d'un statut
  • Paramètres et configuration - Menus déroulants pour des préférences ou des options
  • Libellés d'options clairs - Chaque choix porte un nom distinct et facile à parcourir

Évitez ce pattern lorsque :

  • La liste compte plus de 20 éléments - Utilisez le pattern Autocomplete pour un meilleur filtrage
  • Les utilisateurs doivent rechercher parmi les options - Autocomplete fournit une saisie de texte et un filtrage
  • Une sélection multiple est nécessaire - Utilisez plutôt le pattern Multiselect
  • Il existe très peu d'options (2-3) - Des boutons radio offrent une meilleure visibilité de tous les choix

Fonctionnalités

Le pattern select combine les directives Combobox et Listbox pour fournir une liste déroulante entièrement accessible avec :

  • Navigation au clavier - Parcourez les options avec les touches fléchées, sélectionnez avec Entrée, fermez avec Échap
  • Prise en charge des lecteurs d'écran - Attributs ARIA intégrés pour les technologies d'assistance
  • Affichage personnalisé - Affichez les valeurs sélectionnées avec des icônes, une mise en forme ou du contenu riche
  • Réactivité à base de signals - Gestion d'état réactive avec les signals Angular
  • Positionnement intelligent - CDK Overlay gère les bords du viewport et le défilement
  • Prise en charge du texte bidirectionnel - Gère automatiquement les langues de droite à gauche (RTL)

Exemples

Select de base

Les utilisateurs ont besoin d'une liste déroulante standard pour choisir parmi une liste de valeurs. Une combobox associée à une listbox offre l'expérience de select habituelle avec une prise en charge complète de l'accessibilité.

La saisie de texte est empêchée en appliquant la directive ngCombobox directement sur un host element non interactif (comme un div ou un button) plutôt que sur un <input>. Les utilisateurs interagissent avec la liste déroulante à l'aide des touches fléchées et d'Entrée, exactement comme avec un élément select natif.

Select avec affichage personnalisé

Les options ont souvent besoin d'indicateurs visuels comme des icônes ou des badges pour aider les utilisateurs à identifier rapidement les choix. Des templates personnalisés dans les options permettent une mise en forme riche tout en préservant l'accessibilité.

Chaque option affiche une icône à côté du libellé. La valeur sélectionnée se met à jour pour montrer l'icône et le texte de l'option choisie, ce qui fournit un retour visuel clair.

Select désactivé

Un select peut être désactivé pour empêcher toute interaction de l'utilisateur lorsque certaines conditions du formulaire ne sont pas remplies. L'état désactivé fournit un retour visuel et empêche l'interaction au clavier.

Lorsqu'il est désactivé, le select affiche un état visuel désactivé et bloque toute interaction de l'utilisateur. Les lecteurs d'écran annoncent l'état désactivé aux utilisateurs de technologies d'assistance.

Tests

Le pattern select peut être testé en combinant ComboboxHarness et ListboxHarness, issus de @angular/aria/combobox/testing et @angular/aria/listbox/testing. Voici un exemple d'utilisation des harnais pour tester un composant select :

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {ComboboxHarness} from '@angular/aria/combobox/testing';
import {ListboxHarness} from '@angular/aria/listbox/testing';
import {MySelectComponent} from './my-select'; // Your component

describe('MySelectComponent', () => {
  let fixture: ComponentFixture<MySelectComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MySelectComponent],
    });

    fixture = TestBed.createComponent(MySelectComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should allow selecting an option', async () => {
    // Load the combobox harness (which acts as the select trigger)
    const select = await loader.getHarness(ComboboxHarness);

    // Verify it is closed initially
    expect(await select.isOpen()).toBe(false);

    // Open the dropdown
    await select.open();
    expect(await select.isOpen()).toBe(true);

    // Get the listbox harness from the popup
    const listbox = await select.getPopupWidget(ListboxHarness);
    const options = await listbox.getOptions();
    expect(options.length).toBe(3);

    // Click the second option
    await options[1].click();

    // Verify the dropdown closed and the value updated
    expect(await select.isOpen()).toBe(false);
    expect(await (await select.host()).text()).toContain('Option 2');
  });
});

Référence de l'API

Pour une documentation détaillée de l'API, consultez les références d'API suivantes :

Positionnement

Le pattern select s'intègre à CDK Overlay pour un positionnement intelligent. Utilisez cdkConnectedOverlay pour gérer automatiquement les bords du viewport et le défilement.