refactor: upgrade deps and drop Gulp

.github/workflows/css.yml

@@ -39,4 +39,4 @@ jobs:
         run: npm ci
 
       - name: Build CSS
-        run: npm run gulp compile
+        run: npm run build

.github/workflows/lint.yml

@@ -39,4 +39,4 @@ jobs:
         run: npm ci
 
       - name: Lint
-        run: npm run gulp lint
+        run: npm run lint

.htmlvalidate.json

@@ -0,0 +1,10 @@
+{
+	"extends": [
+		"html-validate:recommended"
+	],
+	"rules": {
+		"aria-label-misuse": "off",
+		"no-redundant-role": "off",
+		"no-inline-style": "off"
+	}
+}

.pa11yci.json

@@ -0,0 +1,28 @@
+{
+	"standard": "WCAG2AA",
+	"level": "warning",
+	"concurrency": 1,
+	"defaults": {
+		"reporters": [
+			[
+				"pa11y-ci-reporter-html",
+				{
+					"destination": "./reports"
+				}
+			]
+		],
+		"wait": 3000,
+		"runners": [
+			"axe"
+		],
+		"timeout": 100000,
+		"hideElements": "",
+		"ignore": [
+		],
+		"defaults": {
+			"chromeLaunchConfig": {
+				"executablePath": "/snap/bin/chromium"
+			}
+		}
+	}
+}

_site/js/script.js

@@ -0,0 +1,32 @@
+(function () {
+	"use strict";
+
+	// Toggle switch component
+	var switches = document.querySelectorAll('[role="switch"]');
+
+	switches.forEach(function (el) {
+		el.addEventListener('click', function () {
+			var checked = this.getAttribute('aria-checked') === 'true' || false;
+			this.setAttribute('aria-checked', !checked);
+
+			if (this.classList.contains('disable-css')) {
+				var chart = this.parentNode.nextElementSibling;
+				chart.classList.toggle('chaarts');
+			}
+		});
+	});
+
+	// Scrollable tables
+	var regions = document.querySelectorAll('.table-container');
+
+	if (window.matchMedia('(min-width: 30em)').matches) {
+		regions.forEach(function (el) {
+			var width = el.offsetWidth;
+			var table = el.querySelector('table');
+
+			if (table.offsetWidth > width) {
+				el.setAttribute('tabindex', '0');
+			}
+		});
+	}
+})(document);

_site/scss/print.scss

@@ -0,0 +1,63 @@
+@media print {
+	body > :not(main),
+	main > :not(.deck),
+	*:not(.card)::after,
+	*:not(.card)::before, {
+		display: none !important;
+	}
+
+	html,
+	body,
+	body > * {
+		background: none !important;
+	}
+
+	/**
+		* 1. No orphans
+		* 2. No widows
+		*/
+	p,
+	blockquote,
+	.deck .card {
+		orphans: 3; /* 1 */
+		widows: 3; /* 2 */
+	}
+
+	/* @note Avoid random page break */
+	ul,
+	ol,
+	blockquote,
+	.deck .card {
+		page-break-inside: avoid;
+		break-inside: avoid;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	caption {
+		page-break-after: avoid;
+	}
+
+	/**
+		* @note Display links' target, except for images
+		*/
+	a::after {
+		content: " (" attr(href) ") ";
+		display: inline-block !important;
+	}
+
+	/* Hide anchors' target */
+	a::after img,
+	a[href^="#"]::after,
+	a[href^="javascript"]::after {
+		content: "";
+	}
+
+	abbr::after {
+		content: " (" attr(title) ") ";
+	}
+}

_site/scss/styles.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+/* ==================== */
+/* == Vendors
+/* ==================== */
+@use "sseeeedd/src/scss/styles";
+@use "vendors/prism";
+
+.mb-0 {
+	margin-bottom: 0 !important;
+}
+
+.pb-0 {
+	padding-bottom: 0 !important;
+}
+
+.fly-out [rel]::before {
+	content: "\1F30D\A0";
+}

src/scss/vendors/_prism.scss → _site/scss/vendors/_prism.scss

@@ -13,7 +13,7 @@ pre[data-line] {
 	padding: .25em;
 	margin-top: 3.15em;
 	background: white;
-  mix-blend-mode: soft-light;
+	mix-blend-mode: soft-light;
 	pointer-events: none;
 	line-height: inherit;
 	white-space: pre;
@@ -26,5 +26,5 @@ pre[data-line] {
 	left: .5em;
 	min-width: 1ch;
 	color: black;
-  font-weight: 700;
+	font-weight: 700;
 }

_site/templates/accueil.njk

@@ -0,0 +1,211 @@
+{% extends "index.njk" %}
+
+{% block lang %}fr{% endblock %}
+
+{% block meta %}
+	<title>chaarts</title>
+	<meta property="og:url" content="https://ffoodd.github.io/chaarts/accueil.html">
+	<meta property="og:title" content="chaarts">
+	<meta property="og:type" content="article">
+	<meta property="og:description" name="description" content="Graphiques de données avec HTML & CSS">
+	<meta name="twitter:card" content="summary">
+	<link rel="alternate" hreflang="en" href="https://ffoodd.github.io/chaarts/">
+{% endblock %}
+
+{% block skiplinks %}
+	<div>
+		<a href="#nav" class="sr-only sr-only-focusable">Aller à la navigation</a>
+		<a href="#main" class="sr-only sr-only-focusable">Aller au contenu</a>
+	</div>
+{% endblock %}
+
+{% block label %}Navigation principale{% endblock %}
+
+{% block navigation %}
+	<ul class="fly-out">
+		<li><a aria-current="page">Accueil</a></li>
+		<li><a href="./barres.html">Barre</a></li>
+		<li><a href="./courbe.html">Courbe</a></li>
+		<li><a href="./histogramme.html">Histogramme</a></li>
+		<li><a href="./camembert.html">Camembert</a></li>
+		<li><a href="./radar.html">Radar</a></li>
+		<li class="ml-auto">
+			<a rel="alternate" hreflang="en" lang="en" href="./"
+				 aria-label="English version" title="English version">EN</a>
+		</li>
+		<li>
+			<a href="https://github.com/ffoodd/chaarts/" class="d-flex" hreflang="en">
+				<svg viewBox="0 0 16 16" height="16" width="16" aria-hidden="true">
+					<path fill-rule="evenodd"
+								d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+				</svg>
+				&nbsp;GitHub
+			</a>
+		</li>
+	</ul>
+{% endblock %}
+
+{% block main %}
+	<h1>Graphiques</h1>
+
+	<p>
+		Les différentes versions de graphiques présentées pour le moment reposent uniquement
+		sur un balisage sémantique —&nbsp;à base de <code>&lt;table&gt;</code>&nbsp;—
+		et une tartine de <strong>variables CSS portées par les balises</strong>.
+		Aucun JavaScript n’est requis pour l’affichage, et les styles sont
+		<strong>améliorés progressivement</strong> selon les capacités de votre navigateur.
+	</p>
+
+	<p>
+		<strong>Note</strong>&nbsp;: en vertu du caractère <strong>expérimental</strong>
+		de ces techniques et d’une <strong>fondation solide</strong> améliorée progressivement,
+		je ne précise pas le <strong>support navigateur</strong> de chaque exemple —&nbsp;mais
+		il va de soi que ce n’est pas magique, et que seuls les navigateurs modernes répondent à l’appel,
+		<a hreflang="en" href="https://caniuse.com/#search=clip-path">à l’exception notable de Edge
+			qui ne supporte pas (encore) <code>clip-path</code></a>.
+		Les autres navigateurs affichent un tableau correctement stylé, et c’est chouette.
+	</p>
+
+	<h2 id="accessibilite">L’accessibilité</h2>
+
+	<p>
+		Un effort conséquent a été porté à l’accessibilité.
+		Comme évoqué précédement, <strong>un balisage sémantique et structuré est un pré-requis</strong>
+		—&nbsp;mais ça ne suffit pas. Les <abbr lang="en" title="Cascading StyleSheet"
+																						aria-label="Cascading StyleSheet">CSS</abbr>
+		sont appliqués aussi progressivement que possible, afin de garantir le meilleur affichage
+		possible des données pour chaque internaute.
+	</p>
+
+	<h3>Tableau accessible</h3>
+
+	<p>Piqure de rappel&nbsp;:</p>
+
+	<ul>
+		<li>un tableau doit démarrer par un <code>&lt;caption&gt;</code>&nbsp;;</li>
+		<li>
+			les cellules d’en-tête <code>&lt;th&gt;</code> doivent porter un attribut <code>scope</code>,
+			avec une valeur <var>row</var> ou <var>col</var> selon le cas&nbsp;;
+		</li>
+		<li>
+			et vous aurez généralement besoin de distinguer l’entête du corps grâce à
+			<code>&lt;thead&gt;</code> et <code>&lt;tbody&gt;</code>&nbsp;;
+		</li>
+		<li>
+			pour les valeurs disposant d’une unité&nbsp;: si vous vous aventurez à utiliser l’élement
+			<code>&lt;abbr&gt;</code> pour utiliser sa version abrégée, pensez à doubler l’attribut
+			<code>title</code> avec l’attribut <code>aria-label</code> —&nbsp;cela en améliorera
+			considérablement l’intérêt pour de nombreux internautes.
+		</li>
+	</ul>
+
+	<p>
+		Pour d’autres astuces utiles, je vous recommande chaleureusement la lecture
+		du <a hreflang="en" href="https://inclusive-components.design/data-tables/">
+			composant inclusif <em lang="en">Data Tables</em> de <cite>Heydon Pickering</cite></a>,
+		qui est une véritable mine d’or.
+	</p>
+
+	<h3>Motifs</h3>
+	<p>
+		Pour <strong>distinguer les différentes zones autrement que par la couleur</strong>, un motif
+		<abbr lang="en" title="Scalable Vector Graphics" aria-label="Scalable Vector Graphics">svg</abbr>
+		est appliqué en
+		<abbr lang="en" title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr>
+		—&nbsp;vous en trouverez quelques-uns sur le site
+		<a hreflang="en" lang="en" href="https://www.heropatterns.com/">Hero Patterns</a>&nbsp;:
+	</p>
+	<ol>
+		<li>
+			afin d’améliorer <strong>le mélange avec les couleurs ou dégradés d’arrière-plan</strong>, la propriété
+			<code>background-blend-mode</code> est utilisée avec la valeur <code>hard-light</code>&nbsp;;
+		</li>
+		<li>
+			les <strong>tailles et positions du motif</strong> dépendent directement de la valeur et de l’échelle du
+			graphique,
+			selon le type de graphique&nbsp;;
+		</li>
+		<li>
+			pour ne pas embarquer trop de fichiers externes, on utilise
+			<a hreflang="en" href="https://www.trysmudford.com/blog/using-css-custom-properties/">une technique
+				proposée par <cite>Trys Mudford</cite> pour inclure nos
+				<abbr lang="en" title="Scalable Vector Graphics" aria-label="Scalable Vector Graphics">svg</abbr>
+				en <i lang="en">data URi</i> dans une variable
+				<abbr lang="en" title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr> chacun</a>&nbsp;;
+			ainsi, une liste finie de motifs est utilisée dans le thème, sans jamais répéter le <abbr lang="en"
+																																																title="Scalable Vector Graphics"
+																																																aria-label="Scalable Vector Graphics">svg</abbr>.
+		</li>
+	</ol>
+
+	<div class="note">
+		<h4>Qu’encoder&nbsp;?</h4>
+		<p>
+			<a hreflang="en" href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris"><cite>Taylor Hunt</cite>
+				a rédigé un article complet sur l’optimisation des
+				<abbr lang="en" title="Scalable Vector Graphics" aria-label="Scalable Vector Graphics">svg</abbr>
+				passés en <i lang="en">data URi</i></a>. En résumé, seuls les chevrons et le
+			caractère «&nbsp;#&nbsp;» ont besoin d’être encodés dans le
+			<abbr lang="en" title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr>.
+			Ne vous fatiguez pas avec les autres caractères, leur encodage nuit sérieusement à la lisibilité.
+		</p>
+	</div>
+
+	{% include 'includes/_svg-encoding.njk' %}
+
+	<h3>Respect des préférences</h3>
+	<p>
+		Afin de respecter autant que possible les préférences des visiteurs,
+		de nombreux éléments ont été adaptés&nbsp;:
+	</p>
+	<ol>
+		<li>
+			les dimensions sont en unités relatives (<code>em</code> ou <code>rem</code> selon les cas),
+			afin de s’ajuster de manière cohérente au corps de texte hérité du navigateur et de pouvoir
+			être agrandi ou réduit sans perte&nbsp;;
+		</li>
+		<li>
+			les couleurs sont adaptées lorsque le <strong>mode de contrastes élevés</strong> de Windows est détecté à l’aide
+			de
+			<code>-ms-high-contrast: active</code>, inspiré par
+			<a hreflang="en" href="https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">
+				l’article de <cite>Greg Whitworth</cite></a> sur le sujet. Je vous conseille d’ailleurs
+			<a hreflang="en" href="http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html">
+				l’increvable page <q lang="en">Test of System Colors Specified in CSS 2</q> rédigée
+				par <cite>Ian Graham</cite></a>, éditée en… 2000&nbsp;!
+		</li>
+		<li>
+			les <strong>animations et transitions sont désactivées</strong> lorsque le système
+			expose cette préférence grâce à <code>prefers-reduced-motion: reduce</code>&nbsp;;
+		</li>
+		<li>
+			les <strong>effets de survol</strong> dont l’état initial consiste à masquer du contenu
+			sont activés contextuellement dans la requête média <code>@media (hover: hover) { … }</code>.
+		</li>
+	</ol>
+
+	<h3><code>display</code> et sémantique</h3>
+	<p>
+		<cite>Adrian Roselli</cite> explique que jouer avec le <code>display</code> d’un élément
+		<code>&lt;table&gt;</code> ou <code>&lt;dl&gt;</code> met en péril sa sémantique.
+		Cette dernière est donc «&nbsp;verrouillée&nbsp;» à l’aide des rôles
+		<abbr lang="en" title="Accessible Rich Internet Application"
+					aria-label="Accessible Rich Internet Application">aria</abbr>
+		dédiés —&nbsp;comme il l’explique
+		<a href="http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html" hreflang="en">dans un article
+			détaillé</a>.
+	</p>
+	<p>
+		C’est pourquoi chaque tableau est précédé d’un interrupteur —&nbsp;basé sur
+		<a hreflang="en" href="https://inclusive-components.design/toggle-button/">le composant inclusif
+			conçu par <cite>Heydon Pickering</cite></a>&nbsp;—
+		dont le seul et unique rôle est de désactiver les styles supplémentaires&nbsp;:
+	</p>
+
+	{% include 'includes/_inclusive-toggle.njk' %}
+
+	<p>
+		Voilà, nous sommes prêts à entrer dans le vif du sujet.<br>
+		<strong>Faites chauffer votre inspecteur&nbsp;!</strong>
+	</p>
+{% endblock %}