-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: upgrade deps and drop Gulp
- Loading branch information
Showing
138 changed files
with
22,463 additions
and
11,418 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,4 +39,4 @@ jobs: | |
run: npm ci | ||
|
||
- name: Build CSS | ||
run: npm run gulp compile | ||
run: npm run build |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,4 +39,4 @@ jobs: | |
run: npm ci | ||
|
||
- name: Lint | ||
run: npm run gulp lint | ||
run: npm run lint |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"extends": [ | ||
"html-validate:recommended" | ||
], | ||
"rules": { | ||
"aria-label-misuse": "off", | ||
"no-redundant-role": "off", | ||
"no-inline-style": "off" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} | ||
} | ||
} |
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) ") "; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
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 — à base de <code><table></code> — | ||
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> : 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 — 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> | ||
— 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 :</p> | ||
|
||
<ul> | ||
<li>un tableau doit démarrer par un <code><caption></code> ;</li> | ||
<li> | ||
les cellules d’en-tête <code><th></code> doivent porter un attribut <code>scope</code>, | ||
avec une valeur <var>row</var> ou <var>col</var> selon le cas ; | ||
</li> | ||
<li> | ||
et vous aurez généralement besoin de distinguer l’entête du corps grâce à | ||
<code><thead></code> et <code><tbody></code> ; | ||
</li> | ||
<li> | ||
pour les valeurs disposant d’une unité : si vous vous aventurez à utiliser l’élement | ||
<code><abbr></code> pour utiliser sa version abrégée, pensez à doubler l’attribut | ||
<code>title</code> avec l’attribut <code>aria-label</code> — 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> | ||
— vous en trouverez quelques-uns sur le site | ||
<a hreflang="en" lang="en" href="https://www.heropatterns.com/">Hero Patterns</a> : | ||
</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> ; | ||
</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 ; | ||
</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> ; | ||
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 ?</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 « # » 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 : | ||
</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 ; | ||
</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 ! | ||
</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> ; | ||
</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><table></code> ou <code><dl></code> met en péril sa sémantique. | ||
Cette dernière est donc « verrouillée » à l’aide des rôles | ||
<abbr lang="en" title="Accessible Rich Internet Application" | ||
aria-label="Accessible Rich Internet Application">aria</abbr> | ||
dédiés — 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 — basé sur | ||
<a hreflang="en" href="https://inclusive-components.design/toggle-button/">le composant inclusif | ||
conçu par <cite>Heydon Pickering</cite></a> — | ||
dont le seul et unique rôle est de désactiver les styles supplémentaires : | ||
</p> | ||
|
||
{% include 'includes/_inclusive-toggle.njk' %} | ||
|
||
<p> | ||
Voilà, nous sommes prêts à entrer dans le vif du sujet.<br> | ||
<strong>Faites chauffer votre inspecteur !</strong> | ||
</p> | ||
{% endblock %} |
Oops, something went wrong.