fix(button): possibilité de définir ariaPressed

CHANGELOG.md

@@ -3,11 +3,12 @@
 ## 1.12.2
 
 - fix(card/tile): régression de la taille des titres cliquables
+- fix(button): possibilité de définir l'attribut aria-pressed (accessibilité)
 - fix(buttons-group): effet de bord de la surcharge du CSS pour la modal sur les dsfr-btns-group
 - fix(form): affichage du conteneur de messages même vide et conditionnement de aria-describedby (accessibilité)
 - fix(translate): correction documentation, le label de la langue ne doit pas contenir le code
 
-## 1.11.9
+## 1.11.9 (2024-10-03)
 
 - fix(buttons-group): effet de bord de la surcharge du CSS pour la modal sur les dsfr-btns-group
 

projects/ngx-dsfr-components/src/lib/components/button/button.component.html

@@ -4,6 +4,7 @@
   [attr.title]="tooltipMessage || null"
   [disabled]="disabled || null"
   [attr.aria-label]="ariaLabel || null"
+  [attr.aria-pressed]="ariaPressed || null"
   [attr.aria-controls]="ariaControls || null"
   [attr.data-fr-opened]="ariaControls ? false : null">
   <ng-container *ngIf="label">{{ label }}</ng-container>

projects/ngx-dsfr-components/src/lib/components/button/button.component.ts

@@ -70,9 +70,13 @@ export class DsfrButtonComponent implements DsfrButton {
    * 👓 `ariaControls` est utilisé pour la manipulation d'une modale par exemple.
    * (prise en charge du retour de focus à la fermeture de la modale).
    */
-  // ariaControls ne fait pas partie de l'interface ?
   @Input() ariaControls: string;
 
+  /**
+   * 👓 Spécifie l'attribut `aria-pressed` pour indiquer un état (toggle)
+   */
+  @Input() ariaPressed: string;
+
   /** Style personnalisé `@since 1.3.0` */
   @Input() customClass: string;
 

projects/ngx-dsfr-components/src/lib/shared/models/button.model.ts

@@ -32,14 +32,20 @@ export interface DsfrButton {
   /** Permet d'activer un visuel dénotant un "chargement" (busy), 'false' par défaut. */
   loader?: boolean;
 
-  /** [accessibilité] Spécifie le libellé qui sera retranscrit par les narrateurs d'écran. */
-  ariaLabel?: string;
-
   /** Permet d'inverser le contraste du marqueur de focus, 'false' par défaut. */
   invertedOutlineContrast?: boolean;
 
   /**Permet d'identifier le button. */
   id?: string;
+
+  /** [accessibilité] Spécifie le libellé qui sera retranscrit par les narrateurs d'écran. */
+  ariaLabel?: string;
+
+  /** [accessibilité] attribut aria-controls utilisé pour la manipulation d'une modale par exemple. */
+  ariaControls?: string;
+
+  /** [accessibilité] attribut aria-pressed indiquant l'état du bouton (cas d'un toggle) */
+  ariaPressed?: string;
 }
 
 /**