CategoryTwitter Bootstrap

[Bootstrap] Accessibilité du composant Collapse de Bootstrap 2 avec ajout des attributs aria-expanded et tabindex

Accessible sur 2 niveaux (fonctionnement standard du composant Collapse de Bootstrap 2)

Dans mon exemple, la classe .group-toggle est affectée à l’élément <a /> qui reçoit la classe .collapsed lorsqu’au clic sur celui-ci, l’élément « collapsible » qui lui est associé s’ouvre.

L’élément qui engloble le contenu qui s’affiche/se masque au clic (auquel sont affectées les classes .collapse et .collapse.in lorsqu’il est ouvert) doit aussi reçevoir l’attribut aria-expanded.

Attention: il faut ajouter dans votre code HTML l’attribut tabindex="-1" à l’ensemble des éléments <a /> qui seront cachés au chargement de la page afin que la navigation au clavier ne tienne pas compte de vos liens invisibles jusqu’à l’ouverture des accordéons.

La doc de Bootstrap v2.3.2 concernant le composant Collapse.


Accessible sur 3 niveaux

Accessible sur 3 niveaux en fonction des classes .navigation-sommaire__fleche--niv3. Il faudra ré-adapter pour votre utilisation de Collapse. Ce n’est pas du plug’n’play.

Dans mon exemple, la classe .group-toggle est affectée à l’élément <a /> qui reçoit la classe .collapsed lorsqu’au clic sur celui-ci, l’élément « collapsible » qui lui est associé s’ouvre.

L’élément qui engloble le contenu qui s’affiche/se masque au clic (auquel sont affectées les classes .collapse et .collapse.in lorsqu’il est ouvert) doit aussi reçevoir l’attribut aria-expanded.

Attention: il faut ajouter dans votre code HTML l’attribut tabindex="-1" à l’ensemble des éléments <a /> qui seront cachés au chargement de la page afin que la navigation au clavier ne tienne pas compte de vos liens invisibles jusqu’à l’ouverture des accordéons.

La doc de Bootstrap v2.3.2 concernant le composant Collapse.

[Bootstrap 3] Garder une popover ouverte lorsqu’on survole celle-ci avec la souris

Sources: How can I keep bootstrap popover alive while the popover is being hovered? et Live demo w/Plunker.

[Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments

Si toi aussi tu travailles encore avec Bootstrap en 2018 (ou +), tu t’es forcément retrouvé face à ce problème qui existait dans la version 3 de Bootstrap et est toujours présent dans la version 4: la classe collapsed sur le lien ou le bouton qui va permettre d’afficher/masquer des éléments n’apparaît qu’après un premier affichage/masquage de ces dits éléments.

Fais le test sur les exemples qu’on retrouve dans les docs officielles : https://getbootstrap.com/docs/3.3/javascript/#collapse ou https://getbootstrap.com/docs/4.0/components/collapse/.

Il est d’ailleurs étonnant que personne ne leur ait jamais remonté ce bug… Peut-être parce que plus personne n’utilise Bootstrap en 2018 (ou +).

Solution #1

Pour solutionner notre problème, il suffit de mettre un setTimeout javaScript quelque part dans tes sources pour délayer l’ajout dans le DOM de la classe collapsed à l’affichage de la page. Oui: c’est sâle. Oui: c’est une vilaine câle en bois. Non: on n’aurait pas pu mettre la classe dans le code HTML car le code natif Bootstrap te la supprime illico. Oui: tu peux peut-être passer par les events proposés par l’api pour faire ça mieux, mais ça veut dire que tu ne peux pas utiliser les data-attributes pour initier ton collapse.

Solution #2 (la meilleure)

Il est temps d’abandonner Bootstrap pour Foundation.

[Bootstrap][Foundation] Bug du composant Dropdown sur iPad et iPhone

Problème: les composants Dropdown de Bootstrap et Foundation ne s’activent pas sur iPad et iPhone alors qu’ils fonctionnent sur n’importe quel périphérique sous Android.

Solution: il s’agit juste d’un problème de markup. Il faut obligatoirement utiliser l’élément <button type="button">Mon dropdown qui fonctionne sur les mobiles d'Apple</button> et surtout pas l’élément <a> (même avec un attribut role="button".

Moralité: Apple, c’est de la grosse daubasse.

[javascript] Construire une modale bootstrap 3 à la volée

Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ

Alternative intéressante: @include-media – Simple, elegant and maintainable media queries in Sass. Couplé à include-media-export – An include-media plugin for exporting breakpoints from Sass to JavaScript.

Avant propos : certains des CMS les plus récents du marché proposent nativement des solutions équivalentes à Sync MQ pour gérer et/ou synchroniser l’exécution de media queries CSS et JS. Pour d’évidentes raisons de compréhension et de maintenabilité de votre code source, je vous conseille de vous tourner plutôt vers ces solutions lorsqu’elles existent.

Sync MQ: pour quoi faire?

Qu’on démarre un projet de site internet de zéro ou qu’un client nous demande une nouvelle mouture, à destination des supports mobiles, de son site existant (qui tourne sous une solution qui ne prend pas en charge les concepts de responsive design), la question de la gestion et de l’adaptation de l’affichage sur différents périphériques de navigation (ordinateurs, tablettes, smartphones) se pose rapidement. Si l’utilisation de media queries s’impose immédiatement comme une évidence dans nos feuilles de styles qu’en est-il en revanche de l’exécution, pour un support donné, de code JavaScript? Et existe-t’il un moyen simple de gérer, d’optimiser votre code CSS (ou LESS, ou SASS, ou autre préprocesseur…) et JS et de synchroniser leur exécution ?

C’est pour répondre à cette double problématique qu’intervient Sync MQ dont le concept est :

  • de simplifier l’écriture et la déclaration de media queries par rapport aux méthodes traditionnelles,
  • de faciliter la synchronisation de l’exécution de media queries tant au niveau de vos styles que du code JavaScript.

Demo sur JSFiddle.net.

Les sources de Sync MQ que vous trouverez sous GitHub à l’heure ou j’écris ces lignes exploitent des dépendances telles qu’Enquire JS et le composant Grid de Bootstrap 3 parce que c’est celles avec lesquelles j’aime travailler. Mais Sync MQ est avant tout un concept que rien ne vous empêche d’intégrer à vos propres habitudes de travail. Vous pouvez tout-à-fait remplacer Enquire JS par la brique mq de Modernizr ou le composant Grid de Bootstrap 3 par celui proposé par le framework Foundation 4.

De l’art de bien choisir ses points de rupture.

=> Web Stats

Et mon code JavaScript dans tout ça?

Quel intérêt de faire appel à une dépendance telle qu’Enquire JS alors qu’une ligne de code JavaScript suffirait à exécuter du code pour un support donné?

Pour un point de rupture donné (mettons, 800px) et suivant le navigateur utilisé, la méthode $(window).width() de jQuery et les Media Queries CSS3 ne sont pas exécutées systématiquement au même moment.

A Code Example of the Difference Between jQuery Window Width and CSS Media Query width measurements.

Dans cet exemple, l’auteur démontre que […].

_sync-mq.scss

On commence par créer des variables aux libellés parlants pour remplacer le code (moins digeste) traditionnellement utilisé en CSS pour la déclaration de media queries.

Comme décrit plus haut, les points de rupture retenus ne ciblent pas uniquement un ou plusieurs supports donnés (iPhone, iPad, Amstrad CPC) en fonction de leurs résolutions mais :

  • des ensembles moyens de résolutions rencontrées par périphériques (Smartphone, Tablette, Desktop),
  • les résolutions que les clients nous demandent le plus souvent de cibler.

Les valeurs affectées à ces variables aux libellés allégés font directement référence à celles des points de rupture définis dans les variables du framework Bootstrap 3 (version SASS).

Ces mêmes valeurs sont immédiatement ré-exploitées dans Bootstrap pour construire les styles du composant Grid.

Aussi, on retrouvera dans Sync MQ parmi les habituelles Smartphone, Tablette et Desktop, des media queries englobant:

  • l’ensemble des Mobiles ($bpMobile pour Smartphone et Tablette),
  • les Tablettes et au-delà ($bpTabletUp),
  • les petits et larges Desktops séparément ($bpSmallDesktop et $bpLargeDesktop).

Pour cibler par exemple les résolutions à partir des tablettes et au-delà, au lieu d’écrire:

J’écris désormais:

Quelques astuces d’utilisation:

  • Lorsque vous choisissez un plug-in JS amené à être exécuté en fonction d’un point de rupture, veillez à ce qu’il possède une méthode .destroy() et/ou .reload(). C’est le cas, par exemple, du carousel BxSlider. La présence de ce type d’options vous dispensera de nettoyer vous-même un DOM modifié par l’exécution d’un plug-in lorsque vous souhaiterez en annuler les effets pour une vue donnée.
  • Trois résolutions sont en réalité disponibles pour Amstrad CPC: 160×200 pixels avec 16 couleurs, 320×200 pixels avec 4 couleurs, et 640×200 pixels avec 2 couleurs. De quoi rentabiliser immédiatement l’utilisation de Sync MQ.

Un peu de documentation:

HTML

CSS (SASS)

JS (enquire, jQuery)

[Bootstrap] Annuler les effets du composant Affix pour une vue donnée

Source : How can I disable Bootstrap’s “affix” on smaller screens?.

Code HTML à mettre en place, toutes vues confondues :

…combiné aux déclarations CSS suivantes :

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

Fichier global-mediaqueries.js :

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

  1. bootstrap/mixins/grid-framework.scss
  2. bootstrap/mixins/grid.scss
  3. bootstrap/variables.scss
  4. bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

Rajouter les Container sizes :

grid.scss

Rajouter un Container widths pour le breakpoint xl :

En toute fin de fichier, rajouter un Extra Large grid :

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

  1. Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
  2. Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
  3. Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑