Feuilles de Comportement AriaML

Introduction

La technologie AriaML Behavior introduit une couche déclarative décrivant le comportement et les relations entre les éléments du DOM. Contrairement aux feuilles de style (CSS), les fichiers de comportement (.bhv) ne s’occupent pas de l’apparence mais modifient réellement la structure et l'état du document.

L'intérêt majeur est que le comportement des composants interactifs de base (onglets, menus, accordéons, etc.) peut être défini de manière purement déclarative. Au lieu d'écrire des scripts, l'auteur décrit des relations et des comportements. AriaML assure que l'arbre d'accessibilité et le DOM physique restent synchronisés, notamment en réagissant aux Media Queries (responsive), résolvant, par exemple, le fossé habituel entre l'ordre visuel et l'ordre de navigation clavier.

1. Modèle d'Intégration

1.1 Syntaxe .bhv

Les feuilles de comportement utilisent une syntaxe déclarative inspirée du CSS. Chaque bloc définit un sélecteur et un ensemble de propriétés de comportement. Les propriétés sont injectées dans l'espace sémantique des éléments correspondants.

1.2 Déclaration

Le document AriaML déclare ses ressources via des balises de script typées, permettant une isolation sémantique :

<script type="text/behavior" src="standard-patterns.bhv"></script>
<script type="text/behavior">
    /* Règles locales */
    [role="tab"] { on-click: focus(next); }
</script>

2. Remaniement Structurel : La propriété `order`

La propriété order est une instruction de remaniement structurel réel. Contrairement à son homologue CSS, elle ne se contente pas de modifier l'affichage visuel.

Comportement : L'User Agent réordonne physiquement les nœuds enfants d'un parent en fonction de leur valeur order (ordre croissant, défaut à 0).
Finalité : Maintenir une correspondance stricte entre le flux de lecture (lecteurs d'écran), l'ordre de tabulation (focus clavier) et la position visuelle, particulièrement dans les interfaces responsives.

3. Système de Résolution et Points de Vue (POV)

AriaML utilise un moteur de trajectoire pour cibler les éléments sans dépendre d'identifiants uniques (IDs), favorisant la réutilisabilité.

3.1 Points de Vue de base

POV	Cible
root	La racine du document AriaML.
self	L'élément portant la règle (par défaut).
parent	Le parent direct du nœud.
siblings	Les nœuds frères (excluant l'élément lui-même).
branch	Tous les enfants du parent (incluant l'élément).
closest: sel	Premier ancêtre correspondant au sélecteur `sel`.

3.2 Relations de navigation

next / prev : Éléments adjacents directs dans le DOM.
first / last : Premier ou dernier enfant du parent.

3.3 Relations Déclaratives (`rel-*`)

L'auteur peut nommer des relations complexes pour créer des alias sémantiques.

Définition : rel-nom: (POV) selecteur;
Usage : On utilise ensuite nom comme une cible dans les actions.

4. Événements et Cycle de Vie

AriaML distingue les événements du DOM standard des événements de cycle de vie du document.

init : Déclenché lors de la première découverte de l'élément. Utilisé pour les injections de rôles par défaut.
on-apply : Déclenché après chaque mutation structurelle ou mise à jour des propriétés (ex: après un order).
on-[event] : Événements standards (click, input, change, etc.).
on-clickout : Déclenché lorsqu'une interaction a lieu en dehors de l'élément cible.
on-current-change : Événement global permettant de réagir au changement d'état de l'application (ex: changement de page ou de sélection globale).
*Accords Clavier (`kb-)** : Capture de combinaisons de touches. La nomenclature impose l'ordre alphabétique des modificateurs (ex:kb-alt-shift-s`).

5. Micro-Actions de l'Interface

Les actions sont des instructions atomiques pouvant être enchaînées.

5.1 Mutations d'État

set(cible@attr, "valeur") : Définit un attribut.
set(cible.classe) : Ajoute une classe.
rm(cible@attr) / rm(cible.classe) : Supprime l'attribut ou la classe.
toggle(cible@attr, "v1", "v2", ...) : Alterne entre plusieurs valeurs. Si aucune valeur n'est spécifiée, agit comme un booléen.

5.2 Flux et Focus

focus(cible) : Déplace le focus utilisateur.
open(cible) / close(cible) : Gère la visibilité. Pour les éléments <dialog>, utilise les primitives natives d'ouverture.
open-modal(cible) : Ouvre un dialogue avec capture de focus (Focus Trap).
trigger(cible, "evenement") : Déclenche un événement personnalisé.

5.3 Manipulation de l'Arbre

append(parent, enfant) / prepend(parent, enfant) : Déplace un nœud dans la hiérarchie.
remove(cible) : Supprime le nœud du document.

6. Patterns de Références Croisées

6.1 Interpolation d'attributs

Il est possible d'utiliser les données du document pour cibler des éléments via la syntaxe {attribut}.

Exemple : rel-panel: (root) #{aria-controls}; cible l'élément dont l'ID correspond à la valeur de l'attribut aria-controls de l'élément courant.

6.2 Héritage de Comportement (`behavior`)

Un élément peut hériter d'un pattern prédéfini.

Syntaxe : behavior: nom-du-pattern;
Les propriétés locales peuvent surcharger ou compléter les propriétés du pattern via l'instruction behavior().

Un pattern est simplement un ensemble de propriétés/valeurs regroupées et prédéfinies permettant d'alléger vos feuilles de comportement en évitant la redondance. Vous pouvez consulter les patterns disponible dans le code source de l'implémentation JS.

7. Exemples

7.1 Sémantique Responsive

AriaML permet de redéfinir la structure et le rôle d'un composant selon le contexte de rendu, sans modifier le HTML.

@media (max-width: 600px) {
    /* Sur mobile, l'aside est en fin de document pour la lecture */
    .sidebar {
        order: 10;
        role: region;
    }
}

@media (min-width: 601px) {
    /* Sur desktop, l'aside remonte physiquement avant le contenu
       pour être le premier élément tabulable */
    .sidebar {
        order: -1;
        role: navigation;
        on-init: set(@aria-label, "Menu principal");
    }
}

Voici l'exemple du menu burger ajouté à la section, utilisant la sémantique de relation et les mutations d'attributs natives d'AriaML :

7.2 Pattern Menu de Navigation (Burger)

Cet exemple illustre comment AriaML gère l'état d'un menu rétractable en synchronisant l'état du bouton (aria-expanded) avec la visibilité de la cible (hidden).

/* Bouton de contrôle du menu */
button.burger {
    /* Définition de la relation avec le menu via son ID */
    rel-menu: "(root) nav#main-menu";

    /* Initialisation sémantique */
    on-init:
        set(self@aria-haspopup, "true")
        set(self@aria-expanded, "false")
        set(menu@hidden);

    /* Toggle du menu : l'action bascule l'état du bouton et du menu */
    on-click:
        toggle(self@aria-expanded, "true", "false")
        toggle(menu@hidden);

    /* Fermeture automatique si l'utilisateur clique ailleurs */
    on-clickout:
        set(self@aria-expanded, "false")
        set(menu@hidden);

    /* Support clavier standard */
    kb-escape:
        set(self@aria-expanded, "false")
        set(menu@hidden)
        focus(self);
}

Aria Markup Language