Commit 1b02d7de authored by Anne Cavalier's avatar Anne Cavalier

Merge branch 'develop'

parents efa0eafd ef9d9e8b
......@@ -32,9 +32,11 @@ Nous n'avons pour le moment pas mis en place de procédure de tests (nous sommes
### Documentation
Nos projets sont en "doc driven development" :)
Pour créer un nouveau module ou ajouter des fonctionnalités à un module existant, on commence par rédiger sa documentation dans un fichier markdown qui sera placé dans le module concerné.
De façon générale, toute proposition d'ajout ou de modification au dépôt doit être accompagnée d'explications pour les utilisateurs, au minimum en commentaires au sein d'un fichier.
De façon générale, toute proposition d'ajout ou de modification au dépôt doit être accompagnée d'explications pour les utilisateurs.
### Compatibilité
......@@ -59,7 +61,7 @@ Conventions d'écriture du code
* indentation à quatre espaces pour les fichiers javascript
* indentation à deux espaces pour tous les autres fichiers
* js :
** les scripts js peuvent soit être compatibles avec jquery 2.2.0 soit écrits en js pur ;
** les scripts js peuvent soit être compatibles avec jquery soit écrits en js pur ;
** ne pas hésiter à commenter ;
* scss :
** ouverture d'accolade après le sélecteur (laisser une espace entre le sélecteur et l'accolade) ;
......@@ -73,7 +75,8 @@ Licence
-------
En contribuant a Scampi ou Scampi-Twig vous acceptez de placer vos contributions en double licence MIT et CeCILL-B.
Leurs auteurs sont crédités dans la documentation du module.
Les auteurs d'un module sont crédités dans sa documentation.
Pour finir
----------
......
......@@ -2,6 +2,8 @@
Scampi est un ensemble de composants sass/js/html accessibles et responsive développés à la DILA (Direction de l’information légale et administrative). Il vise à être utilisé en interne et par nos prestataires ou partenaires.
[Documentation et démos](https://pidila.gitlab.io/scampi/)
- - -
## Table des matières
......@@ -29,12 +31,6 @@ Répertoires de ce dépôt :
Note 1: les modules préfixés '''u-''' sont destinés à la phase de développement et l’élaboration de styleguide.
Note 2: pour compiler la scss d’exemple du répertoire _test :
```bash
sass --watch _test
```
## Dépendances
Scampi est développé à l’aide du préprocesseur Sass. Il vous faudra donc disposer d’un outil de compilation. Le pôle internet utilise la version [gulp-sass](https://www.npmjs.com/package/gulp-sass) de nodejs mais vous pouvez utiliser tout compilateur de votre choix.
......@@ -49,10 +45,7 @@ Si vous utilisez Git pour vos développements et souhaitez mettre à jour Scampi
### En téléchargeant Scampi
Téléchargez l’archive de Scampi et placez-la dans votre répertoire de styles. Cette méthode vous autorise à modifier ses fichiers pour votre propre usage.
Scampi est conçu pour être utilisé avec Sass. Néanmoins, si vous souhaitez télécharger la CSS et les js compilés pour les surcharger ensuite vous pouvez également télécharger [Scampi Vanilla]() *à venir avant la fin de 2016*.
[Téléchargez](https://gitlab.com/pidila/scampi/repository/master/archive.zip) l’archive de Scampi et placez-la dans votre répertoire de styles. Cette méthode vous autorise à modifier ses fichiers pour votre propre usage mais en perdant l'opportunité de le mettre à jour automatiquement.
## Documentation
......@@ -60,17 +53,14 @@ Sauf mention précisée dans sa documentation, chaque module est utilisable sans
Un fichier markdown est présent dans chaque module pour documenter son but et son usage. Lire les [principes d’utilisation et de personnalisation d’un module](modules/README.md).
Démonstration et documentation complète de Scampi à venir sur un site dédié *(fin décembre 2016)*.
Le projet est versionné selon la [gestion sémantique de version](http://semver.org/lang/fr/).
## Contributions
Les contributions sont les bienvenues. La façon la plus simple est de forker ce dépôt puis de faire des pull request depuis celui-ci. Idéalement vous devriez consulter au préalable notre [guide du contributeur](https://gitlab.com/pidila/scampi/blob/master/CONTRIBUTING.md).
Si vous détectez une anomalie ou souhaitez proposer une évolution vous pouvez également [ouvrir un bug](https://gitlab.com/pidila/scampi/issues) sur le tracker de notre dépôt.
Le projet est versionné selon la [gestion sémantique de version](http://semver.org/lang/fr/).
## Ressources et bibliothèques tierces parties utilisées
| nom | version | licence | url | informations complémentaires |
......@@ -83,11 +73,12 @@ Si vous détectez une anomalie ou souhaitez proposer une évolution vous pouvez
| Bootstrap | v4.0.0-alpha-4 | MIT License | https://github.com/twbs/bootstrap |
| svguse | V1.2.4 | MIT License | https://github.com/Keyamoon/svgxuse |
| bootstrap-accessibility-plugin | V1.0.4 | BSD-3-clause | https://github.com/paypal/bootstrap-accessibility-plugin/ |
| Feathericons | dev | MIT Licence | https://github.com/feathericons/feather
## Auteurs
Pidila (Pôle internet de la DILA).
Pidila (Pôle intégration HTML de la DILA).
### Contact
......@@ -105,6 +96,4 @@ Vous pouvez utiliser Scampi avec l’une ou l’autre licence.
La documentation est sous licence [Creative Commons CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/fr/).
Note : cette page s’inspire de [https://github.com/edx/ux-pattern-library](https://github.com/edx/ux-pattern-library)
......@@ -184,18 +184,18 @@
<p>Insertion en icone simple</p>
<p>
<svg aria-hidden="true" class="svg-icon">
<svg class="svg-icon" aria-hidden="true" focusable="false">
<use xlink:href="../modules/svg-icons/icon-sprite.svg#lien_externe" />
</svg>
<svg aria-hidden="true" class="svg-icon">
<svg class="svg-icon" aria-hidden="true" focusable="false">
<use xlink:href="../modules/svg-icons/icon-sprite.svg#lien_download" />
</svg>
</p>
<p>Insertion en lien</p>
<p>
<a href="http://url-de-destination" target="_blank">Lien externe<svg aria-hidden="true" class="icon svg-icon">
<a href="http://url-de-destination" target="_blank">Lien externe<svg class="svg-icon" aria-hidden="true" focusable="false">
<use xlink:href="../modules/svg-icons/icon-sprite.svg#lien_externe" />
</svg><span class="sr-only">(nouvelle fenêtre)</span></a>
</p>
......
Changelog
====================================================================
v0.3
--------------------------------------------------------------------
### Amélioration des modules, notamment sur le plan de l'accessibilité :
**Général :**
Suppression du speak:none appliqué à des sélecteurs css (notamment lors d'ajouts de contenus décoratifs via :after ou :before) car cette règle n'est pas toujours bien respectée par les aides techniques. Lesdits contenus décoratifs sont désormais encapsulés (avec ou sans :before / :after) dans un span aria-hidden true.
**Modules :**
- blockquote : fix typo dans le mixin qui empêchait la prise en compte du font-style par défaut
- breadcrumb :
- sémantique html, construction en ol/li
- déplacement du séparateur sur un span aria-hidden true
- buttons :
- ajout de variables pour les styles par défaut des boutons (class .btn)
- collapse :
- restauration de l'outline au focus qui avait disparu
- placement du symbole dans un span aria-hidden=true
- mise à jour du script en v1.8.0
- forms :
- ajout d'une class .form-duo pour des champs côte à côte
- suppression de l'outline:none sur le focus des inputs
- ajout de messages d'erreurs in situ
- correction d'une variable érronée d'une media query
- menu-simple :
- attribut aria-expanded true|false sur le bouton "hamburger"
- amélioration cosmétique quand le libellé passe sur plusieurs lignes
- wrapper jquery autour du script pour éviter les conflits avec les autres scripts
- déplacement du séparateur sur un span aria-hidden true
- modal :
- bugfix: suppression du aria-hidden="true" quand la modale est ouverte
- suppression du mixin opacity (montée des versions IE compat)
- pagination :
- ajout d'un role="navigation" sur nav
- remplacement de l'aria-label par un title pour "page précédente/suivante"
- ajout d'un title explicite sur chaque numéro de page ("page 1" ...)
- site-banner-simple :
- alt vide sur le logo
- ajout d'une baseline
- gestion du responsive des 3 éléments (logo, titre, baseline)
- svg-icons :
- ajout de l'attribut focusable false pour correction de bug IE11
- réglage à 1em de la taille par défaut
- trois icônes livrées par défaut (lien externe, courriel, lien téléchargement) assorties de leur sprite
- textarea-counter :
- amélioration de la restitution du décompte par les aides techniques
- u-comments :
- attribut aria-expanded true|false sur le bouton déclencheur
- ajout d'un effet au focus et au hover sur le bouton déclencheur
- u-debug :
- simplification de l'affichage du rythme vertical
### Dépendances :
Suppression du fichier jquery.min.js ; c'est désormais à l'utilisateur de choisir la version qui lui convient et de l'importer dans son projet. La documentation reflète ce nouveau process.
### Documentation :
- Liens dans modules/readme vers les pages de doc/démo sur le site du PiDILA
- Actualisation et rafraîchissement des fichiers md de presque chaque module
- Création de doc pour des modules qui en manquaient
v0.2
--------------------------------------------------------------------
......
# Core - Basics
<p class="info-file">Fichiers du répertoire /scampi/core/basics/</p>
## normalize
Normalize.css est un projet open-source de Nicolas Gallagher. Son propos est ainsi décrit par son auteur :
......
# Core
<p class="info-file">Fichiers du répertoire /scampi/core/</p>
## Contenu du core
Fichiers importés dans le core :
......@@ -26,12 +24,3 @@ Fichiers importés dans le core :
- **helpers** : ensemble de classes à importer à la fin de la liste de tous les imports.
Ces fichiers sont détaillés et commentés dans les pages [basics](core-basics.html), [helpers](core-helpers.html), [mixins](core-mixins.html) et [settings](core-settings.html).
## Core ou base ?
Nous avons choisi de proposer Scampi sous forme de composants « autoportés ». Chacun d’eux peut être utilisé de façon autonome et chaque répertoire de module contient les sources Sass, les éventuels scripts et la documentation qui lui sont propres. C’est pourquoi le `core` est réduit à l’indispensable pour initier tout projet.
Cependant, la plupart des projets réclameront des règles de base plus riches pour les éléments html et la présence de modules additionnels courants.
Nous avons constitué la liste de cette *base* dans le fichier scampi/_test/scampi-base.scss.
# Core- Helpers
<p class="info-file">Fichier du répertoire /scampi/core/helpers/</p>
Mise à disposition de classes utilitaires pour les layouts ou le texte.
## layout-utils
......
# Core - Mixins
<p class="info-file">Fichiers du répertoire /scampi/core/mixins</p>
## Texte
### hover
......
# Core - Settings
<p class="info-file">Fichier /scampi/core/core-scampi-settings</p>
Les settings du core comportent des options de configuration et les variables nécessaires au core ou communes à plusieurs modules.
<div class="alert alert-warning">
......
......@@ -26,7 +26,7 @@ $cursor-disabled : not-allowed !default;
// Niveaux de gris et couleurs principales
// ---------------------------------------
// palette des gris
$gray-base: #123456 !default;
$gray-base: #3C434E !default;
$gray: $gray-base;
$gray-1: darken($gray-base, 5%);
......@@ -40,14 +40,14 @@ $gray-8: lighten($gray-base, 55%);
$gray-9: lighten($gray-base, 60%);
$gray-10: lighten($gray-base, 65%);
$primary-color: #1f6fb1 !default;
$secondary-color: #d43900 !default;
$primary-color: #004774 !default;
$secondary-color: #800f48 !default;
// Body
$body-bg: #fff !default;
$body-color: $gray-1 !default;
$text-muted: $gray-7 !default;
$text-muted: $gray-4 !default;
// Links
......@@ -56,12 +56,6 @@ $link-decoration: underline !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Items actifs des composants (nav, dropdown...)
$component-active-color: #fff !default;
$component-active-bg: $primary-color !default;
// Form states and alerts
$success-color: #5cb85c !default;
......
// Mixin opacity
// =======================================================================
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: alpha(opacity=$opacity-ie);
}
This diff is collapsed.
# Scripts javascript
<p class="info-file">Fichiers du répertoire /scampi/js/</p>
Les scripts communs à Scampi sont placés dans le répertoire **js/**
## Description des fichiers
### libs
Trois types de scripts sont utilisés avec Scampi :
* modernizr.js présent dans js/libs/ à importer dans le head;
* jquery en dépendance (à installer soi-même et à importer en fin de body);
* les scripts propres à chaque module utilisé pour un projet (à concaténer ensemble et importer en fin de body, après jquery).
### modernizr.js
Ces fichiers sont à importer tels quels.
**modernizr.js** ajoute des classes sur `<body>` qui permettront d’appliquer des règles en fonction des *features* supportées.
- **jquery.min.js** (optionnel selon votre projet) : plusieurs de nos modules s’appuient sur jquery. Si vous utilisez une autre bibliothèque javascript pensez à adapter les scripts des modules.
- **modernizr.js** ajoute des classes sur `<body>` qui permettront d’appliquer des règles en fonction des *features* supportées.
### jquery.js
## Ordre des imports
Plusieurs de nos modules s'appuient sur jQuery (version 2.2.0 minimum). La bibliothèque n'est pas incluse dans Scampi et vous devrez [la télécharger](https://code.jquery.com/jquery-2.2.0.min.js "Télécharger la version 2.2.0 minifiée de jQuery") au besoin.
**modernizr.js** doit être importé dans le head.
Si vous utilisez une autre bibliothèque javascript pensez à adapter les scripts des modules.
Les autres scripts sont importés à la fin du fichier html, juste avant la fermeture du body. Nous recommandons de les compiler afin de n'en importer qu'un.
### Scripts propres aux modules
<div class="focus">
<p>En savoir plus sur <a href="../../developpement/integration/tag-html.html">le contenu du head et l'ordre d’appel des scripts</a>.</p>
</div>
Les scripts nécessaires au fonctionnement des modules sont présents dans le répertoire du module concerné. Nous recommandons de copier dans un répertoire dédié tous les scripts des modules utilisés dans un projet et de les concaténer pour n'importer qu'un seul fichier en fin de body.
......@@ -64,29 +64,31 @@ $blockquote-border-color: $primary-color;
Modules disponibles
-------------------
Les liens renvoient vers la page de documentation et démonstration de chaque module.
| nom | Description |
| :-- | :---------- |
| adobe-blank | À ajouter en complément du module fonticon pour cacher des alternatives aux icônes si elles sont utilisées en fonte d'icônes. |
| alert | Messages d'alerte (information, succès, warning, danger/erreur).|
| anchor-focus | Corrige un bug de focus sur Chrome/Safari/IE.|
| blockquote | Blocs de citation. |
| breadcrumb | Fil d'ariane |
| browsehappy | Affichage et styles d'un bloc recommandant la mise à jour des versions obsolètes d'Internet Explorer. |
| buttons | Boutons et groupes de boutons. |
| collapse | Affichage/Masquage de blocs de contenu. |
| fontface | Gestion des webfonts. |
| fonticon | Règles pour la mise en œuvre de fonte d'icônes ; à utiliser en parallèle avec le module adobe-blank pour l'accessibilité. |
| forms | Formulaires. |
| input-group | Gestion des groupes de champs de formulaires. |
| menu-simple | Version basique d'un menu horizontal responsive à un seul niveau. |
| modal | Fenêtres modales. |
| pagination | Affichage de la pagination. |
| rwd-utils | Fonctions, mixins et styles utilitaires pour le responsive. |
| site-banner-simple | Version basique d'un entête de site avec logo et nom du site (peut servir de base pour un placement de marianne). |
| skip-link | Liens d'évitement, aussi appelés liens d'accès rapides. |
| svg-icons | Permet l'utilisation de sprite d'icônes au format svg. |
| tables | Tableaux (dont responsive). |
| textarea-counter | Affiche le nombre de caractères restant lorsque le champ de saisie est limité. |
| u-comments | Afficher/maquer des "post-it" de commentaires pendant la phase de développement. |
| u-debug | Divers utilitaires de debug : points de rupture, maps, rythme horizontal. |
| u-palette | Création automatique d'une palette des couleurs principales d'un site en fonction des valeurs renseignées dans les settings du projet. |
| [adobe-blank](https://pidila.gitlab.io/scampi/documentation/adobe-blank.html) | À ajouter en complément du module fonticon pour cacher des alternatives aux icônes si elles sont utilisées en fonte d'icônes. |
| [alert](https://pidila.gitlab.io/scampi/documentation/alert.html) | Messages d'alerte (information, succès, warning, danger/erreur).|
| [anchor-focus](https://pidila.gitlab.io/scampi/documentation/anchor-focus.html) | Corrige un bug de focus sur Chrome/Safari/IE.|
| [blockquote](https://pidila.gitlab.io/scampi/documentation/blockquote.html) | Blocs de citation. |
| [breadcrumb](https://pidila.gitlab.io/scampi/documentation/breadcrumb.html) | Fil d'ariane |
| [browsehappy](https://pidila.gitlab.io/scampi/documentation/browsehappy.html) | Affichage et styles d'un bloc recommandant la mise à jour des versions obsolètes d'Internet Explorer. |
| [buttons](https://pidila.gitlab.io/scampi/documentation/buttons.html) | Boutons et groupes de boutons. |
| [collapse](https://pidila.gitlab.io/scampi/documentation/collapse.html) | Affichage/Masquage de blocs de contenu. |
| [fontface](https://pidila.gitlab.io/scampi/documentation/fontface.html) | Gestion des webfonts. |
| [fonticon](https://pidila.gitlab.io/scampi/documentation/fonticon.html) | Règles pour la mise en œuvre de fonte d'icônes ; à utiliser en parallèle avec le module adobe-blank pour l'accessibilité. |
| [forms](https://pidila.gitlab.io/scampi/documentation/forms.html) | Formulaires. |
| [input-group](https://pidila.gitlab.io/scampi/documentation/input-group.html) | Gestion des groupes de champs de formulaires. |
| [menu-simple](https://pidila.gitlab.io/scampi/documentation/menu-simple.html) | Version basique d'un menu horizontal responsive à un seul niveau. |
| [modal](https://pidila.gitlab.io/scampi/documentation/modal.html) | Fenêtres modales. |
| [pagination](https://pidila.gitlab.io/scampi/documentation/pagination.html) | Affichage de la pagination. |
| [rwd-utils](https://pidila.gitlab.io/scampi/documentation/rwd-utils.html) | Fonctions, mixins et styles utilitaires pour le responsive. |
| [site-banner-simple](https://pidila.gitlab.io/scampi/documentation/site-banner-simple.html) | Version basique d'un entête de site avec logo et nom du site (peut servir de base pour un placement de marianne). |
| [skip-link](https://pidila.gitlab.io/scampi/documentation/skip-link.html) | Liens d'évitement, aussi appelés liens d'accès rapides. |
| [svg-icons](https://pidila.gitlab.io/scampi/documentation/svg-icons.html) | Permet l'utilisation de sprite d'icônes au format svg. |
| [tables](https://pidila.gitlab.io/scampi/documentation/tables.html) | Tableaux (dont responsive). |
| [textarea-counter](https://pidila.gitlab.io/scampi/documentation/textarea-counter.html) | Affiche le nombre de caractères restant lorsque le champ de saisie est limité. |
| [u-comments](https://pidila.gitlab.io/scampi/documentation/u-comments.html) | Afficher/maquer des "post-it" de commentaires pendant la phase de développement. |
| [u-debug](https://pidila.gitlab.io/scampi/documentation/u-debug.html) | Divers utilitaires de debug : points de rupture, maps, rythme horizontal. |
| [u-palette](https://pidila.gitlab.io/scampi/documentation/u-palette.html) | Aide à la création de la palette des couleurs principales d'un site en fonction des valeurs renseignées dans les settings du projet. |
# Adobe-blank
<p class="info-file">Répertoire scampi/modules/adobe-blank</p>
Présentation
-------------
Une fonte qui n’affiche rien mais sera restituée par les aides techniques de lecture d’écran. On l’utilise pour offrir une alternative textuelle aux icônes utilisées via une fonticone.
Note : ce module vise notamment à être utilisé conjointement au module [fonticon](fonticon.html).
Une [fonte créée par Adobe](https://github.com/adobe-fonts/adobe-blank
) qui n’affiche rien mais dont le texte sera restitué par les aides techniques de lecture d’écran. On l’utilise pour offrir une alternative textuelle aux icônes utilisées via une fonte d’icones.
Pour mettre en œuvre ce module vous devez passer le setting `$enable-adobe-blank` à `true`.
Utilisation
-----------
Note : ce module vise à être utilisé conjointement au module [fonticon](fonticon.html).
Pour mettre en œuvre ce module vous devez passer le setting `$enable-adobe-blank` à `true`et affecter la class `blank` à l'élément que vous voulez masquer.
Exemple d’utilisation
Exemples d’utilisation
---------------------
```` html
<p>
<span class="blank">Texte alternatif</span>
<span class="icon icon-exemple" aria-hidden="true">Exemple d’icône</span>
</p>
<p><a href="#">
<span class="icon icon-download" aria-hidden="true"></span>
Rapport d'activité
<span class="blank">Télécharger</span>
</a></p>
<p><a href="#">
Un lien externe
<span class="blank">- Nouvelle fenêtre</span>
<span class="icon icon-external" aria-hidden="true"></span>
</a></p>
````
À noter
-------
Pour les icônes le Pôle intégration html de la DILA utilise plus volontiers un sprite SVG et le module [svg-icons](svg-icons) associé à du texte masqué par la [class sr-only](core-mixins).
......@@ -8,6 +8,12 @@ Messages d'alerte courants : information, succès, alerte, danger/erreur. Les bl
L'attribut `role="alert"` déclenche sa lecture immédiate au chargement de la page par les aides techniques. Pour cette raison, nous choisissons de ne pas mettre ce rôle sur les messages d'information.
Si vous utilisez ce composant pour afficher des messages de façon dynamique (apparition suite à l'activation d'un bouton ou la validation d'un formulaire sans rechargement de page par exemple) et que vous souhaitez faire vocaliser le contenu de ces messages par les lecteurs d'écran sans devoir déplacer le focus sur le message il faudra :
* Ajouter un `role="alert"` sur la `<div class="alert alert-xxx">`.
* Prévoir que la `<div class="alert alert-xxx" role="alert">` soit présente dans le code source par défaut mais vide.
* Générer le message à l'intérieur via javascript lorsque nécessaire.
Note : ce module est issu du framework Bootstrap.
Exemples d'utilisation
......@@ -15,24 +21,25 @@ Exemples d'utilisation
```` html
<div class="alert alert-success" role="alert">
<strong>Bravo !</strong> Votre compte a été créé.
<p class="alert-content"><strong>Bravo ! </strong>Votre compte a bien été créé.</p>
</div>
````
```` html
<div class="alert alert-info">
<strong>Messagerie :</strong> Vous avez deux nouveaux messages.
<p class="alert-content"><strong>Votre messagerie : </strong>Vous avez 123 nouveaux messages privés. <a href="#">Accédez à votre boîte de messages</a>.</p>
</div>
````
```` html
<div class="alert alert-warning" role="alert">
<strong>Attention !</strong> Votre porte-documents atteindra bientôt la limite autorisée.
<p class="alert-content"><strong>Attention ! </strong> Votre porte-documents atteindra bientôt la limite autorisée.</p>
</div>
````
```` html
<div class="alert alert-danger" role="alert">
<strong>Erreur :</strong> Le formulaire présente 2 erreurs et n'a pu être validé.
<div class="alert-content">
<p><strong>Erreur :-(</strong></p>
<p>Le formulaire est incomplet, il contient 2 erreur(s) : </p>
<ul>
<li>L’adresse électronique est incorrecte.</li>
<li>Le mot de passe est incorrect.</li>
</ul>
</div>
</div>
````
# Anchor focus
<p class="info-file">Répertoire scampi/modules/anchor-focus</p>
Présentation
-------------
Le script anchor-focus.js règle un bug présent dans Chrome/Safari/IE qui empêche le déplacement du focus à partir d’un lien ancré.
Le script anchor-focus.js règle un bug présent dans Chrome/Safari/IE qui perturbe le déplacement du focus après un lien ancré.
Ces navigateurs ne transportent pas le focus sur la cible du lien d’évitement lorsqu’il a été activé, la tabulation suivante ira donc sur l'élément focusable suivant le lien d'origine au lieu d'aller à l'élément focusable suivant l'ancre de sa destination, ce qui pose de gros problèmes d'accessibilité.
Plus d’informations : [skip-navigation-link-not-working-in-google-chrome](http://stackoverflow.com/questions/3572843/skip-navigation-link-not-working-in-google-chrome/6188217#6188217)
Utilisation
-----------
Il n'y a rien d'autre à faire qu'insérer le sript dans les scripts du projet. À noter : [scampi-twig](scampi-twig) embarque ce script par défaut.
@mixin blockquote($font-size: ($font-size-base * 1.25), $font-family: $font-family-base, $font-style: "normal") {
@mixin blockquote($font-size: ($font-size-base * 1.25), $font-family: $font-family-base, $font-style: normal) {
padding: ($spacer / 2) $spacer;
margin: 0 0 $spacer-y;
......
# Blockote
# Blockquote
Présentation
......
// Breadcrumb
// ----------
// ------------------------------------------------------------------
$breadcrumb-symbol: "\203A" !default;
$breadcrumb-sign : "\203A" !default;
@import "style-breadcrumb";
.breadcrumb {
font-size: .875em;
line-height: 1.25;
margin: .5em 0;
// liens successifs
a {
color: $body-color;
padding-right: .5em;
}
span {
display: inline-block;
padding-right: .5em;
&::after {
content: $breadcrumb-sign;
font-size: 1.25em;
}
}
// item actif
strong {
color: $primary-color;
font-weight: bold;
}
}
// Breadcrumb
// ------------------------------------------------------------------
.breadcrumb {
margin: .5em 0;
font-size: .875em;
line-height: 1.25;
}
.breadcrumb-list {
@include list-unstyled;
margin-bottom: 0;
margin-left: 0;
.breadcrumb-item {
display: inline-block;
padding-right: .5em;
&:not(:first-of-type) {
span[aria-hidden="true"]::after {
padding-right: .5em;
font-size: 1.25em;
content: $breadcrumb-symbol;
}
}
a {
color: $body-color;
}
// item actif
strong {
color: $primary-color;
font-weight: bold;
}
}
}
......@@ -3,7 +3,7 @@
Présentation
------------
Le breadcrumb (ou fil d’ariane) est un critère RGAA niveau AAA obligatoire au regard de la Charte Pidila.
Le breadcrumb (ou fil d’ariane) est un critère RGAA niveau AAA obligatoire au regard de la Checklist Pidila.
On l’affiche au-dessus du contenu principal. Idéalement on le place en premier élément du main ; ainsi lorsque l’utilisateur utilisera le lien d’accès rapide vers le contenu cet élément sera lu en premier.
......@@ -11,23 +11,22 @@ Les styles sont portés par la class `breadcrumb`.
### Accessibilité
Un attributs aria-label sur l’élément permet aux utilisateurs pilotant une aide technique d’être informés de la nature de cet élément.
Les éléments graphiques symbolisant l’arborescence (>, /, ->, etc.) sont insérés soit directement dans la source dans des spans dotés de l’attribut `aria-hidden="true"`, soit placés en css grâce aux pseudo-éléments.
Ce module adopte cette seconde option. Vous pouvez changer le caractère de séparation dans les styles du module avec la variariable `$breadcrumb-sign`. Sa valeur par defaut est ">"
Un attributs aria-label et un role navigation sur l’élément permettent aux utilisateurs pilotant une aide technique d’être informés de la nature de cet élément.
Les éléments graphiques symbolisant l’arborescence (>, /, ->, etc.) sont insérés soit directement dans la source dans des spans dotés de l’attribut `aria-hidden="true"`, soit placés en css grâce aux pseudo-éléments. Scampi combine ces deux méthodes.
Vous pouvez changer le caractère de séparation dans les styles du module avec la variable `$breadcrumb-symbol`. Sa valeur par defaut est ">".
Utilisation
-----------
````html
<nav class="breadcrumb" role="navigation" aria-label="Vous êtes ici :">
<a href="/">Accueil</a>
<a href="/blabla">Rubrique</a>
<a href="/blabla/blibli">Sous-rubrique</a>
<strong>Page active</strong>
<nav class="breadcrumb" role="navigation" aria-label="Vous êtes ici : ">
<ol class="breadcrumb-list">
<li class="breadcrumb-item"><span aria-hidden="true"></span><a href="/">Accueil</a></li>
<li class="breadcrumb-item"><span aria-hidden="true"></span><a href="#">Rubrique</a></li>
<li class="breadcrumb-item"><span aria-hidden="true"></span><a href="#">Sous-rubrique</a></li>
<li class="breadcrumb-item"><span aria-hidden="true"></span><strong aria-current="page">Titre de la page</strong></li>
</ol>
</nav>
````
......@@ -8,6 +8,11 @@ $btn-padding-x: 1em !default;
$btn-padding-y: .25em !default;
$btn-font-weight: normal !default;
$btn-default-color: $gray-3 !default;
$btn-default-bg: $gray-10 !default;
$btn-default-border: #ccc !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $primary-color !default;
$btn-primary-border: $btn-primary-bg !default;
......
......@@ -52,6 +52,10 @@ fieldset[disabled] a.btn {
// Alternate buttons
//
.btn {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
......
.js-to_expand[aria-hidden=true],
.js-to_expand[data-hidden=true] {
display: none;
}
$border-color-collapse-focus: $link-color !default;
$expand-symbol-closed: '+ ' !default;
$expand-symbol-open: '- ' !default;
.expandmore__button {
background: none;
font-size: inherit;
color: inherit;
border: none;
}
// // Exemple de règles pour visualiser la fonctionalité
// // plier /déplier
.expandmore__button:before,
.expandmore__button:before {
content : '+ ';
speak: none;
}
.expandmore__button[aria-expanded=true]:before,
.expandmore__button[data-expanded=true]:before {
content : '- ';
speak: none;
}
@import "style-collapse";
.js-to_expand[aria-hidden=true],
.js-to_expand[data-hidden=true] {
display: none;
}
.expandmore__button {
background: transparent;
font-size: inherit;
color: inherit;
border: 0;
&:focus {
outline: thin dotted;
border-color: $border-color-collapse-focus;