Merge pull request #112 from empreinte-digitale/fix-v3-a11y

Accessibility fixes
empreinte-digitale · Jan 16, 2025 · f8eddb6 · f8eddb6
2 parents 6a6dd08 + f2618ff
commit f8eddb6
Show file tree

Hide file tree

Showing 24 changed files with 155 additions and 95 deletions.
diff --git a/dist/dsfr.html b/dist/dsfr.html
@@ -1,3 +1,5 @@
+<!DOCTYPE html>
+
 <html lang="fr">
 	<head>
 		<meta charset="utf-8" />
@@ -33,7 +35,7 @@
 			<div class="fr-header__body">
 				<div class="fr-container">
 					<div class="fr-header__body-row">
-						<div class="fr-header__brand fr-enlarge-link">
+						<div class="fr-header__brand">
 							<div class="fr-header__brand-top">
 								<div class="fr-header__logo">
 									<p class="fr-logo">Exemple</p>
@@ -49,12 +51,7 @@
 							</div>
 
 							<div class="fr-header__service">
-								<a
-									href="/dsfr.html"
-									title="Accueil - Intégration au système de design de l'état - Orejime"
-								>
-									<p class="fr-header__service-title">Orejime</p>
-								</a>
+								<p class="fr-header__service-title">Orejime</p>
 								<p class="fr-header__service-tagline">
 									Gestionnaire de consentement accessible et éco-conçu
 								</p>
@@ -98,9 +95,10 @@ <h1>
 				<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
 					<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
 						<div class="fr-callout" id="privacy-policy">
-							<p class="fr-callout__title">
+							<h2 class="fr-callout__title">
 								Exemple de politique de confidentialité
-							</p>
+							</h2>
+
 							<p class="fr-callout__text">
 								Cette section tient lieu de page de politique de
 								confidentialité.

diff --git a/dist/example-assets/style.css b/dist/example-assets/style.css
@@ -110,6 +110,16 @@ a:active {
 	background: #b30443;
 }
 
+.ButtonGroup {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ButtonGroup li {
+	display: inline-block;
+}
+
 .Container {
 	box-sizing: border-box;
 	margin: auto;

diff --git a/dist/index.html b/dist/index.html
@@ -27,7 +27,7 @@
 		-->
 
 		<div id="app">
-			<header class="Header">
+			<header class="Header" role="banner">
 				<div class="Container">
 					<div class="Header-inner">
 						<a href="https://empreintedigitale.fr">
@@ -58,7 +58,10 @@ <h1 class="Hero-title">Orejime</h1>
 							</p>
 
 							<p>
-								<a href="https://github.com/empreinte-digitale/orejime">
+								<a
+									class="Button"
+									href="https://github.com/empreinte-digitale/orejime"
+								>
 									See the documentation on GitHub
 								</a>
 							</p>
@@ -79,18 +82,19 @@ <h2 class="Section-title">Privacy policy example</h2>
 							consent preferences.
 						</p>
 
-						<div class="ButtonGroup">
-							<button
-								type="button"
-								class="Button"
-								data-orejime-open
-							>
-								Open consent modal
-							</button>
-							<button type="button" class="Button" data-orejime-reset>
-								Reset consent
-							</button>
-						</div>
+						<ul class="ButtonGroup">
+							<li>
+								<button type="button" class="Button" data-orejime-open>
+									Open consent modal
+								</button>
+							</li>
+
+							<li>
+								<button type="button" class="Button" data-orejime-reset>
+									Reset consent
+								</button>
+							</li>
+						</ul>
 					</div>
 
 					<h2 class="Section-title">They're using Orejime</h2>

diff --git a/src/styles/orejime.scss b/src/styles/orejime.scss
@@ -63,7 +63,9 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Button:is([disabled], [aria-disabled="true"]) {
-    background: var(--orejime-color-subdued);
+    background: none;
+    color: var(--orejime-color-subdued);
+    cursor: not-allowed;
 }
 
 .orejime-Button:not(:is([disabled], [aria-disabled="true"])):is(:hover, :focus) {

diff --git a/src/translations/ca.ts b/src/translations/ca.ts
@@ -17,7 +17,7 @@ export default {
 		description: "Aquí podeu veure i personalitzar la informació que recopilem sobre vosaltres.\nPer saber-ne més, llegiu la nostre {privacyPolicy}.",
 		privacyPolicyLabel: "política de privacitat",
 		close: "Tancar",
-		closeTitle: null,
+		closeTitle: "Tanca les preferències",
 		globalPreferences: "Preferències per a tots els serveis",
 		acceptAll: "Acceptar-ho tot",
 		declineAll: "Rebutja tot",

diff --git a/src/translations/de.ts b/src/translations/de.ts
@@ -8,16 +8,16 @@ export default {
 		accept: "Akzeptieren",
 		acceptTitle: "Cookies akzeptieren",
 		decline: "Ablehnen",
-		declineTitle: null,
+		declineTitle: "optionalen Cookies ablehnen",
 		configure: "Mehr erfahren",
-		configureTitle: null
+		configureTitle: "Cookies auswählen"
 	},
 	modal: {
 		title: "Informationen zur Privatsphäre",
 		description: "Hier können Sie einsehen und anpassen, welche persönlichen Daten gespeichert werden.\nBitte lesen Sie unsere {privacyPolicy} um weitere Details zu erfahren.",
 		privacyPolicyLabel: "Datenschutzerklärung",
 		close: "Schließen",
-		closeTitle: null,
+		closeTitle: "Einstellungen schließen",
 		globalPreferences: "globale Vorlieben",
 		acceptAll: "Alle Einstellungen akzeptieren",
 		declineAll: "Alle Einstellungen ablehnen",

diff --git a/src/translations/en.ts b/src/translations/en.ts
@@ -7,19 +7,19 @@ export default {
 			'We collect and process your personal information for the following purposes: {purposes}.\nTo learn more, please read our {privacyPolicy}.\n',
 		privacyPolicyLabel: 'privacy policy',
 		accept: 'Accept',
-		acceptTitle: 'Accept cookies',
+		acceptTitle: 'Accept all cookies',
 		decline: 'Decline',
-		declineTitle: null,
+		declineTitle: 'Decline optional cookies',
 		configure: 'Learn more',
-		configureTitle: null
+		configureTitle: 'Choose cookies'
 	},
 	modal: {
 		title: 'Information that we collect',
 		description:
 			'Here you can see and customize the information that we collect about you.\nTo learn more, please read our {privacyPolicy}.\n',
 		privacyPolicyLabel: 'privacy policy',
 		close: 'Close',
-		closeTitle: null,
+		closeTitle: 'Close preferences',
 		globalPreferences: 'Global preferences',
 		acceptAll: 'Accept all apps',
 		declineAll: 'Decline all apps',

diff --git a/src/translations/es.ts b/src/translations/es.ts
@@ -6,18 +6,18 @@ export default {
 	  description: "Recopilamos y procesamos su información personal para los siguientes propósitos : {purposes}.\nPara obtener más información, lea nuestra {privacyPolicy}.",
 	  privacyPolicyLabel: "política de confidencialidad",
 	  accept: "Aceptar",
-	  acceptTitle: "Aceptar cookies",
+	  acceptTitle: "Aceptar todas las cookies",
 	  decline: "Rechazar",
-	  declineTitle: null,
+	  declineTitle: "Rechazar todas las cookies opcionales",
 	  configure: "Más información",
-	  configureTitle: null
+	  configureTitle: "Elegir cookies"
 	},
 	modal: {
 	  title: "La información que recopilamos",
 	  description: "Aquí puede ver y personalizar la información que recopilamos sobre usted.\nPara obtener más información, lea nuestra {privacyPolicy}.",
 	  privacyPolicyLabel: "política de confidencialidad",
 	  close: "Cerrar",
-	  closeTitle: null,
+	  closeTitle: "Cerrar preferencias",
 	  globalPreferences: "Preferencias para todos los servicios",
 	  acceptAll: "Aceptar todas las apps",
 	  declineAll: "Rechazar todas las apps",

diff --git a/src/translations/et.ts b/src/translations/et.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Me kogume ja töötleme teie isikuandmeid järgmistel eesmärkidel: {purposes}.\nLisateabe saamiseks lugege palun meie {privacyPolicy}",
 		privacyPolicyLabel: "privaatsustingimused",
 		accept: "Nõustu",
-		acceptTitle: "Nõustu küpsistega",
+		acceptTitle: "Aktsepteeri kõik küpsised",
 		decline: "Keeldu",
-		declineTitle: null,
+		declineTitle: "Keelata kõik valikulised küpsised",
 		configure: "Lisateave",
-		configureTitle: null
+		configureTitle: "Vali küpsised"
 	},
 	modal: {
 		title: "Isikuandmete kogumine",
 		description: "Siit saate vaadata ja hallata teavet, mida me teie kohta kogume.\nLisateabe saamiseks lugege palun meie {privacyPolicy}",
 		privacyPolicyLabel: "privaatsustingimused",
 		close: "Sulge",
-		closeTitle: null,
+		closeTitle: "Sule eelistused",
 		globalPreferences: "Eelistused kõigile teenustele",
 		acceptAll: "Nõustu kõigi rakendustega",
 		declineAll: "Keela kõik rakendused",

diff --git a/src/translations/fi.ts b/src/translations/fi.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Keräämme ja käsittelemme henkilötietoja seuraaviin tarkoituksiin: {purposes}.\nVoit lukea lisätietoja {privacyPolicy}.",
 		privacyPolicyLabel: "tietosuojasivultamme",
 		accept: "Hyväksy",
-		acceptTitle: null,
+		acceptTitle: "Hyväksy kaikki evästeet",
 		decline: "Hylkää",
-		declineTitle: null,
+		declineTitle: "Hylkää kaikki valinnaiset evästeet",
 		configure: "Lue lisää",
-		configureTitle: null
+		configureTitle: "Valitse evästeet"
 	},
 	modal: {
 		title: "Keräämämme tiedot",
 		description: "Voit tarkastella ja muokata sinusta keräämiämme tietoja.\nVoit lukea lisätietoja {privacyPolicy}.",
 		privacyPolicyLabel: "tietosuojasivultamme",
 		close: "Sulje",
-		closeTitle: null,
+		closeTitle: "Sulje asetukset",
 		globalPreferences: "Kaikkien palvelujen asetukset",
 		acceptAll: "Hyväksyä kaikki",
 		declineAll: "Hylkää kaikki",

diff --git a/src/translations/fr.ts b/src/translations/fr.ts
@@ -7,19 +7,19 @@ export default {
 			'Nous collectons et traitons vos informations personnelles dans le but suivant : {purposes}.\nPour en savoir plus, merci de lire notre {privacyPolicy}.\n',
 		privacyPolicyLabel: 'politique de confidentialité',
 		accept: 'Accepter',
-		acceptTitle: 'Accepter les cookies',
+		acceptTitle: 'Accepter tous les cookies',
 		decline: 'Refuser',
-		declineTitle: null,
+		declineTitle: 'Refuser tous les cookies optionnels',
 		configure: 'En savoir plus',
-		configureTitle: null
+		configureTitle: 'Choisir les cookies'
 	},
 	modal: {
 		title: 'Les informations que nous collectons',
 		description:
 			'Ici, vous pouvez voir et personnaliser les informations que nous collectons sur vous.\nPour en savoir plus, merci de lire notre {privacyPolicy}.\n',
 		privacyPolicyLabel: 'politique de confidentialité',
 		close: 'Fermer',
-		closeTitle: null,
+		closeTitle: 'Fermer les préférences',
 		globalPreferences: 'Préférences pour tous les services',
 		acceptAll: 'Tout accepter',
 		declineAll: 'Tout refuser',

diff --git a/src/translations/hu.ts b/src/translations/hu.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Az személyes adataidat összegyűjtjük és feldolgozzuk az alábbi célokra: {purposes}.\nTovábbi információért kérjük, olvassd el az {privacyPolicy}.",
 		privacyPolicyLabel: "adatvédelmi irányelveinket",
 		accept: "Elfogad",
-		acceptTitle: null,
+		acceptTitle: "Minden cookie elfogadása",
 		decline: "Elvet",
-		declineTitle: null,
+		declineTitle: "Minden opcionális cookie elutasítása",
 		configure: "Tudj meg többet",
-		configureTitle: null
+		configureTitle: "Cookie-k kiválasztása"
 	},
 	modal: {
 		title: "Információk, amiket gyűjtünk",
 		description: "Itt láthatod és testreszabhatod az rólad gyűjtött információkat.\nTovábbi információért kérjük, olvassd el az {privacyPolicy}.",
 		privacyPolicyLabel: "adatvédelmi irányelveinket",
 		close: "Elvet",
-		closeTitle: null,
+		closeTitle: "Beállítások bezárása",
 		globalPreferences: "Preferenciák az összes szolgáltatáshoz",
 		acceptAll: "Fogadj el mindent",
 		declineAll: "Elutasít minden",

diff --git a/src/translations/it.ts b/src/translations/it.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Raccogliamo ed elaboriamo le vostre informazioni personali per i seguenti scopi: {purposes}.\nPer saperne di più, leggi la nostra {privacyPolicy}.",
 		privacyPolicyLabel: "policy privacy",
 		accept: "Accetto",
-		acceptTitle: null,
+		acceptTitle: "Accettare tutti i cookie",
 		decline: "Rifiuta",
-		declineTitle: null,
+		declineTitle: "Rifiutare tutti i cookie opzionali",
 		configure: "Scopri di più",
-		configureTitle: null
+		configureTitle: "Scegliere i cookie"
 	},
 	modal: {
 		title: "Informazioni che raccogliamo",
 		description: "Qui puoi vedere e scegliere le informazioni che raccogliamo su di te.\nPer saperne di più, leggi la nostra {privacyPolicy}.",
 		privacyPolicyLabel: "policy privacy",
 		close: "Chiudere",
-		closeTitle: null,
+		closeTitle: "Chiudi preferenze",
 		globalPreferences: "Preferenze globali",
 		acceptAll: "Accettare tutto",
 		declineAll: "Rifiuta tutto",

diff --git a/src/translations/nb.ts b/src/translations/nb.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Vi samler inn og prosesserer din personlige informasjon av følgende årsaker: {purposes}.\nFor å lære mer, vennligst les vår {privacyPolicy}.",
 		privacyPolicyLabel: "personvernerklæring",
 		accept: "Akseptere",
-		acceptTitle: null,
+		acceptTitle: "Godta alle informasjonskapsler",
 		decline: "Avslå",
-		declineTitle: null,
+		declineTitle: "Avslå alle valgfrie informasjonskapsler",
 		configure: "Lær mer",
-		configureTitle: null
+		configureTitle: "Velg informasjonskapsler"
 	},
 	modal: {
 		title: "Informasjon vi samler inn",
 		description: "Her kan du se og velge hvilken informasjon vi samler inn om deg.\nFor å lære mer, vennligst les vår {privacyPolicy}.",
 		privacyPolicyLabel: "personvernerklæring",
 		close: "Lukk",
-		closeTitle: null,
+		closeTitle: "Lukk preferanser",
 		globalPreferences: "Preferanser for alle tjenester",
 		acceptAll: "Godta alt",
 		declineAll: "Avslå alt",

diff --git a/src/translations/nl.ts b/src/translations/nl.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Wij verzamelen en verwerken uw persoonlijke gegevens voor de volgende doeleinden: {purposes}.\nLees ons privacybeleid voor meer informatie {privacyPolicy}.",
 		privacyPolicyLabel: "privacybeleid",
 		accept: "Aanvaarden",
-		acceptTitle: null,
+		acceptTitle: "Alle cookies accepteren",
 		decline: "Afwijzen",
-		declineTitle: null,
+		declineTitle: "Alle optionele cookies weigeren",
 		configure: "Lees meer",
-		configureTitle: null
+		configureTitle: "Cookies kiezen"
 	},
 	modal: {
 		title: "Informatie die we verzamelen",
 		description: "Hier kunt u de informatie bekijken en aanpassen die we over u verzamelen.\nLees ons privacybeleid voor meer informatie {privacyPolicy}.",
 		privacyPolicyLabel: "privacybeleid",
 		close: "Sluiten",
-		closeTitle: null,
+		closeTitle: "Sluit voorkeuren",
 		globalPreferences: "Voorkeuren voor alle services",
 		acceptAll: "Alles aanvaarden",
 		declineAll: "Alles weigeren",

diff --git a/src/translations/oc.ts b/src/translations/oc.ts
@@ -8,7 +8,7 @@ export default {
 		accept: "Acceptar",
 		acceptTitle: "Acceptar los cookies",
 		decline: "Refusar",
-		declineTitle: null,
+		declineTitle: "Refusar los cookies",
 		configure: "Ne saber mai",
 		configureTitle: null
 	},

diff --git a/src/translations/ro.ts b/src/translations/ro.ts
@@ -6,18 +6,18 @@ export default {
 		description: "Colectăm și procesăm informațiile dvs. personale în următoarele scopuri: {purposes}.\nPentru a afla mai multe, vă rugăm să citiți {privacyPolicy}.",
 		privacyPolicyLabel: "politica privacy",
 		accept: "Accepta",
-		acceptTitle: null,
+		acceptTitle: "Acceptați toate modulele cookie",
 		decline: "Renunță",
-		declineTitle: null,
+		declineTitle: "Refuzați toate modulele cookie opționale",
 		configure: "Află mai multe",
-		configureTitle: null
+		configureTitle: "Alegeți modulele cookie"
 	},
 	modal: {
 		title: "Informațiile pe care le colectăm",
 		description: "Aici puteți vedea și personaliza informațiile pe care le colectăm despre dvs.\nPentru a afla mai multe, vă rugăm să citiți {privacyPolicy}.",
 		privacyPolicyLabel: "politica privacy",
 		close: "Aproape",
-		closeTitle: null,
+		closeTitle: "Închideți preferințele",
 		globalPreferences: "Preferințe pentru toate serviciile",
 		acceptAll: "Accepta totul",
 		declineAll: "Refuză toate",