Add tag difficulty

src/_data/locales.js

@@ -28,15 +28,19 @@ module.exports = {
       label: 'Search'
     },
     filtersBar: {
-      label: 'Filters',
+      label: 'Filter by theme ',
       all: "All"
     },
     tags: {
+      list : "Associated themes :",
       componentExample: "Component example",
       mobile: 'Mobile',
       technicalArticle: 'Technical article',
       web: 'Web',
-      veille: 'Watch'
+      veille: 'Watch',
+      beginner: 'Beginner',
+      intermediate: 'Intermediate',
+      advanced: 'Advanced'
     },
     toc: {
       title: 'Table of content'
@@ -93,15 +97,19 @@ module.exports = {
       label: 'Rechercher'
     },
     filtersBar: {
-      label: 'Filtres',
+      label: 'Filtrer par thématique',
       all: 'Tout'
     },
     tags: {
+      list : "Thématiques associées :",
       componentExample: "Exemple de composant",
       mobile: 'Mobile',
       technicalArticle: 'Article technique',
       web: 'Web',
-      veille: 'Veille'
+      veille: 'Veille',
+      beginner: 'Débutant',
+      intermediate: 'Intermédiaire',
+      advanced: 'Avancé'
     },
     toc: {
       title: 'Sommaire'

src/_includes/components/ui.njk

@@ -70,24 +70,25 @@
       <h2 class="mb-1">
         <a href="{{ post.url }}" class="text-decoration-none">{{ post.data.title }}</a>
       </h2>
-      {% if displayDate == true and post.date %}
-        <time class="text-muted" datetime="{{ post.date.toISOString() }}">{% localizedDate post.date, locale  %}</time>
-      {% endif %}
-      {% if post.data.abstract %}
-        <p class="my-2">{{ post.data.abstract }}</p>
-      {% endif %}
       {% if displayTags == true and tags %}
-        <ul class="list-inline">
+       <span id="post_{{loop.index}}" class="sr-only">{{'tags.list' | translate}}</span>
+        <ul class="list-inline mb-1" aria-labelledby="post_{{loop.index}}">
           {%- for tag in tags -%}
             {%- set tagTranslationKey = 'tags.' + tag -%}
             <li class="list-inline-item">
-              <a href="?tag={{ tag }}" class="badge badge-secondary">
-                <span class="sr-only">{{ 'filtersBar.label' | translate }}&nbsp;</span>{{ tagTranslationKey | translate }}
+              <a href="?tag={{ tag }}" class="btn btn-dark btn-sm">
+                {{ tagTranslationKey | translate }}
               </a>
             </li>
           {%- endfor -%}
         </ul>
       {% endif %}
+      {% if displayDate == true and post.date %}
+        <time class="text-muted" datetime="{{ post.date.toISOString() }}">{% localizedDate post.date, locale  %}</time>
+      {% endif %}
+      {% if post.data.abstract %}
+        <p class="my-2">{{ post.data.abstract }}</p>
+      {% endif %}
     </article>
   </li>
 {% endif %}{%- endfor -%}
@@ -100,24 +101,26 @@
 
 {%- macro filtersBar(posts) -%}
 {% set tags = posts | getPostsTags %}
-<nav id="filtersbar" class="hidden-if-no-js o-nav-local navbar-light mb-4 d-flex align-items-center" aria-labelledby="filtersbar_label" role="navigation">
-  <h2 id="filtersbar_label" class="h6 mb-0 pr-3">{{ 'filtersBar.label' | translate }} :</h2>
+<div class="hidden-if-no-js o-nav-local navbar-light mb-4 d-flex align-items-center">
+<h2 id="filtersbar_label" class="h6 mb-0 pr-3">{{ 'filtersBar.label' | translate }} :</h2>
+<nav id="filtersbar" aria-labelledby="filtersbar_label" role="navigation">
   <ul class="nav">
     <li class="nav-item">
       <a href="?all" class="nav-link" data-tag="all">
-        <span class="sr-only">{{ 'filtersBar.label' | translate }}&nbsp;</span>{{ 'filtersBar.all' | translate }}
+        {{ 'filtersBar.all' | translate }}
       </a>
     </li>
     {%- for tag in tags -%}
       {%- set tagTranslationKey = 'tags.' + tag -%}
       <li class="nav-item">
         <a href="?tag={{ tag }}" class="nav-link" data-tag="{{ tag }}">
-          <span class="sr-only">{{ 'filtersBar.label' | translate }}&nbsp;</span>{{ tagTranslationKey | translate }}
+          {{ tagTranslationKey | translate }}
         </a>
       </li>
     {%- endfor -%}
   </ul>
 </nav>
+</div>
 {%- endmacro -%}
 
 {%- macro toc(mode = "list") -%}

src/_includes/templates/default.njk

@@ -23,6 +23,22 @@
           </div>
         {% endif %}
         <main id="main-content" class="col-md-{{ mainContentColumn }}" role="main">
+          {% if titleBeforeTag %}
+            <h1>{{ title }}</h1>  
+            {% if tags %}
+            <div class="bg-200 mx-n1 p-1 my-2">
+              <p class="d-inline" id="filters_label">
+                <strong>{{'tags.list' | translate}}</strong>
+              </p>
+              <ul class="d-inline list-inline" aria-labelledby="filters_label">
+              {%- for tag in tags -%}
+                {%- set tagTranslationKey = 'tags.' + tag -%}
+                <li class="list-inline-item"><a href="../?tag={{ tag }}" class="btn btn-dark btn-sm" data-tag="{{ tag }}">{{ tagTranslationKey | translate }}</a></li>
+              {% endfor -%}
+              </ul>
+            </div> 
+            {% endif %}
+          {% endif %}  
           {{ content | safe }}
         </main>
         {% if displayToc == true %}

src/en/articles/accessible-name.md

@@ -1,12 +1,12 @@
 ---
 title: "The accessible name in HTML"
 abstract: "Accessible name, what is it and his link with Assistive Technologies"
+titleBeforeTag: true
 date: "2019-02-20"
 tags:
   - web
+  - intermediate
 ---
-
-# The accessible name in <abbr>HTML</abbr>
 
 ## Introduction
 

src/en/articles/accessible-svg.md

@@ -1,13 +1,13 @@
 ---
-title: "Some best practices for SVG images"
+title: "SVG images are used more and more on the web but what about their accessibility ?"
 abstract: "How to make SVG images accessible"
+titleBeforeTag: true
 date: "2021-01-01"
 tags:
   - web
+  - intermediate
 ---
 
-# SVG images are used more and more on the web but what about their accessibility?
-
 Here are some ideas knowing that the support for browsers and assistive technologies evolves very quickly!
 Important: So remember to test your implementations on the browsers/assistive technologies targets the most used by your users, whatever the solution for which you choose.
 

src/en/articles/aria-attributes-that-can-save-you.md

@@ -1,13 +1,13 @@
 ---
 title: "ARIA attributes that can save you"
 abstract: "Some ARIA attributes you must know"
+titleBeforeTag: true
 date: "2018-07-18"
 tags:
   - web
+  - intermediate
 ---
 
-# <abbr>ARIA</abbr> attributes that can save you: `aria-label`, `aria-labelledby` and `aria-describedby` 
-
 ## Introduction
 ### Accessible name and description
 

src/en/articles/aria-live-alert.md

@@ -1,12 +1,12 @@
 ---
 title: "The aria-live attribute and the role alert"
 abstract: "When and how to use roles and attributes of live content type"
+titleBeforeTag: true
 date: "2020-01-08"
 tags:
   - web
+  - intermediate
 ---
-
-# The aria-live attribute and the role alert
 
 Users who navigate using a screen reader are not always aware of changes made on the page. When information is updated or when a message appears, it is sometimes necessary to make the screen reader speak to inform the user. To do this, the <abbr>ARIA</abbr> language has the role `alert` and the attribute` aria-live`.
 

src/en/articles/aria-status-messages.md

@@ -1,13 +1,13 @@
 ---
 title: "Use ARIA for status messages"
 abstract: "Status messages, how to with ARIA"
+titleBeforeTag: true
 date: "2019-02-20"
 tags:
   - web
+  - intermediate
 ---
 
-# Use <abbr>ARIA</abbr> for status messages
-
 ## Status message and accessibility
 The WCAG 2.1 criterion <a href="https://www.w3.org/TR/WCAG21/#status-messages">4.1.3 Status Messages</a> requires that important informations for the user, which do not induce a change of context (no opening of a new window, no focus on the content, no modification of the content or the viewport), are seen via properties and roles (<abbr>ARIA</abbr>) by anyone using <abbr>AT</abbr> without taking focus on the message.
 

src/en/articles/autocomplete-component.md

@@ -1,9 +1,11 @@
 ---
 title: "Best practices for the accessibility of an autocompletion component"
 abstract: "Presentation of our approach and selected guidelines for autocompletion components"
+titleBeforeTag: true
 date: "2020-12-23"
 tags:
   - web
+  - advanced
 ---
 
 # Guidelines for the accessibility of an autocompletion component

src/en/articles/captcha-accessibility.md

@@ -1,13 +1,13 @@
 ---
 title: "CAPTCHA Accessibility"
 abstract: "CAPTCHA and accessibility"
+titleBeforeTag: true
 date: "2018-02-08"
 tags:
   - web
+  - advanced
 ---
 
-# CAPTCHA Accessibility
-
 ## Introduction
 
 A CAPTCHA (“Completely Automated Public Turing-test to tell Computers and Humans Apart”) is an automated test aimed at telling apart a human user from a software program. It is often used on forms to prevent spam.

src/en/articles/disable-elements.md

@@ -1,9 +1,11 @@
 ---
 title: "Disable HTML elements"
 abstract: "How to disable HTML elements in the page?"
+titleBeforeTag: true
 date: "2021-07-01"
 tags:
   - web
+  - beginner
 ---
 
 ## Disable form elements
@@ -29,7 +31,7 @@ If a `<fieldset>` is disabled, the descendant form controls are all disabled.
 </fieldset>
 ```
 
-# Disable a link
+## Disable a link
 
 To disable a link, unlike the previous technique, the use of the `disabled` attribute is not allowed. It is still possible to disable a link by following 3 steps:
 - remove the `href` attribute so that it can no longer receive the focus

src/en/articles/download-links.md

@@ -1,13 +1,13 @@
 ---
 title: "Some best practices for downloading links"
 abstract: "How to make usable and understandable downloading links"
+titleBeforeTag: true
 date: "2020-09-01"
 tags:
   - web
+  - intermediate
 ---
 
-# Best practices for download links
-
 There are different types of links: [classic links](/en/web/develop/general-navigation) allowing to reach a new page, [skip links] (/en/articles/skip-links-best-practices) allowing to move within the page and finally those which interest us in this article, the links allowing to download a file.
 
 A link to download a file should respect the following rules:

src/en/articles/font-size-and-colors.md

@@ -1,13 +1,13 @@
 ---
 title: "Text size and color "
 abstract: "What size and what colors should the texts adopt?"
+titleBeforeTag: true
 date: "2021-07-05"
 tags:
   - web
+  - beginner
 ---
 
-# Text size and color
-
 In this article, we will try to answer the following questions concerning the accessibility of texts in web pages:
 - What size should I use for the texts?
 - What is the minimum font size to respect?

src/en/articles/html5-aria.md

@@ -1,13 +1,13 @@
 ---
 title: "HTML5 & ARIA"
 abstract: "HTML 5 and ARIA introduction"
+titleBeforeTag: true
 date: "2016-09-08"
 tags:
   - web
+  - beginner
 ---
 
-# <abbr>HTML5</abbr> & <abbr>ARIA</abbr>
-
 ## Introduction
 
 Web sites are increasingly dynamic (asynchronous loading, dynamic content generation) and interactive (rich interface components: slider, datepicker…). So it is very difficult or impossible to make these components accessible with conventional <abbr>HTML</abbr>.

src/en/articles/single-page-app.md

@@ -1,12 +1,12 @@
 ---
-title: "Single Page Applications (SPA)"
+title: "Recommendations for Single Page Applications"
 abstract: "Recommendations for Single Page Applications"
+titleBeforeTag: true
 date: "2021-06-25"
 tags:
   - web
+  - advanced
 ---
-
-<h1>Recommendations for Single Page Applications</h1>
 
 A <a href="https://developer.mozilla.org/en-US/docs/Glossary/SPA">single-page web application (SPA)</a> is a web application in which page refresh never occurs. During navigation, only portions of the page are dynamically updated using JavaScript code. 
 

src/en/articles/skip-links-best-practices.md

@@ -1,13 +1,13 @@
 ---
 title: "Skip links best practices"
 abstract: "Skip links, what is it and how to implement them"
+titleBeforeTag: true
 date: "2019-06-19"
 tags:
   - web
+  - beginner
 ---
 
-# Skip links best practices
-
 ## What is an skip link?
 
 ### What is it?

src/en/articles/watch-august-september-2021.md

@@ -1,13 +1,12 @@
 ---
-title: "#a11y technical watch, August-September 2021"
+title: "Digital accessibility watch August - September 2021"
 abstract: "#a11y anthology, August-September 2021"
+titleBeforeTag: true
 date: "2021-09-27"
 tags:
   - veille
 ---
 
-# Digital accessibility watch August - September 2021
-
 We feel that it is getting closer and there, you'll tell me... WHAT ??
 Well, the WCAG 3, a little explanation of these future guidelines: https://w3c.github.io/silver/explainer/
 So WCAG 2.2 too, mechanically, are fast approaching, be ready for a jump, not huge but still: https://www.visionaustralia.org/services/digital-access/blog/the-new-requirements-for-wcag-2-2

src/en/articles/watch-january-february-2021.md

@@ -1,11 +1,11 @@
 ---
-title: "#a11y technical watch, January-February 2021"
+title: "Digital accessibility watch January - February  2021"
 abstract: "#a11y anthology, January-February 2021"
+titleBeforeTag: true
 date: "2021-02-19"
 tags:
   - veille
 ---
-# Digital accessibility watch January - February  2021
 
 Big news, “W3C First Public Working Draft 21 January 2021” released, the future of a11y web and more. An introduction: https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/
 

src/en/articles/watch-june-july-2021.md

@@ -1,11 +1,11 @@
 ---
-title: "#a11y technical watch, August-September 2021"
+title: "Digital accessibility watch August - September 2021"
 abstract: "#a11y anthology, August-September 2021"
+titleBeforeTag: true
 date: "2021-09-27"
 tags:
   - veille
 ---
-# Digital accessibility watch August - September 2021
 
 We feel that it is getting closer and there, you tell me ... WHAT ??
 Well the WCAG 3, a little explanation of this future recommendation (in): https://w3c.github.io/silver/explainer/

src/en/articles/watch-march-may-2021.md

@@ -1,11 +1,11 @@
 ---
-title: "#a11y technical watch, March-May 2021"
+title: "Digital accessibility watch March - May  2021"
 abstract: "#a11y anthology, March-May 2021"
+titleBeforeTag: true
 date: "2021-06-03"
 tags:
   - veille
 ---
-# Digital accessibility watch March - May  2021
 
 Over and over in this technical watch, we tell you and prouve it, that magical accessibility overlays don't work.