Tabs et Custom Elements

Quelques remarques sur le portage du composant graphique Tabs (liste d'onglets) au format Custom Elements et sur l'utilisation de l'attribut "hidden" pour masquer les panneaux (tabpanel) non affichés.

Portage au format Web Element

Le composant Tabs est l'un des plus anciens composant que j'ai développé, sans doute en 2005. Il a évidemment beaucoup évolué depuis et s'est retrouvé, comme beaucoup d'autres composants de la librairie rnb-js, organisé autour d'une hiérarchie d'objets destinée à mutualiser (factoriser) le code. On avait une mixin EventTarget chargée de gérer l'émission d'événements, un objet Element portant tous les comportements et caractéristiques communes aux composants graphiques (affichage, insertion dans le DOM, etc.) et ainsi de suite. Cette hiérarchie n'a rien d'originale : elle reprend peu ou prou celle des ojets DOM ; elle est appliquée dans de nombreux toolkits graphiques (GTK, Qt, Swing, ...). Elle finissait néanmoins par être lourde, engendrant de nombreuses dépendances ; elle était surtout redondante par rapport à ce qui existe dans le DOM.

Alors qu'une troisième itération de la librairie rnb-js est en cours, cette fois avec la migration du code vers les modules ES6, il était aussi judicieux de revoir cette structure hiérarchique pour l'abandonner : les technos web permettent aujourd'hui d'éviter ces encapsulations de comportements dans des objets tiers et de directement "améliorer" le comportement natif du DOM à l'aide des Web components.

C'est ce que j'ai réussit à faire en deux-trois heures en portant le composants Tabs au format Custom Element. Et je commence maintenant, comme au début de l'années 2018, à migrer ma librairie javascript vers un format plus modernes. Je ne sais pas si j'arriverai au bout car l'import conditionnel de module n'est pas encore supporté par les navigateurs web. Le comportement des pages web du site risque donc d'être un peu perturbé dans les semaines qui viennent.

L'attribut hidden

The hidden attribute must not be used to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

HTML 5.1 : The hidden attribute

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

MDN : hidden

Cela semble être assez clair : on ne devrait pas utiliser l'attribut "hidden" sur les panneaux qui ne sont pas à l'affichage. Maintenant, si l'on regarde l'exemple illustrant les bonnes pratiques de l'accesssibilité web, les panneaux masqués le sont… par un attribut "hidden".