From 111e4ac7c10dd63b27a6a24047743b2fb82037ee Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sat, 13 Mar 2021 10:22:52 +0100
Subject: Translate "canceled" marker

Also move away from ::before to comply with WCAG 1.3.1, specifically
by avoiding F87.

https://www.w3.org/TR/WCAG21/#info-and-relationships
https://www.w3.org/WAI/WCAG21/Techniques/failures/F87
---
 concerts.html            | 6 +++++-
 en/concerts.html         | 6 +++++-
 stylesheets/concerts.css | 7 ++-----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/concerts.html b/concerts.html
index 357e3c1..eec368a 100644
--- a/concerts.html
+++ b/concerts.html
@@ -4,7 +4,10 @@
     <div class="events">
       <a class="event canceled" href="#concert-2021-04-03">
         <img src="images/concerts/dinard.jpg">
-        <p class="summary">Dinard<br>3 avril 2021</p>
+        <p class="summary">
+          <span class="canceled">ANNULÉ</span>
+          Dinard<br>3 avril 2021
+        </p>
       </a>
       <a class="event" href="#concert-2021-06-21">
         <img src="images/concerts/pantin.jpg">
@@ -20,6 +23,7 @@
     <p class="hint">Cliquez sur un concert pour obtenir plus d'informations.</p>
 
     <div class="details canceled" id="concert-2021-04-03">
+      <p class="canceled">ANNULÉ</p>
       <p class="detail date">Samedi 3 avril 2021</p>
       <p class="detail time">20h00</p>
       <p class="detail place">Dinard</p>
diff --git a/en/concerts.html b/en/concerts.html
index 6493058..2bfe2eb 100644
--- a/en/concerts.html
+++ b/en/concerts.html
@@ -4,7 +4,10 @@
     <div class="events">
       <a class="event canceled" href="#concert-2021-04-03">
         <img src="../images/concerts/dinard.jpg">
-        <p class="summary">Dinard<br>3 April 2021</p>
+        <p class="summary">
+          <span class="canceled">CANCELED</span>
+          Dinard<br>3 April 2021
+        </p>
       </a>
       <a class="event" href="#concert-2021-06-21">
         <img src="../images/concerts/pantin.jpg">
@@ -20,6 +23,7 @@
     <p class="hint">Click on a concert to obtain more information.</p>
 
     <div class="details canceled" id="concert-2021-04-03">
+      <p class="canceled">CANCELED</p>
       <p class="detail date">Saturday April 3, 2021</p>
       <p class="detail time">08:00 pm</p>
       <p class="detail place">Dinard</p>
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index 9df1ed9..b03bdc2 100644
--- a/stylesheets/concerts.css
+++ b/stylesheets/concerts.css
@@ -58,9 +58,8 @@ a.event {
     opacity: 50%;
     transition: 0.5s;
 }
-.event.canceled .summary::before {
+.event.canceled .summary .canceled {
     display: block;
-    content: "ANNULÉ";
     color: red;
 }
 .event.canceled:hover,
@@ -102,9 +101,7 @@ a.event {
     font-size: x-small;
 }
 
-.details.canceled::before {
-    display: block;
-    content: "ANNULÉ";
+.details.canceled > .canceled {
     color: red;
 }
 
-- 
cgit v1.2.3