Étiquette : hidden

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

Fichier wcag-toggle.js:

Fichier PHTML:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js:

[jQuery] Vérifier qu’un élément est visible ou masqué

Source : check if a element is display:none or block on click. Jquery

On peut utiliser les pseudo-classes CSS :visible pour les éléments visibles et :hidden pour trouver les éléments invisibles.

Pour vérifier la présence d’un élément en particulier :

Note pour moi-même : je ne sais pas pourquoi j’avais posté un exemple avec la pseudo-classe :visible et la méthode .length == 0… Vérifier la présence dans le DOM d’un élément possédant une certaine classe (puis agir dessus) fonctionne mieux sans la pseudo-classe et en affectant la valeur de 1 à length :

Les éléments sont considérés comme visibles si ils prennent de la place dans le document. Les éléments visibles ont une largeur et/ou une hauteur dont la valeur est plus grande que zéro (source).

On peut également utiliser is() avec :visible :

Si on souhaite vérifier la valeur de la propriété display, on peut utiliser attr() :

Si la propriété CSS display est employée, elle peut avoir les valeurs suivantes :

  • display: none
  • display: inline
  • display: block
  • display: list-item
  • display: inline-block