Safari 27 rend le select natif personnalisable

Safari 27.0 est sorti le 16 septembre 2026. Les notes de version d'Apple indiquent la build 27.0 (20625.1.29) pour iOS 27, iPadOS 27, visionOS 27, macOS 27, macOS 26 et macOS Sequoia. Le résumé de Web Standards, publié le 17 septembre, compte 83 nouvelles fonctionnalités.

La version est large plutôt que profonde : un chargeur de modules ES réécrit, une mise en page en ligne d'une précision infrapixel, un ancrage de défilement qui ne demande aucune activation, l'API de routage statique du service worker et une longue série de corrections d'accessibilité. Deux des 83 fonctionnalités décident de ce qu'un formulaire intégré dans la page d'un autre peut supposer : un select natif que l'on peut styler, et un moyen d'annoncer un message sans région live.

Le select natif, désormais stylable

Le select était le contrôle que l'on stylait le moins et que l'on remplaçait le plus. Le select personnalisable change ce calcul. Appliquer appearance: base-select bascule l'élément vers de nouveaux styles par défaut de l'agent utilisateur et débloque le reste de la fonctionnalité.

select,
select::picker(select) {
  appearance: base-select;
}

• ::picker(select) cible la fenêtre surgissante elle-même, et ::picker-icon son chevron.

• ::checkmark cible la coche de la ligne sélectionnée.

• selectedcontent décide de ce que montre le contrôle fermé pour l'option courante : le résumé peut donc être du balisage plutôt qu'une copie du libellé.

• Une option peut désormais contenir du HTML : elle peut donc porter une icône ou un libellé sur deux lignes.

Rien de tout cela ne remplace le contrôle. Il reste un vrai contrôle de formulaire : la navigation au clavier, la sémantique pour lecteurs d'écran, l'envoi du formulaire, la validation des contraintes et l'événement change continuent de fonctionner. Une liste déroulante reconstruite avec des div jette tout cela, puis en reconstruit une version moins bonne. Choisir base-select, non.

ariaNotify() sans région live

Les notes de version d'Apple ajoutent la prise en charge de l'API ariaNotify, qui met du texte en file d'attente pour qu'un lecteur d'écran l'annonce sans région live ARIA. Pour un formulaire, cela comble un manque précis. Une région live parle quand son contenu change : un résumé d'erreurs qui répète la même phrase ne produit donc ni changement ni annonce. ariaNotify() met en file le message lui-même.

Le risque, c'est le volume. Une annonce n'est pas un message de validation. Si un formulaire intégré annonce chaque changement de champ, la personne qui utilise un lecteur d'écran entend un commentaire continu et quitte la page. Annoncez ce sur quoi la personne doit agir : le premier champ invalide après Envoyer, un envoi qui n'est pas passé, une étape qui vient de s'ouvrir.

Ce qu'il faut tester dans un formulaire intégré

• Le select fermé sur une longue liste d'options, en mode clair et sombre.

• Un select dans la mise en page du composant généré lui-même, à 320px.

• Un résumé d'erreurs annoncé une fois, pas deux.

• Le mode forced-colors, car base-select apporte ses propres styles par défaut.

Le composant généré de FormFlow rend des contrôles de formulaire HTML natifs : les nouveaux styles par défaut de Safari peuvent donc atteindre un formulaire intégré sans aucun changement de notre côté. Nous n'avons pas vérifié le composant généré sur Safari 27 pour cet article, et nous ne laisserons pas entendre le contraire. Si vous intégrez un formulaire, affichez-le dans les versions de Safari que vous prenez en charge avant de vous fier à l'apparence par défaut.

Ce que cela ne tranche pas

Le fait que Safari livre le select personnalisable ne le rend pas interopérable. Le résumé de Web Standards indique que le nouveau design par défaut a été porté au groupe de travail CSS pour être affiné, et qu'un point de départ identique dépend de la mise à jour des implémentations des autres navigateurs. Un style qui semble correct dans Safari 27 peut sembler faux dans un autre moteur le même jour.

ariaNotify() est un ajout du navigateur, pas une norme de formulaire. Il ne décide pas quelles annonces sont pertinentes et ne remplace ni un libellé, ni un fieldset avec un legend, ni une erreur visible à côté du champ.

Rien ici n'est une déclaration de prise en charge de Safari 27 par FormFlow, et rien ici ne change le comportement d'un formulaire intégré dans une version de Safari qui ne livre pas ces fonctionnalités. Pour le contrat POST auquel le formulaire intégré envoie ses données, lisez la référence de l'API.