From 6a2540dc5c4e57b508af9da567ca86ccc8391aa7 Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Thu, 30 May 2024 09:09:01 +0200 Subject: [PATCH 01/20] Web > Tests > Update the right menu "On this page" --- src/assets/test-web.js | 857 +++++++++++++++++++++-------------------- 1 file changed, 436 insertions(+), 421 deletions(-) diff --git a/src/assets/test-web.js b/src/assets/test-web.js index fbc9152a8..1d210c724 100644 --- a/src/assets/test-web.js +++ b/src/assets/test-web.js @@ -1,553 +1,568 @@ -document.addEventListener("DOMContentLoaded", function(event) { - const lang = document.documentElement.getAttribute('lang') - - if (!lang) { - throw new Error('A lang attribute must be set on the tag !') - } - - const locales = { - 'en': { - process : "Process", - check : "To check", - conception: 'Design', - development: 'Development', - results : "Results", - justification : "Justification", - profiles: 'Profiles', - tools: 'Tools', - allTools: 'All tools', - allProfils: 'All profiles', - exceptions: 'Exceptions', - ongoingTests: 'ongoing tests', - noResults: 'No results match your selection', - withCurrentFilters: 'with current filters', - reinitFilters: 'Reinit ' - }, - 'fr': { - process : "Procédures", - check : "A vérifier", - conception: 'Conception', - development: 'Développement', - results : "Résultats", - justification : "Justification", - profiles: 'Profils ', - tools: 'Outils ', - allTools: 'Tous les outils', - allProfils: 'Tous les profils', - exceptions: 'Exceptions', - ongoingTests: 'tests en cours', - noResults: 'Aucun résultat ne correspond à votre sélection', - withCurrentFilters: 'dans les filtres en cours', - reinitFilters: 'Réinitialiser ' +document.addEventListener("DOMContentLoaded", function (event) { + const lang = document.documentElement.getAttribute('lang') + + if (!lang) { + throw new Error('A lang attribute must be set on the tag !') } - } - function translate(key, to) { - const locale = to || lang + const locales = { + 'en': { + process: "Process", + check: "To check", + conception: 'Design', + development: 'Development', + results: "Results", + justification: "Justification", + profiles: 'Profiles', + tools: 'Tools', + allTools: 'All tools', + allProfils: 'All profiles', + exceptions: 'Exceptions', + ongoingTests: 'ongoing tests', + noResults: 'No results match your selection', + withCurrentFilters: 'with current filters', + reinitFilters: 'Reinit ' + }, + 'fr': { + process: "Procédures", + check: "A vérifier", + conception: 'Conception', + development: 'Développement', + results: "Résultats", + justification: "Justification", + profiles: 'Profils ', + tools: 'Outils ', + allTools: 'Tous les outils', + allProfils: 'Tous les profils', + exceptions: 'Exceptions', + ongoingTests: 'tests en cours', + noResults: 'Aucun résultat ne correspond à votre sélection', + withCurrentFilters: 'dans les filtres en cours', + reinitFilters: 'Réinitialiser ' + } + } + + function translate(key, to) { + const locale = to || lang + + if (!locales.hasOwnProperty(locale)) { + throw new Error(`translate(): Translation's locale \`${locale}\` does not exist`) + } + + if (!locales[locale].hasOwnProperty(key)) { + throw new Error(`translate(): Translation's key \`${key}\` does not exist for locale \`${locale}\``) + } - if (!locales.hasOwnProperty(locale)) { - throw new Error(`translate(): Translation's locale \`${locale}\` does not exist`) + return locales[locale][key] } - if (!locales[locale].hasOwnProperty(key)) { - throw new Error(`translate(): Translation's key \`${key}\` does not exist for locale \`${locale}\``) + //requette XMLHttpRequest + function doXHR(url, callback) { + var oReq = new XMLHttpRequest(); + + oReq.onreadystatechange = function (event) { + if (this.readyState === XMLHttpRequest.DONE) { + if (this.status === 200) { + return callback(null, this.responseText); + } else { + return callback({errCode: this.status, errMsg: this.statusText}); + } + } + }; + oReq.open('GET', url, true); + oReq.send(null); } - return locales[locale][key] - } + //appel des Json - //requette XMLHttpRequest - function doXHR(url, callback) { - var oReq = new XMLHttpRequest(); - oReq.onreadystatechange = function(event) { - if (this.readyState === XMLHttpRequest.DONE) { - if (this.status === 200) { - return callback(null, this.responseText); - } else { - return callback({errCode: this.status, errMsg: this.statusText}); + doXHR('/assets/json/checklist/tests-web-' + lang + '.json', function (errFirst, responseFirst) { + if (errFirst) { + reqError(); } - } - }; - oReq.open('GET', url, true); - oReq.send(null); - } - - //appel des Json - - - doXHR('/assets/json/checklist/tests-web-'+lang+'.json', function(errFirst, responseFirst) { - if (errFirst) { - reqError(); - } - return doXHR('/assets/json/checklist/tests-concepteur-'+lang+'.json', function(errSecond, responseSecond) { - if (errSecond) { - reqError(); - } - return reqListener(responseFirst, responseSecond); - }); + return doXHR('/assets/json/checklist/tests-concepteur-' + lang + '.json', function (errSecond, responseSecond) { + if (errSecond) { + reqError(); + } + return reqListener(responseFirst, responseSecond); + }); - }); + }); - function reqError(err) { - let elrefTests = document.getElementById('refTests'); - elrefTests.innerHTML = '
Erreur chargement ressource JSON
'; - } + function reqError(err) { + let elrefTests = document.getElementById('refTests'); + elrefTests.innerHTML = '
Erreur chargement ressource JSON
'; + } - //on concatene les 2 jsons en les réorganisant par tests - function compareReorder(a, b) { + //on concatene les 2 jsons en les réorganisant par tests + function compareReorder(a, b) { - // si les titres sont identiques, on regroupe par titre - for (var i = 0; i < a.length; i++) { + // si les titres sont identiques, on regroupe par titre + for (var i = 0; i < a.length; i++) { - let testA = a[i].title; + let testA = a[i].title; - for (var j = 0; j < b.length; j++) { + for (var j = 0; j < b.length; j++) { - var testB = b[j].title; + var testB = b[j].title; - if (testA==testB){ - a.splice(i++, 0, b[j]); - b.splice(j, 1); + if (testA == testB) { + a.splice(i++, 0, b[j]); + b.splice(j, 1); - } + } - } + } - } + } - //sinon on regroupe les tests par themes - for (var i = 0; i < a.length; i++) { + //sinon on regroupe les tests par themes + for (var i = 0; i < a.length; i++) { - let testC = a[i].themes; + let testC = a[i].themes; - for (var j = 0; j < b.length; j++) { + for (var j = 0; j < b.length; j++) { - var testD = b[j].themes; + var testD = b[j].themes; - if (testC==testD){ - a.splice(i, 0, b[j]); - b.splice(j, 1); + if (testC == testD) { + a.splice(i, 0, b[j]); + b.splice(j, 1); + } + } } - } + return a; } - return a; - } - // function encode(str){ + // function encode(str){ - // str=str.replace(/[\x26\x0A\<>'"^]/gi, function(r){return"&#"+r.charCodeAt(0)+";"}); - // str=str.replace(/\<code\>([\s\S]*?)\<\/code\>/g, '$1'); + // str=str.replace(/[\x26\x0A\<>'"^]/gi, function(r){return"&#"+r.charCodeAt(0)+";"}); + // str=str.replace(/\<code\>([\s\S]*?)\<\/code\>/g, '$1'); - // return str; - // } + // return str; + // } - function formatHeading(str){ - str = str.toLowerCase(); - str = str.replace(/é|è|ê/g,"e"); - str = str.replace(/ /g,"-"); + function formatHeading(str) { + str = str.toLowerCase(); + str = str.replace(/é|è|ê/g, "e"); + str = str.replace(/ /g, "-"); - return str; - } + return str; + } - //supprimer les doublons dans les filtres - function delDoublon(arrCond, inputId){ - for (var i = 0; i < arrCond.length; i++) { - //for (let condition of arrCond) { - let condition = arrCond[i]; - if (condition.name == inputId) { - let arrCondIndex = arrCond.indexOf(condition); - arrCond.splice(arrCondIndex , 1); - } + //supprimer les doublons dans les filtres + function delDoublon(arrCond, inputId) { + for (var i = 0; i < arrCond.length; i++) { + //for (let condition of arrCond) { + let condition = arrCond[i]; + if (condition.name == inputId) { + let arrCondIndex = arrCond.indexOf(condition); + arrCond.splice(arrCondIndex, 1); + } + } + return arrCond; } - return arrCond; - } - function reqListener(responseFirst, responseSecond) { + function reqListener(responseFirst, responseSecond) { + var data = JSON.parse(responseFirst); + var data2 = JSON.parse(responseSecond); + var uniqueTypes = []; + var refTests = compareReorder(data, data2); - var data = JSON.parse(responseFirst); - var data2 = JSON.parse(responseSecond); - var uniqueTypes = []; - var refTests = compareReorder(data, data2); + // Get the right menu + const toc = document.getElementById('toc'); + let ul = toc.querySelector('ul'); + const originalUl = ul.cloneNode(true); - let app = new function() { - // Récupération des données - //this.refTests = refTests; + let app = new function () { + // Récupération des données + //this.refTests = refTests; - this.UpdateTypes = function(allTypes, updatedTypes) { - let elrefTypes = []; + this.UpdateTypes = function (allTypes, updatedTypes) { + let elrefTypes = []; - for (let i in updatedTypes) { - for (let j in updatedTypes[i].type) { - elrefTypes.push(updatedTypes[i].type[j]); - } - } - let uniqueUpdatedTypes = elrefTypes.filter(function(value, index, self) { - return self.indexOf(value) === index; - }); + for (let i in updatedTypes) { + for (let j in updatedTypes[i].type) { + elrefTypes.push(updatedTypes[i].type[j]); + } + } + let uniqueUpdatedTypes = elrefTypes.filter(function (value, index, self) { + return self.indexOf(value) === index; + }); - for (let i in allTypes) { - var elem = document.getElementById('type'+i); - elem.disabled = true; - var elemLabel = document.getElementById('labelType'+i); - elemLabel.classList.add("disabled"); + for (let i in allTypes) { + var elem = document.getElementById('type' + i); + elem.disabled = true; + var elemLabel = document.getElementById('labelType' + i); + elemLabel.classList.add("disabled"); - } - for (let i in allTypes) { - for (let j in uniqueUpdatedTypes) { - if (allTypes[i]==uniqueUpdatedTypes[j]) { - var elem = document.getElementById('type'+i); - elem.disabled = false; - var elemLabel = document.getElementById('labelType'+i); - elemLabel.classList.remove("disabled"); - } - } - } + } + for (let i in allTypes) { + for (let j in uniqueUpdatedTypes) { + if (allTypes[i] == uniqueUpdatedTypes[j]) { + var elem = document.getElementById('type' + i); + elem.disabled = false; + var elemLabel = document.getElementById('labelType' + i); + elemLabel.classList.remove("disabled"); + } + } + } - }; + }; - this.UpdateFeedback = function(activeFilter, nbTests) { - let elBtnReinit = document.getElementById('reinit'); - let elFeedback = document.getElementById('feedback'); - let htmlFeedback = ''; - let test = nbTests > 1 ? 'tests' : 'test' + this.UpdateFeedback = function (activeFilter, nbTests) { + let elBtnReinit = document.getElementById('reinit'); + let elFeedback = document.getElementById('feedback'); + let htmlFeedback = ''; + let test = nbTests > 1 ? 'tests' : 'test' - if (activeFilter) { - elBtnReinit.disabled = false; - htmlFeedback = '

'+nbTests+' ' + test + ' ' + translate('withCurrentFilters') + '
'; + elFilterFooter.innerHTML = htmlFilterFooter; + let elBtnReinit = document.getElementById('reinit'); - // Retourne la liste des checkboxes - this.DisplayFilters = function() { - let elFilterFooter = document.getElementById('filter-footer'); - let htmlFilterFooter = ''; - htmlFilterFooter += ''; - elFilterFooter.innerHTML = htmlFilterFooter; - let elBtnReinit = document.getElementById('reinit'); + elBtnReinit.addEventListener('click', function () { + app.FetchAll(refTests); + app.FilterByType(); + app.UpdateFeedback(false, refTests.length); + }); - elBtnReinit.addEventListener('click', function() { - app.FetchAll(refTests); - app.FilterByType(); - app.UpdateFeedback(false, refTests.length); - }); + // Selection de l'élément + let elTypes = document.getElementById('types'); + let types = []; - // Selection de l'élément - let elTypes = document.getElementById('types'); - let types = []; + // Selection de l'élément + let elProfils = document.getElementById('profils'); + let profils = []; - // Selection de l'élément - let elProfils = document.getElementById('profils'); - let profils = []; + // Chaque ligne (test) + for (let i in refTests) { - // Chaque ligne (test) - for (let i in refTests) { + // Chaque "type" dans chaque ligne (test) + for (let j in refTests[i].type) { - // Chaque "type" dans chaque ligne (test) - for (let j in refTests[i].type) { + (Array.isArray(refTests[i].type[j]) ? types.push(refTests[i].type[j][0]) : types.push(refTests[i].type[j])) - ( Array.isArray(refTests[i].type[j]) ? types.push(refTests[i].type[j][0]) : types.push(refTests[i].type[j])) - - } + } - // Chaque "profil" dans chaque ligne (test) - for (let j in refTests[i].profils) { - profils.push(refTests[i].profils[j]); - } + // Chaque "profil" dans chaque ligne (test) + for (let j in refTests[i].profils) { + profils.push(refTests[i].profils[j]); + } - } + } - //let uniqueTypes = types.filter( (value, index, self) => self.indexOf(value) === index ); - uniqueTypes = types.filter(function(value, index, self) { - if(value!=""){ - return self.indexOf(value) === index; - } - }); + //let uniqueTypes = types.filter( (value, index, self) => self.indexOf(value) === index ); + uniqueTypes = types.filter(function (value, index, self) { + if (value != "") { + return self.indexOf(value) === index; + } + }); - //on tri par ordre alphabétique - uniqueTypes.sort(function (a, b) { - return a.toLowerCase().localeCompare(b.toLowerCase()); - }); + //on tri par ordre alphabétique + uniqueTypes.sort(function (a, b) { + return a.toLowerCase().localeCompare(b.toLowerCase()); + }); - let htmlTypes = ''; + let htmlTypes = ''; - htmlTypes += '
  • '; + htmlTypes += '
  • '; - for (let i in uniqueTypes) { - htmlTypes += '
    • '; - } + for (let i in uniqueTypes) { + htmlTypes += '
    • '; + } - //let uniqueProfils = profils.filter( (value, index, self) => self.indexOf(value) === index ); - let uniqueProfils = profils.filter(function(value, index, self) { - return self.indexOf(value) === index; - }); + //let uniqueProfils = profils.filter( (value, index, self) => self.indexOf(value) === index ); + let uniqueProfils = profils.filter(function (value, index, self) { + return self.indexOf(value) === index; + }); - let htmlProfils = ''; + let htmlProfils = ''; - htmlProfils += '
  • '; - for (let i in uniqueProfils) { - htmlProfils += '
    • '; - } + htmlProfils += '
  • '; + for (let i in uniqueProfils) { + htmlProfils += '
    • '; + } - elTypes.innerHTML = htmlTypes; - elProfils.innerHTML = htmlProfils; + elTypes.innerHTML = htmlTypes; + elProfils.innerHTML = htmlProfils; - }; + }; - // Retourne les tests filtrés - this.FilterByType = function() { + // Retourne les tests filtrés + this.FilterByType = function () { - // Affiche les checkboxes et boutons radios - this.DisplayFilters(); + // Affiche les checkboxes et boutons radios + this.DisplayFilters(); - let checkboxes = document.querySelectorAll('input'); - let arrType = []; - let arrProfil = []; - let conditions = []; - let self = this; - let runUpdateType = false; + let checkboxes = document.querySelectorAll('input'); + let arrType = []; + let arrProfil = []; + let conditions = []; + let self = this; + let runUpdateType = false; - for (var i = 0; i < checkboxes.length; i++) { + for (var i = 0; i < checkboxes.length; i++) { - let input = checkboxes[i]; + let input = checkboxes[i]; - input.addEventListener('click', function() { + input.addEventListener('click', function () { - if (this.checked && this.id==="profilAll" ){ - arrProfil = []; + if (this.checked && this.id === "profilAll") { + arrProfil = []; - }else if ((this.checked && this.name==="profil")){ - arrProfil = []; - arrProfil.push(input.value); - } + } else if ((this.checked && this.name === "profil")) { + arrProfil = []; + arrProfil.push(input.value); + } - if (this.checked && this.id==="typeAll" ){ - arrType = []; + if (this.checked && this.id === "typeAll") { + arrType = []; - } else if (this.checked && this.name==="types"){ - arrType = []; - arrType.push(input.value); - } + } else if (this.checked && this.name === "types") { + arrType = []; + arrType.push(input.value); + } - let indice = arrType.length + arrProfil.length; + let indice = arrType.length + arrProfil.length; + if (indice > 0) { - if (indice > 0) { + if (indice == 1) { - if (indice == 1) { + //on réinitialise les conditions + //conditions = []; - //on réinitialise les conditions - //conditions = []; + //on ajoute le premier critère + if ((arrProfil.length === 1)) { - //on ajoute le premier critère - if ((arrProfil.length===1)){ + //on supprime les doublons, nécessaire pour les boutons radio + delDoublon(conditions, this.name); - //on supprime les doublons, nécessaire pour les boutons radio - delDoublon(conditions, this.name); + conditions.unshift(function (item) { + //return item.profils === arrProfil[0]; + return item.profils.indexOf(arrProfil[0]) !== -1; + }); + //on nomme la fonction, pour les boutons radio on utilise this.name + Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); - conditions.unshift(function(item) { - //return item.profils === arrProfil[0]; - return item.profils.indexOf(arrProfil[0]) !== -1; - }); - //on nomme la fonction, pour les boutons radio on utilise this.name - Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); + runUpdateType = true; - runUpdateType = true; + } + if ((arrType.length === 1)) { - } - if ((arrType.length===1)){ + //on supprime les doublons, nécessaire pour les boutons radio + delDoublon(conditions, this.name); - //on supprime les doublons, nécessaire pour les boutons radio - delDoublon(conditions, this.name); - - conditions.unshift(function(item) { - return item.type.toString().indexOf(arrType[0]) !== -1; - }); + conditions.unshift(function (item) { + return item.type.toString().indexOf(arrType[0]) !== -1; + }); - //on nomme la fonction, pour les checkboxes on utilise this.id - Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); + //on nomme la fonction, pour les checkboxes on utilise this.id + Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); - runUpdateType = false; - } + runUpdateType = false; + } - } else { + } else { - //on ajoute le nouveau critère - if ((this.checked && this.name==="profil" && this.id!="profilAll")){ + //on ajoute le nouveau critère + if ((this.checked && this.name === "profil" && this.id != "profilAll")) { - //on supprime les doublons, nécessaire pour les boutons radio - delDoublon(conditions, this.name); + //on supprime les doublons, nécessaire pour les boutons radio + delDoublon(conditions, this.name); - conditions.unshift(function(item) { - return item.profils.indexOf(arrProfil[0]) !== -1; - }); + conditions.unshift(function (item) { + return item.profils.indexOf(arrProfil[0]) !== -1; + }); - //on nomme la fonction, pour les boutons radio on utilise this.name - Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); + //on nomme la fonction, pour les boutons radio on utilise this.name + Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); - runUpdateType = true; + runUpdateType = true; - } - if ((this.checked && this.name==="types" && this.id!="allType")){ + } + if ((this.checked && this.name === "types" && this.id != "allType")) { - //on supprime les doublons, nécessaire pour les boutons radio - delDoublon(conditions, this.name); + //on supprime les doublons, nécessaire pour les boutons radio + delDoublon(conditions, this.name); - conditions.unshift(function(item) { - return item.type.indexOf(arrType[0]) !== -1; - }); + conditions.unshift(function (item) { + return item.type.indexOf(arrType[0]) !== -1; + }); - Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); + Object.defineProperty(conditions[0], 'name', {value: this.name, writable: false}); - runUpdateType = false; + runUpdateType = false; - } - } + } + } - //on applique tous les filtres stockés dans conditions - //filteredTest = self.refTests.filter(function(d) { - filteredTest = refTests.filter(function(d) { - return conditions.every(function(c) { - return c(d); - }); - }); + //on applique tous les filtres stockés dans conditions + //filteredTest = self.refTests.filter(function(d) { + filteredTest = refTests.filter(function (d) { + return conditions.every(function (c) { + return c(d); + }); + }); - //on met à jour la page - app.FetchAll(filteredTest); + //on met à jour la page + app.FetchAll(filteredTest); - if (runUpdateType) { - app.UpdateTypes(uniqueTypes, filteredTest); - } - app.UpdateFeedback(true,filteredTest.length); + if (runUpdateType) { + app.UpdateTypes(uniqueTypes, filteredTest); + } + app.UpdateFeedback(true, filteredTest.length); - } else { - //aucun critère de sélectionné, on réinitialise la page - app.FetchAll(refTests); - // Filtrage - app.FilterByType(); - app.UpdateFeedback(true,refTests.length); + } else { + //aucun critère de sélectionné, on réinitialise la page + app.FetchAll(refTests); + // Filtrage + app.FilterByType(); + app.UpdateFeedback(true, refTests.length); - } + } - }); + }); - } + } - }; + }; - } - // Affichage de tous les tests - app.FetchAll(refTests); - // Filtrage - app.FilterByType(); - app.UpdateFeedback(false, refTests.length); + } + // Affichage de tous les tests + app.FetchAll(refTests); + // Filtrage + app.FilterByType(); + app.UpdateFeedback(false, refTests.length); - } + } }); From 32a92f9db3cc356cd19f21ab6143e69d928ba26f Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Thu, 30 May 2024 10:50:31 +0200 Subject: [PATCH 02/20] Web > Tests > Hide the two "reinitialize" buttons if needed --- src/assets/style.css | 4 ++++ src/assets/test-web.js | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/assets/style.css b/src/assets/style.css index 4e3850695..49b4fea98 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -530,4 +530,8 @@ pre code { line-height: 1.125; color: #fff; letter-spacing: -.00625rem; +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/src/assets/test-web.js b/src/assets/test-web.js index 1d210c724..d4db93c3a 100644 --- a/src/assets/test-web.js +++ b/src/assets/test-web.js @@ -221,7 +221,7 @@ document.addEventListener("DOMContentLoaded", function (event) { let test = nbTests > 1 ? 'tests' : 'test' if (activeFilter) { - elBtnReinit.disabled = false; + elBtnReinit.classList.remove('hidden'); htmlFeedback = '

    ' + nbTests + ' ' + test + ' ' + translate('withCurrentFilters') + '
    '; + htmlFilterFooter += ''; elFilterFooter.innerHTML = htmlFilterFooter; let elBtnReinit = document.getElementById('reinit'); From f1b0d4de5cd1690d166c8a8a0025ff100e559997 Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Thu, 30 May 2024 15:18:03 +0200 Subject: [PATCH 03/20] Web > Tests > Add an avoidance link to filters --- .../components/header/skip-links.njk | 2 +- src/assets/test-web.js | 19 +++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/_includes/components/header/skip-links.njk b/src/_includes/components/header/skip-links.njk index f944fdd71..b14c3cf9e 100644 --- a/src/_includes/components/header/skip-links.njk +++ b/src/_includes/components/header/skip-links.njk @@ -1,4 +1,4 @@ -
      + diff --git a/src/assets/script.js b/src/assets/script.js index 131230136..37b4d7848 100644 --- a/src/assets/script.js +++ b/src/assets/script.js @@ -1,396 +1,401 @@ (function () { - document.documentElement.classList.replace('no-js', 'js') - let RGAAWCAG = document.getElementsByClassName("RGAAWCAG"); - if(RGAAWCAG!==null){ + document.documentElement.classList.replace('no-js', 'js') + let RGAAWCAG = document.getElementsByClassName("RGAAWCAG"); + if (RGAAWCAG !== null) { - for (let item of RGAAWCAG){ - item.children[0].classList.add("table"); + for (let item of RGAAWCAG) { + item.children[0].classList.add("table"); + } } - } })(); /* Cookie consent banner customization */ (function () { - window.addEventListener('tac.root_available', function (e) { - - document.querySelectorAll('#tarteaucitronRoot button').forEach(function (button) { - if (button.classList.contains('catToggleBtn') || button.id === 'tarteaucitronClosePanel') { - return - } - - if (button.classList.contains('tarteaucitronAllow')) { - button.classList.add('btn', 'btn-inverse', 'btn-primary', 'ms-2') - } else { - button.classList.add('btn', 'btn-inverse', 'btn-info', 'ms-2') - } - }) - }, { once: true }) - - window.addEventListener('tac.open_panel', function () { - const servicesContainer = document.getElementById('tarteaucitronServices_api') - - servicesContainer.querySelectorAll('button').forEach(function (button) { - if (button.classList.contains('tarteaucitronAllow')) { - button.classList.add('btn', 'btn-primary', 'btn-inverse', 'ms-2') - } else { - button.classList.add('btn', 'btn-info', 'ms-2') - } - }) - }, { once: true }) + window.addEventListener('tac.root_available', function (e) { + + document.querySelectorAll('#tarteaucitronRoot button').forEach(function (button) { + if (button.classList.contains('catToggleBtn') || button.id === 'tarteaucitronClosePanel') { + return + } + + if (button.classList.contains('tarteaucitronAllow')) { + button.classList.add('btn', 'btn-inverse', 'btn-primary', 'ms-2') + } else { + button.classList.add('btn', 'btn-inverse', 'btn-info', 'ms-2') + } + }) + }, {once: true}) + + window.addEventListener('tac.open_panel', function () { + const servicesContainer = document.getElementById('tarteaucitronServices_api') + + servicesContainer.querySelectorAll('button').forEach(function (button) { + if (button.classList.contains('tarteaucitronAllow')) { + button.classList.add('btn', 'btn-primary', 'btn-inverse', 'ms-2') + } else { + button.classList.add('btn', 'btn-info', 'ms-2') + } + }) + }, {once: true}) })(); /* Tab language IOS */ -function automaticTabPan (){ - var AllLanguage = { - "objectivec":{ - name:"Objective C", - class:"item-oc", - active:"active show", - selected:"aria-selected=\"true\"", - classTab:"objc" - }, - "swift":{ - name:"Swift", - class:"item-s", - active:"", - selected:"aria-selected=\"false\"", - classTab:"swift" - }, - "swiftui":{ - name:"Swift UI", - class:"item-sui", - active:"", - selected:"aria-selected=\"false\"", - classTab:"swiftui" - }, - }; - - document.querySelectorAll('.code-tab-pane').forEach(function(item,index){ - - listLanguage =[]; - item.querySelectorAll('code').forEach(function (code){ - let object = {...AllLanguage[code.classList[0]], ...{html:code.outerHTML}}; - listLanguage.push(object); +function automaticTabPan() { + var AllLanguage = { + "objectivec": { + name: "Objective C", + class: "item-oc", + active: "active show", + selected: "aria-selected=\"true\"", + classTab: "objc" + }, + "swift": { + name: "Swift", + class: "item-s", + active: "", + selected: "aria-selected=\"false\"", + classTab: "swift" + }, + "swiftui": { + name: "Swift UI", + class: "item-sui", + active: "", + selected: "aria-selected=\"false\"", + classTab: "swiftui" + }, + }; + + document.querySelectorAll('.code-tab-pane').forEach(function (item, index) { + + listLanguage = []; + item.querySelectorAll('code').forEach(function (code) { + let object = {...AllLanguage[code.classList[0]], ...{html: code.outerHTML}}; + listLanguage.push(object); + }); + //console.log(item) + item.innerHTML = generateTabPan(listLanguage, index); }); - //console.log(item) - item.innerHTML=generateTabPan(listLanguage,index); - }); -} -function generateTabPan(listLanguage,id){ - - html='
        '; - listLanguage.forEach((element,index) => { - uniqueIDTab='tabID-0'+id.toString()+index.toString(); - uniqueIDPan='tabID-1'+id.toString()+index.toString(); - html+=''; - }); - html+="
      " - html+='
      '; - listLanguage.forEach((element,index) => { - uniqueIDTab='tabID-0'+id.toString()+index.toString(); - uniqueIDPan='tabID-1'+id.toString()+index.toString(); - html+='
      '; - html+='
      ';
-    html+=element.html;
-    html+='
      '; - html+='
      '; - }); - html+='
      '; - return html; } -function manageEventTabPan(){ - function removeActiveClass() { - document.querySelectorAll('.languageinfo li button').forEach(function(item){ - item.classList.remove('active'); - item.setAttribute('aria-selected',false); +function generateTabPan(listLanguage, id) { + + html = '
        '; + listLanguage.forEach((element, index) => { + uniqueIDTab = 'tabID-0' + id.toString() + index.toString(); + uniqueIDPan = 'tabID-1' + id.toString() + index.toString(); + html += ''; }); - document.querySelectorAll('.languageinfotab div').forEach(function(item){ - item.classList.remove('show'); - item.classList.remove('active'); - item.setAttribute('aria-hidden',true); + html += "
      " + html += '
      '; + listLanguage.forEach((element, index) => { + uniqueIDTab = 'tabID-0' + id.toString() + index.toString(); + uniqueIDPan = 'tabID-1' + id.toString() + index.toString(); + html += '
      '; + html += '
      ';
+        html += element.html;
+        html += '
      '; + html += '
      '; }); - } + html += '
      '; + return html; +} - function addActiveClass(classLink, classDiv) { - document.querySelectorAll('.'+classLink+' button').forEach(function(item){ - item.classList.add('active'); - item.setAttribute('aria-selected',true); - }); - document.querySelectorAll('.'+classDiv).forEach(function(item){ - item.classList.add('show'); - item.classList.add('active'); - item.setAttribute('aria-hidden',false); - }) - } +function manageEventTabPan() { + + function removeActiveClass() { + document.querySelectorAll('.languageinfo li button').forEach(function (item) { + item.classList.remove('active'); + item.setAttribute('aria-selected', false); + }); + document.querySelectorAll('.languageinfotab div').forEach(function (item) { + item.classList.remove('show'); + item.classList.remove('active'); + item.setAttribute('aria-hidden', true); + }); + } - document.querySelectorAll('.item-oc button').forEach(function(item){ + function addActiveClass(classLink, classDiv) { + document.querySelectorAll('.' + classLink + ' button').forEach(function (item) { + item.classList.add('active'); + item.setAttribute('aria-selected', true); + }); + document.querySelectorAll('.' + classDiv).forEach(function (item) { + item.classList.add('show'); + item.classList.add('active'); + item.setAttribute('aria-hidden', false); + }) + } + + document.querySelectorAll('.item-oc button').forEach(function (item) { - item.addEventListener("click", function(){ + item.addEventListener("click", function () { - removeActiveClass(); - addActiveClass('item-oc', 'objc'); + removeActiveClass(); + addActiveClass('item-oc', 'objc'); + }); }); - }); - document.querySelectorAll('.item-s button').forEach(function(item){ + document.querySelectorAll('.item-s button').forEach(function (item) { - item.addEventListener("click", function(){ + item.addEventListener("click", function () { - removeActiveClass(); - addActiveClass('item-s', 'swift'); + removeActiveClass(); + addActiveClass('item-s', 'swift'); + }); }); - }); - document.querySelectorAll('.item-sui button').forEach(function(item){ - item.addEventListener("click", function(){ + document.querySelectorAll('.item-sui button').forEach(function (item) { + item.addEventListener("click", function () { - removeActiveClass(); - addActiveClass('item-sui', 'swiftui'); + removeActiveClass(); + addActiveClass('item-sui', 'swiftui'); + }); }); - }); } /* Filter bar */ (function () { - const filtersbar = document.getElementById('filtersbar') - let tagText=''; + const filtersbar = document.getElementById('filtersbar') + let tagText = ''; - if (!filtersbar) { - return - } + if (!filtersbar) { + return + } - function activateFilterElement (dataAttributeValue) { - const el = filtersbar.querySelector(`[data-tag="${dataAttributeValue}"]`) - el.classList.add('active') - el.setAttribute('aria-current', 'true') - tagText=el.innerText - } + function activateFilterElement(dataAttributeValue) { + const el = filtersbar.querySelector(`[data-tag="${dataAttributeValue}"]`) + el.classList.add('active') + el.setAttribute('aria-current', 'true') + tagText = el.innerText + } + + const tagToFilter = (new URL(window.location)).searchParams.get('tag') - const tagToFilter = (new URL(window.location)).searchParams.get('tag') + if (tagToFilter === null || tagToFilter === 'all') { + activateFilterElement('all') + return + } - if (tagToFilter === null || tagToFilter === 'all') { - activateFilterElement('all') - return - } + activateFilterElement(tagToFilter) - activateFilterElement(tagToFilter) + const posts = document.querySelectorAll('[data-tags]') + let hiddenPosts = 0 - const posts = document.querySelectorAll('[data-tags]') - let hiddenPosts = 0 + posts.forEach(function (post) { + if (!post.dataset.tags.includes(tagToFilter)) { + post.setAttribute('hidden', '') + hiddenPosts++ + } + }) - posts.forEach(function (post) { - if (!post.dataset.tags.includes(tagToFilter)) { - post.setAttribute('hidden', '') - hiddenPosts++ + const locales = { + en: 'Articles for the theme ' + tagText + ' - Orange digital accessibility guidelines', + fr: 'Articles pour la thématique ' + tagText + ' - Recommandations accessibilité numérique Orange' } - }) - - const locales = { - en: 'Articles for the theme '+tagText +' - Orange digital accessibility guidelines', - fr:'Articles pour la thématique '+tagText+' - Recommandations accessibilité numérique Orange' - } - document.getElementById('filtersbar_counter').innerHTML = `${String(posts.length - hiddenPosts)}` - let title = `${String(posts.length - hiddenPosts)}`+ ' ' +locales[Application.lang]; - document.title= title; + document.getElementById('filtersbar_counter').innerHTML = `${String(posts.length - hiddenPosts)}` + let title = `${String(posts.length - hiddenPosts)}` + ' ' + locales[Application.lang]; + document.title = title; })(); /* Filter docsearch */ -(function(){ - setTimeout(() => { - let svgLoupe=document.getElementsByClassName('DocSearch-Search-Icon')[0]; - svgLoupe.setAttribute('aria-hidden',true) - svgLoupe.setAttribute('focusable',false) - }, "1000") - +(function () { + setTimeout(() => { + let svgLoupe = document.getElementsByClassName('DocSearch-Search-Icon')[0]; + svgLoupe.setAttribute('aria-hidden', true) + svgLoupe.setAttribute('focusable', false) + }, "1000") + })(); /* Filter article */ -(function(){ - - const tagToFilter = (new URL(window.location)).searchParams.get('tag') - - searchArticleButton = document.getElementById("search_article"); - if (searchArticleButton !== null) { - searchArticleButton.onclick= function (e){ - // Declare variables - var input, filter, ol, li, titleArticle, i, descriptionArticle, compteurArticle; - input = document.getElementById("search-article-text").value; - filter = input.toUpperCase(); - ol = document.getElementById("list_article"); - li = ol.children; - - // Loop through all list items, and hide those who don't match the search query - compteurArticle=0; - for (i = 0; i < li.length; i++) { - if (typeof li[i].attributes.hidden == "undefined") { - - titleArticle = li[i].getElementsByTagName("h2")[0].innerText; - descriptionArticle = li[i].getElementsByTagName("p")[0].innerText; - if (titleArticle.toUpperCase().indexOf(filter) > -1 || descriptionArticle.toUpperCase().indexOf(filter) > -1) { - compteurArticle++; - li[i].style.display = ""; - } else { - li[i].style.display = "none"; - } - } - } +(function () { + + const tagToFilter = (new URL(window.location)).searchParams.get('tag') + + searchArticleButton = document.getElementById("search_article"); + if (searchArticleButton !== null) { + + this.updateTitle = function() { + // Declare variables + var input, filter, ol, li, titleArticle, i, descriptionArticle, compteurArticle; + input = document.getElementById("search-article-text").value; + filter = input.toUpperCase(); + ol = document.getElementById("list_article"); + li = ol.children; + + // Loop through all list items, and hide those who don't match the search query + compteurArticle = 0; + for (i = 0; i < li.length; i++) { + if (typeof li[i].attributes.hidden == "undefined") { + + titleArticle = li[i].getElementsByTagName("h2")[0].innerText; + descriptionArticle = li[i].getElementsByTagName("p")[0].innerText; + if (titleArticle.toUpperCase().indexOf(filter) > -1 || descriptionArticle.toUpperCase().indexOf(filter) > -1) { + compteurArticle++; + li[i].style.display = ""; + } else { + li[i].style.display = "none"; + } + } + } document.getElementById("filtersbar_counter").innerText=compteurArticle; - if(tagToFilter !== null){ - var tagText =document.getElementById('filtersbar').querySelector(`[data-tag="${tagToFilter}"]`).innerText; - } - - const locales = { - en: { - h1 :'found for research \"' + input+'\"', - title : compteurArticle + ' Articles'+(tagToFilter ? ' for the theme '+tagText +'' : '')+''+(input ? ' with the search "'+input+'"' : '')+' - Orange digital accessibility guidelines', - }, - fr: { - h1 :'trouvés pour la recherche \"' + input+'\"', - title: compteurArticle + ' Articles'+(tagToFilter ? ' pour la thématique '+tagText +'' : '')+''+(input ? ' avec la recherche "'+input+'"' : '')+' - Recommandations accessibilité numérique Orange' + if (tagToFilter !== null) { + var tagText = document.getElementById('filtersbar').querySelector(`[data-tag="${tagToFilter}"]`).innerText; + } + const locales = { + en: { + all: ' article' + (compteurArticle > 1 ? 's' : '') + (tagToFilter ? ' - theme ' + tagText + '' : ''), + h1: ' article' + (compteurArticle > 1 ? 's' : '') + (tagToFilter ? ' - theme ' + tagText + '' : '') + '' + (input ? ' - search "' + input + '"' : ''), + title: compteurArticle + ' article' + (compteurArticle > 1 ? 's' : '') + (tagToFilter ? ' for the theme ' + tagText + '' : '') + '' + (input ? ' with the search "' + input + '"' : '') + ' - Orange digital accessibility guidelines', + }, + fr: { + all: ' article' + (compteurArticle > 1 ? 's' : '') + (tagToFilter ? ' - thématique ' + tagText + '' : ''), + h1: ' article' + (compteurArticle > 1 ? 's' : '') + (tagToFilter ? ' - thématique ' + tagText + '' : '') + '' + (input ? ' - recherche "' + input + '"' : ''), + title: compteurArticle + ' article' + (compteurArticle > 1 ? 's' : '') + (tagToFilter ? ' pour la thématique ' + tagText + '' : '') + '' + (input ? ' avec la recherche "' + input + '"' : '') + ' - Recommandations accessibilité numérique Orange' + } + } + + document.title = locales[Application.lang].title; + + if (filter === "") { + document.getElementById("search_title").innerText = locales[Application.lang].all; + } else { + document.getElementById("search_title").innerText = locales[Application.lang].h1; + } + }; + updateTitle(); + + searchArticleButton.onclick = function (e) { + updateTitle(); } - } - - document.title = locales[Application.lang].title; - if(filter == ""){ - document.getElementById("search_title").innerText=""; - } - else{ - document.getElementById("search_title").innerText=locales[Application.lang].h1; - } + var input = document.getElementById("search-article-text"); + + // Execute a function when the user presses a key on the keyboard + input.addEventListener("keypress", function (event) { + // If the user presses the "Enter" key on the keyboard + if (event.key === "Enter") { + // Cancel the default action, if needed + event.preventDefault(); + // Trigger the button element with a click + document.getElementById("search_article").click(); + } + }); } - - - var input = document.getElementById("search-article-text"); - - // Execute a function when the user presses a key on the keyboard - input.addEventListener("keypress", function(event) { - // If the user presses the "Enter" key on the keyboard - if (event.key === "Enter") { - // Cancel the default action, if needed - event.preventDefault(); - // Trigger the button element with a click - document.getElementById("search_article").click(); - } - }); - } })(); /* Back to top link */ (function () { - const handler = document.getElementById('back-to-top') - const threshold = 300 - - if (!handler || typeof window.requestAnimationFrame === 'undefined') { - return - } - - function hideHandler () { - handler.style.right = '-99999px' - handler.style.opacity = '0' - } - - function showHandler () { - handler.style.right = null - handler.style.opacity = '1' - } - - function onScroll () { - if (window.pageYOffset >= threshold) { - showHandler() - } else { - hideHandler() + const handler = document.getElementById('back-to-top') + const threshold = 300 + + if (!handler || typeof window.requestAnimationFrame === 'undefined') { + return + } + + function hideHandler() { + handler.style.right = '-99999px' + handler.style.opacity = '0' + } + + function showHandler() { + handler.style.right = null + handler.style.opacity = '1' + } + + function onScroll() { + if (window.pageYOffset >= threshold) { + showHandler() + } else { + hideHandler() + } } - } - hideHandler() + hideHandler() - window.addEventListener('scroll', function () { - window.requestAnimationFrame(onScroll) - }) + window.addEventListener('scroll', function () { + window.requestAnimationFrame(onScroll) + }) })(); /* Priority nav*/ -function initPriorityNav () { - const secondaryNavigation = jQuery('#secondary-navigation') +function initPriorityNav() { + const secondaryNavigation = jQuery('#secondary-navigation') - if (!secondaryNavigation) { - return - } + if (!secondaryNavigation) { + return + } - const locales = { - en: 'More', - fr: 'Plus' - } + const locales = { + en: 'More', + fr: 'Plus' + } - if (!locales.hasOwnProperty(Application.lang)) { - throw new Error(`[initPriorityNav()] : lang '${Application.lang}' is not managed by the method's translations`) - } + if (!locales.hasOwnProperty(Application.lang)) { + throw new Error(`[initPriorityNav()] : lang '${Application.lang}' is not managed by the method's translations`) + } - secondaryNavigation.prioritynav(locales[Application.lang]) + secondaryNavigation.prioritynav(locales[Application.lang]) } +function highlightCodeBlocks() { + hljs.initHighlighting() + if (Application.vendors.highlightTitle === true) { -function highlightCodeBlocks () { - hljs.initHighlighting() - - if (Application.vendors.highlightTitle === true) { + const codeBlocks = document.querySelectorAll('.hljs') - const codeBlocks = document.querySelectorAll('.hljs') - - if (!codeBlocks.length) { - return - } + if (!codeBlocks.length) { + return + } - const displayLanguageList = { - 'css': 'CSS', - 'html': 'HTML', - 'java': 'Java', - 'javascript': 'JavaScript', - 'json': 'JSON', - 'kotlin': 'Kotlin', - 'objectivec':'Objective-C', - 'swift': 'Swift', - 'swiftui': 'SwiftUI', - 'xml': 'XML' - } + const displayLanguageList = { + 'css': 'CSS', + 'html': 'HTML', + 'java': 'Java', + 'javascript': 'JavaScript', + 'json': 'JSON', + 'kotlin': 'Kotlin', + 'objectivec': 'Objective-C', + 'swift': 'Swift', + 'swiftui': 'SwiftUI', + 'xml': 'XML' + } - codeBlocks.forEach(function (codeBlock) { - const language = codeBlock.result.language - const displayLanguage = displayLanguageList[language] || language - const languageWrapper = document.createElement('div') - languageWrapper.classList.add('bg-primary', 'd-inline-block', 'p-2', 'font-weight-bold') - languageWrapper.textContent = displayLanguage + codeBlocks.forEach(function (codeBlock) { + const language = codeBlock.result.language + const displayLanguage = displayLanguageList[language] || language + const languageWrapper = document.createElement('div') + languageWrapper.classList.add('bg-primary', 'd-inline-block', 'p-2', 'font-weight-bold') + languageWrapper.textContent = displayLanguage - codeBlock.parentNode.insertBefore(languageWrapper, codeBlock) - }) - } + codeBlock.parentNode.insertBefore(languageWrapper, codeBlock) + }) + } } -function tabPanelFocus (tabTitleID,tabDescriptionID){ - elementTarget = document.getElementById(tabTitleID) - new boosted.Tab(elementTarget).show(); - elementTarget.focus(); - document.getElementById(tabDescriptionID).scrollIntoView({ behavior: 'smooth', block: 'start' }) +function tabPanelFocus(tabTitleID, tabDescriptionID) { + elementTarget = document.getElementById(tabTitleID) + new boosted.Tab(elementTarget).show(); + elementTarget.focus(); + document.getElementById(tabDescriptionID).scrollIntoView({behavior: 'smooth', block: 'start'}) } window.addEventListener('DOMContentLoaded', function () { - //initPriorityNav() - automaticTabPan(); - manageEventTabPan(); - - if (Application.vendors.highlightJS === true) { - highlightCodeBlocks() - } -}, { once: true }) + //initPriorityNav() + automaticTabPan(); + manageEventTabPan(); + + if (Application.vendors.highlightJS === true) { + highlightCodeBlocks() + } +}, {once: true}) diff --git a/src/assets/style.css b/src/assets/style.css index 49b4fea98..194a72b0e 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -111,6 +111,15 @@ blockquote p::after { padding-left: .5rem; } +.tagType { + background-color: black; + color: white; + padding: 6px 12px 8px 12px; + font-size: 14px; + font-weight: bold; + line-height: 16px; + margin-bottom: 0; +} /* * Glossary @@ -185,32 +194,33 @@ pre code { * Search field */ -.DocSearch-Button:hover, .DocSearch-Button:focus{ - box-shadow: inset 0 0 0 .125rem #f16e00 ; - +.DocSearch-Button:hover, .DocSearch-Button:focus { + box-shadow: inset 0 0 0 .125rem #f16e00; + } .DocSearch-Form { box-shadow: #ccc 0 0 0 .125rem inset; -} +} .DocSearch-Form:focus-within, .DocSearch-Form:focus, .DocSearch-Form:hover { box-shadow: #000 0 0 0 .125rem inset; } -.DocSearch-Hit{ +.DocSearch-Hit { padding: 3px; } .DocSearch-Hit[aria-selected="true"] a { - background-color: #f16e00 ; + background-color: #f16e00; } + .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-action, .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-icon, .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path, .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-text, .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title, .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Tree, .DocSearch-Hit[aria-selected="true"] mark { color: #000 !important; background: none; } -.DocSearch-Hit-Container, .DocSearch-Hit-action, .DocSearch-Hit-icon, .DocSearch-MagnifierLabel, .DocSearch-Hit-source{ +.DocSearch-Hit-Container, .DocSearch-Hit-action, .DocSearch-Hit-icon, .DocSearch-MagnifierLabel, .DocSearch-Hit-source { color: #000; } @@ -218,22 +228,23 @@ pre code { color: currentColor; background-color: #f16e00; } + .DocSearch-Hit-path, .DocSearch-Help, .DocSearch-Label, .DocSearch-Commands-Key, .DocSearch-Button-Key, .DocSearch-Label, .DocSearch-Button { - color: #666; + color: #666; } -.DocSearch-Cancel{ - color: #000; +.DocSearch-Cancel { + color: #000; text-decoration: underline; } -.DocSearch-Cancel:focus, .DocSearch-Cancel:hover{ +.DocSearch-Cancel:focus, .DocSearch-Cancel:hover { text-decoration-thickness: .1rem; } -.DocSearch-Prefill{ - color: #000; - font-weight: bolder; +.DocSearch-Prefill { + color: #000; + font-weight: bolder; } .DocSearch-Button-Container { @@ -303,16 +314,16 @@ pre code { .bg-800 { background-color: #595959 !important; - color: #fff!important + color: #fff !important } .bg-800 a { - color: #fff!important + color: #fff !important } .bg-900 { background-color: #333333 !important; - color: #fff!important + color: #fff !important } .no-js .hidden-if-no-js { @@ -332,7 +343,8 @@ pre code { .breadcrumb-item:nth-last-of-type(2)::before { transform: rotate(0); } - .MobileDropdownNavigationContainer .dropdown~.dropdown { + + .MobileDropdownNavigationContainer .dropdown ~ .dropdown { margin-top: .625rem; } } @@ -353,9 +365,11 @@ pre code { .bg-supporting-green { color: #000 !important; } + .bg-supporting-purple { color: #000 !important; } + .bg-supporting-yellow { color: #000 !important; } @@ -366,9 +380,9 @@ pre code { vertical-align: middle; } -.bg-supporting-customblue{ +.bg-supporting-customblue { background-color: #085EBD; - color:#fff; + color: #fff; } .table-persona-pink th[scope=row] { @@ -383,55 +397,55 @@ pre code { background-color: #FFF1FB; } -.table-persona-blue th[scope=row]{ +.table-persona-blue th[scope=row] { background-color: #D9F0FB; } -.table-persona-yellow th[scope=row]{ +.table-persona-yellow th[scope=row] { background-color: #FFF5CB; } -.text-supporting-pink{ - color:#ffb4e6 !important +.text-supporting-pink { + color: #ffb4e6 !important } -.text-supporting-green{ - color:#50be87 !important +.text-supporting-green { + color: #50be87 !important } -.text-supporting-purple{ - color:#D9C2F0 !important +.text-supporting-purple { + color: #D9C2F0 !important } -.text-supporting-blue{ - color:#4BB4E6 !important +.text-supporting-blue { + color: #4BB4E6 !important } -.text-supporting-yellow{ - color:#fc0 !important +.text-supporting-yellow { + color: #fc0 !important } -.persona-background-pink{ +.persona-background-pink { background: url(/assets/images/bosses-pink.svg) no-repeat bottom; background-size: contain; } -.persona-background-green{ +.persona-background-green { background: url(/assets/images/bosses-green.svg) no-repeat bottom; background-size: contain; } -.persona-background-purple{ +.persona-background-purple { background: url(/assets/images/bosses-purple.svg) no-repeat bottom; background-size: contain; } -.persona-background-blue{ +.persona-background-blue { background: url(/assets/images/bosses-blue.svg) no-repeat bottom; background-size: contain; } -.persona-background-yellow{ +.persona-background-yellow { background: url(/assets/images/bosses-yellow.svg) no-repeat bottom; background-size: contain; } @@ -440,25 +454,28 @@ pre code { .step-1 { margin-top: 150px; } + .step-2 { margin-top: 100px; } + .step-3 { margin-top: 50px; } - .pb-lg-persona{ + + .pb-lg-persona { padding-bottom: 5.75rem !important } } @media (max-width: 1024px) { - .lg-persona{ + .lg-persona { margin-bottom: 6.10rem; } } @media (min-width: 768px) { - .mb-persona{ + .mb-persona { margin-bottom: 6.10rem; } } @@ -473,8 +490,8 @@ pre code { } .persona-apps .small { - font-size: .75rem; - padding-top: .25rem; + font-size: .75rem; + padding-top: .25rem; } .persona-apps li { @@ -490,13 +507,13 @@ pre code { .form-control.bg-dark:focus { color: #FFF; - border-color: #ff7900!important; + border-color: #ff7900 !important; } /*secondary navigation*/ -.o-nav-local .nav>.nav-item:first-child .active::before { +.o-nav-local .nav > .nav-item:first-child .active::before { left: 0; } diff --git a/src/en/articles/index.njk b/src/en/articles/index.njk index 0b578e205..a0ca17520 100644 --- a/src/en/articles/index.njk +++ b/src/en/articles/index.njk @@ -8,7 +8,7 @@ eleventyExcludeFromCollections: true {% import "../../_includes/components/ui.njk" as ui with context %} {% set posts = collections.articles_en | reverse %} -

      {{ posts | length }} Technical articles

      +

      {{ posts | length }}

      diff --git a/src/fr/mobile/ios/test.md b/src/fr/mobile/ios/test.md index 09f579dd3..64d66e1c3 100644 --- a/src/fr/mobile/ios/test.md +++ b/src/fr/mobile/ios/test.md @@ -107,7 +107,7 @@ Enfin, les quelques points suivants sont à examiner minutieusement : Les **tests** à réaliser pour le `Dynamic Type` sont **assez longs** car plusieurs terminaux sont à étudier et chaque écran est à vérifier avec une modification de la taille du texte à faire pour chacun des écrans. -
      My biggest tip is to think about these early on in the design process. WWDC 2020 - Make Your App Visually Accessible (voir la vidéo)
      +
      My biggest tip is to think about these early on in the design process. WWDC 2020 - Make Your App Visually Accessible (voir la vidéo)


      ### VoiceOver From 4c316689ce372bc18a301189ca1dee79fb45cdd2 Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Wed, 31 Jul 2024 14:28:17 +0200 Subject: [PATCH 15/20] Fixes #537 : Corriger l'usage de la couleur Orange du texte d'un lien lors de son survol avec la souris --- src/assets/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/style.css b/src/assets/style.css index 194a72b0e..2e402b6be 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -150,6 +150,10 @@ blockquote p::after { text-decoration: none; } +a:hover { + font-weight: 700; +} + [role="contentinfo"] svg { fill: #fff; } From 419a13f513707527ff8084627537f246c800cd18 Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Wed, 31 Jul 2024 15:03:59 +0200 Subject: [PATCH 16/20] =?UTF-8?q?Fixes=20#535=20:=20Des=20changements=20de?= =?UTF-8?q?=20langue=20=C3=A0=20indiquer=20dans=20du=20texte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/json/checklist/tests-web-fr.json | 18 +++---- src/fr/mobile/ios/conception.md | 2 +- src/fr/mobile/ios/developpement.md | 4 +- src/fr/mobile/ios/test.md | 56 ++++++++++----------- src/fr/web/developper/contenu-textuel.md | 2 +- 5 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/assets/json/checklist/tests-web-fr.json b/src/assets/json/checklist/tests-web-fr.json index 39f3fbb12..68b500578 100644 --- a/src/assets/json/checklist/tests-web-fr.json +++ b/src/assets/json/checklist/tests-web-fr.json @@ -15,8 +15,8 @@ }, { "themes": "Contenu textuel", "title": "Donner des titres aux rubriques", - "type": [["HeadingsMap"], ["ANDI"]], - "tests": [["Utiliser HeadingsMap"],["Utiliser ANDI/Structures/Headings"]], + "type": [["HeadingsMap"], ["ANDI"]], + "tests": [["Utiliser HeadingsMap"],["Utiliser ANDI/Structures/Headings"]], "verifier": ["Vérifier que les titres sont pertinents, reflètent le contenu de la page et sont non vides", "Vérifier que les titres ont un niveau correspondant à leur poids sémantique dans la structure de la page"], "resultat": ["Tous les contenus, traités visuellement comme des titres, possèdent une sémantique de titre (balises <h1> à <h6>)", " Les titres de niveaux sont hiérarchisés de manière à refleter leur poids sémantique"], "exception": "

      Ne pas tenir compte des titres masqués (visibility:hidden, aria-hidden='true' ou display:none). Si un de ces titres masqués est susceptible d'apparaître, il faut refaire les observations sur la nouvelle structuration du titrage.

      ", @@ -225,8 +225,8 @@ }, { "themes": "Couleurs et contrastes", "title": "Assurer un contraste suffisamment élevé entre texte et arrière-plan", - "type": ["Color Contrast Analyser"], - "tests": ["Lancer le Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], + "tests": ["Lancer le Color Contrast Analyser"], "verifier": ["Vérifier que le contraste soit suffisant pour les textes et les textes sous forme d'images", "Vérifier que les liens non-soulignés ont un rapport de contraste suffisant avec le texte environnant et la couleur de fond"], "resultat": ["Présence d'éléments textuels ou images sous forme de texte suffisamment contrastés :
      • Taille inférieure à 24px : contraste de 4,5:1
      • Taille supérieure ou égale à 24px : contraste de 3:1
    • Pour les textes gras
      • Taille inférieure à 18,5px : contraste de 4,5:1
      • Taille supérieure ou égale à 18,5px : contraste de 3:1
      ", "Les liens non-soulignés ont un rapport de contraste de 3:1 avec le texte environnement et la couleur de fond"], "exception": "N'a pas d'exigence de contraste :
      • Le texte ou les images de texte qui font partie d'un composant d'interface utilisateur inactif, qui sont une décoration pure, qui ne sont visibles par personne ou qui font partie d'une image qui contient un autre contenu visuel important,
      • Ainsi que du texte qui fait partie d'un logo ou un nom de marque ou tout logotype
      ", @@ -239,8 +239,8 @@ }, { "themes": "Couleurs et contrastes", "title": "Assurer un contraste suffisamment élevé dans les composants d'interface ou les éléments graphiques porteurs d'information", - "type": ["Color Contrast Analyser"], - "tests": ["Lancer le Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], + "tests": ["Lancer le Color Contrast Analyser"], "verifier": ["Vérifier que les graphiques, les icônes, et les composants interactifs graphiques ont un contraste suffisant pour transmettre l'information"], "resultat": ["Présence d'objets graphiques, d'icônes, et de composants interactifs ayant un contraste de 3:1"], "exception": "Sont exclus du périmètre :
      • les logos
      • un texte, comme un label, un tableau de données, apporte la même information que l’icône ou le graphique
      • le manque de contraste de l’image n'empêche pas la compréhension du contenu ou de sa fonction
      • le manque de contraste est essentiel pour convoyer l'information
      • les composants inactifs
      ", @@ -267,7 +267,7 @@ },{ "themes": "Couleurs et contrastes", "title": "S'assurer que l'information est transmise par un autre moyen que la couleur", - "type": ["Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], "tests": ["Identifier les éléments utilisant de la couleur pour porter de l'information"], "verifier": ["Vérifier que la couleur n'est pas le seul moyen de convoyer d'information :
      au moins un autre moyen visuel est disponible pour obtenir la même information"], "resultat": ["L'information transmise par la couleur peut également être obtenue par un texte explicite", "L'information transmise par la couleur est complétée par une autre information visuelle (exemple : des icônes utilisent des couleurs, mais également des formes différentes)", "Cas particulier des liens dans du texte : s'ils ne sont pas soulignés, au focus clavier et au survol souris, fournir un autre moyen que la couleur pour les distinguer."], @@ -281,7 +281,7 @@ }, { "themes": "Couleurs et contrastes", "title": "S'assurer que les liens sont identifiables par un autre moyen que la couleur", - "type": ["Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], "tests": ["Parcourir la page", "Identifier les liens dans le corps du texte"], "verifier": ["Vérifiez que les liens dans le corps du texte sont identifiables visuellement par un moyen autre que la couleur (souligné, gras, etc.) par rapport au reste du texte", "Si ce n'est pas le cas, s'assurer d'un contraste de 3:1 entre le texte, le fond et les liens et qu'il existe un autre moyen que la couleur pour les identifier au survol et au focus"], "resultat": ["Les liens sont identifiables visuellement dans du texte par un autre moyen que la couleur ou par un rapport de contraste suffisant avec le corps du texte"], @@ -420,7 +420,7 @@ }, { "themes": "Navigation générale", "title": "La structure sémantique globale du document est-elle cohérente ?", - "type": ["Wave toolbar"], + "type": ["Wave toolbar"], "tests": ["Lancer Wave > Structure", "Examiner la hiérarchisation des landmarks ARIA"], "verifier": ["
      • vérifier que chaque région de la page possède une sémantique pertinente à travers des balises de structure HTML5 header, nav…
      • vérifier que le contenu principal est inclus dans une balise main
      • vérifier que l'élément main ne contient pas d'éléments répétés ailleurs dans la page (ex : navigation)
      "], "resultat": ["Les différentes régions sont clairement identifiables programmatiquement"], diff --git a/src/fr/mobile/ios/conception.md b/src/fr/mobile/ios/conception.md index 69e8ed2fd..652851c33 100644 --- a/src/fr/mobile/ios/conception.md +++ b/src/fr/mobile/ios/conception.md @@ -153,7 +153,7 @@ Dans ce cas, l'utilisation de l'option d'accessibilité . diff --git a/src/fr/mobile/ios/developpement.md b/src/fr/mobile/ios/developpement.md index 6f58f4c3f..3d11b79bc 100644 --- a/src/fr/mobile/ios/developpement.md +++ b/src/fr/mobile/ios/developpement.md @@ -2445,7 +2445,7 @@ extension ContentSizeCategory {
      - - ne pas oublier d'adapter les contraintes graphiques aux éléments susceptibles de voir leur taille modifiée en privilégiant l'utilisation de valeurs dynamiques : penser à paramétrer les éléments inclus dans les navigation/tab/status bar et toolbar qui seront affichés via le **[Large Content Viewer](../wwdc/2019/261)**, + - ne pas oublier d'adapter les contraintes graphiques aux éléments susceptibles de voir leur taille modifiée en privilégiant l'utilisation de valeurs dynamiques : penser à paramétrer les éléments inclus dans les navigation/tab/status bar et toolbar qui seront affichés via le **[Large Content Viewer](../wwdc/2019/261)**, - penser à adapter le [contraste des couleurs](../conception/#couleurs) à la taille de texte modifiée si nécessaire. @@ -2492,7 +2492,7 @@ Il est toutefois nécessaire de bien garder à l'esprit que cette nouveauté&nbs id="truncHyphen-Description" role="tabpanel"> -L'utilisation du `Dynamic Type` exposé dans le paragraphe précédent s'accompagne indéniablement de la troncature de mots en fonction du grossissement de texte choisi par l'utilisateur. +L'utilisation du `Dynamic Type` exposé dans le paragraphe précédent s'accompagne indéniablement de la troncature de mots en fonction du grossissement de texte choisi par l'utilisateur. Malheureusement, cela n'est pas pris en compte nativement par le système et seule une intervention au niveau programmatique permet d'obtenir ce rendu visuel particulièrement apprécié.
      • diff --git a/src/fr/mobile/ios/test.md b/src/fr/mobile/ios/test.md index 64d66e1c3..b68b0c9cd 100644 --- a/src/fr/mobile/ios/test.md +++ b/src/fr/mobile/ios/test.md @@ -4,11 +4,11 @@ abstract: "Guide pour tester l'accessibilité d'une application mobile iOS" displayToc: true --- -# Tester l'accessibilité d'une application iOS +# Tester l'accessibilité d'une application iOS -Cette page décrit l'ensemble des tests nécessaires à l'évaluation d'une application iOS dans le cadre de l'accessibilité. +Cette page décrit l'ensemble des tests nécessaires à l'évaluation d'une application iOS dans le cadre de l'accessibilité. -Il est indispensable que **TOUS** les intervenants du projet connaissent les spécificités d'accessibilité iOS présentées sur ce site de façon à comprendre parfaitement le lien entre les besoins des utilisateurs et leur implémentation au sein de l'application à développer. +Il est indispensable que **TOUS** les intervenants du projet connaissent les spécificités d'accessibilité iOS présentées sur ce site de façon à comprendre parfaitement le lien entre les besoins des utilisateurs et leur implémentation au sein de l'application à développer. Chacune des fonctionnalités doit être vue comme un élément impactant fortement le confort de l'utilisateur, comme une **brique essentielle à connotation humaine** et pas juste fonctionnelle. @@ -29,18 +29,18 @@ Que ce soit dans la conception, la réalisation ou la vérification, chaque déc ## Environnement de travail Quatre grandes familles peuvent être dépeintes au sein de chaque projet : -- à l'initiative de tout ce qui va être créé, la **personne en charge de prioriser les fonctionnalités à implémenter** doit parfaitement comprendre les besoins utilisateurs et la façon de les décliner sous iOS. +- à l'initiative de tout ce qui va être créé, la **personne en charge de prioriser les fonctionnalités à implémenter** doit parfaitement comprendre les besoins utilisateurs et la façon de les décliner sous iOS. Cette personne doit s'assurer que des **critères d'acceptations** sont **parfaitement définis** pour chacune des fonctionnalités et que leur réalisation répond exactement à ce qui était demandé **en vérifiant elle-même le fonctionnement souhaité**, - l'équipe **DESIGN** doit réellement se mettre à la place de l'utilisateur de façon à **fournir les préconisations** les plus précises possibles en fonction des demandes projet en amont, - l'équipe **DÉVELOPPEMENT** doit grandement s'appuyer sur les [vidéos WWDC](../wwdc/) et sur le [guide pour les développeurs](../developpement/) afin de **trouver les solutions** les plus appropriées aux différentes situations rencontrées, -- l'équipe **TEST** doit parfaitement maîtriser la [gestuelle spécifique](../voiceover/) et comprendre toutes les possibilités offertes par iOS pour **réaliser chacun des tests** de façon optimum avant mise en production. +- l'équipe **TEST** doit parfaitement maîtriser la [gestuelle spécifique](../voiceover/) et comprendre toutes les possibilités offertes par iOS pour **réaliser chacun des tests** de façon optimum avant mise en production. Quel que soit le mode de fonctionnement *(SCRUM, ...)*, les fonctions dévolues à chacune de ces équipes doivent être présentes au sein du projet. -De façon à pouvoir s'assurer que les recommandations d'accessibilité iOS ont bien été prises en compte, deux modes d'évaluation sont à prévoir : +De façon à pouvoir s'assurer que les recommandations d'accessibilité iOS ont bien été prises en compte, deux modes d'évaluation sont à prévoir : - [**FONCTIONNEL**](#evaluation-fonctionnelle) : on s'assure que l'utilisateur peut naviguer parmi tous les écrans sans soucis, en ayant accès à toute l'information visuelle mise à disposition et surtout sans avoir à se poser de questions. Le parcours utilisateur doit être fluide, simple et sans équivoque, @@ -50,7 +50,7 @@ Ce mode vient aussi souvent confirmer et solutionner certains problèmes fonctio
      ## Évaluation fonctionnelle -La participation aux tests de cette partie ne nécessite aucune connaissance technique particulière si ce n'est savoir (dés)activer et utiliser des fonctionnalités d'accessibilité iOS. +La participation aux tests de cette partie ne nécessite aucune connaissance technique particulière si ce n'est savoir (dés)activer et utiliser des fonctionnalités d'accessibilité iOS. En plus des [critères de base](../conception/) à respecter, il est primordial de s'assurer que des [options d'accessibilité](../conception/#options-daccessibilite) activées par un utilisateur sont parfaitement opérationnelles dans toutes les pages de l'application développée. @@ -63,20 +63,20 @@ Ci-dessous, quelques critères importants à tester impérativement : - **réduire le floutage et la transparence** : victime de problèmes visuels, une personne peut rapidement trouver les effets de flou et de transparence très inconfortables. Il faut donc vérifier que l'[atténuation proposée par le système](../wwdc/2018/230/#floutage-et-transparence-0307) est bien prise en compte sur les pages applicatives où ces effets sont implémentés, -- **mode sombre** : le résultat graphique de cette *fonctionnalité iOS 13* doit absolument être vérifié pour s'assurer que les différents contrastes de couleurs utilisées sont conformes aux critères de conception, sans oublier l'option d'accessibilité [augmenter le contraste](../conception/#options-daccessibilite) qui est aussi un élément incontournable à vérifier dans ce contexte. +- **mode sombre** : le résultat graphique de cette *fonctionnalité iOS 13* doit absolument être vérifié pour s'assurer que les différents contrastes de couleurs utilisées sont conformes aux critères de conception, sans oublier l'option d'accessibilité [augmenter le contraste](../conception/#options-daccessibilite) qui est aussi un élément incontournable à vérifier dans ce contexte.
      -En plus de ces critères fondamentaux, il y a bien évidemment les incontournables iOS pour qualifier à minima une application d'accessible : +En plus de ces critères fondamentaux, il y a bien évidemment les incontournables iOS pour qualifier à minima une application d'accessible : -1. [Dynamic Type](#dynamic-type) (grossissement de texte) +1. [Dynamic Type](#dynamic-type) (grossissement de texte) 2. [VoiceOver](#voiceover) (lecteur d'écran) 3. [Contrôle de sélection](#controle-de-selection) -![Principales options d'accessibilité sur iOS : options utilisateurs, raccourcis & Siri, mode sombre, grossissement de texte, lecteur d'écran, contrôle de sélection](../../images/ios-test-overview.png) -### Dynamic Type +![Principales options d'accessibilité sur iOS : options utilisateurs, raccourcis & Siri, mode sombre, grossissement de texte, lecteur d'écran, contrôle de sélection](../../images/ios-test-overview.png) +### Dynamic Type Pour bien comprendre comment le grossissement de texte fonctionne, il est fortement recommandé de visionner l'exemple proposé dans la [vidéo WWDC 2017](../wwdc/2017/245/#exemple-2432) parfaitement résumée dans la partie WWDC de ce site. @@ -99,13 +99,13 @@ Enfin, les quelques points suivants sont à examiner minutieusement : ![Exemple de troncature : première ligne "Synchronisa-" et deuxième ligne "tion Wifi"](../../images/ios-test-DynamicType_2.png) -- **les illustrations comme les icônes doivent s'adapter au grossissement souhaité** : l'utilisation du [Large Content Viewer](../wwdc/2019/261/) après un appui long, l'implémentation d'un pinch à 2 doigts afin d’éviter à l’utilisateur d’avoir recours à la fonctionnalité `Zoom` ou encore le simple [grossissement d'un élément graphique](../developpement/#taille-des-elements-graphiques) peuvent être des solutions selon les cas rencontrés, +- **les illustrations comme les icônes doivent s'adapter au grossissement souhaité** : l'utilisation du [Large Content Viewer](../wwdc/2019/261/) après un appui long, l'implémentation d'un pinch à 2 doigts afin d’éviter à l’utilisateur d’avoir recours à la fonctionnalité `Zoom` ou encore le simple [grossissement d'un élément graphique](../developpement/#taille-des-elements-graphiques) peuvent être des solutions selon les cas rencontrés, - penser à **modifier le grossissement de texte au sein de chaque écran** pour s’assurer que tous ses éléments répondent parfaitement aux contraintes graphiques mises en place, - dès que la **correction d’une anomalie** remontée sur un terminal est effective, elle **doit être vérifiée sur les autres terminaux utilisés en tests** afin de s'assurer que le problème est réellement éradiqué. -Les **tests** à réaliser pour le `Dynamic Type` sont **assez longs** car plusieurs terminaux sont à étudier et chaque écran est à vérifier avec une modification de la taille du texte à faire pour chacun des écrans. +Les **tests** à réaliser pour le `Dynamic Type` sont **assez longs** car plusieurs terminaux sont à étudier et chaque écran est à vérifier avec une modification de la taille du texte à faire pour chacun des écrans.
      My biggest tip is to think about these early on in the design process. WWDC 2020 - Make Your App Visually Accessible (voir la vidéo)


      @@ -122,38 +122,38 @@ Il est donc **très fortement recommandé** de connaître au moins les gestes de data-bs-toggle="tab" href="#VoiceOver-iOS15" role="tab" - aria-selected="true">iOS 15 + aria-selected="true" lang="en">iOS 15
    -![Sur iOS 15 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS15.png) +![Sur iOS 15 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS15.png)
    -![Sur iOS 13 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS13.png) +![Sur iOS 13 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS13.png)
    -![Sur iOS 12 : activer Voice Over à partir du menu Général-Accessibilité-Voice Over](../../images/ios-test-VO_iOS12.png) +![Sur iOS 12 : activer Voice Over à partir du menu Général-Accessibilité-Voice Over](../../images/ios-test-VO_iOS12.png)
    @@ -198,36 +198,36 @@ Remarque : l'activation de cette fonctionnalité se fait elle aussi via les data-bs-toggle="tab" href="#SwitchControl-iOS15" role="tab" - aria-selected="true">iOS 15 + aria-selected="true" lang="en">iOS 15
    -![Sur iOS 15 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS15.png) +![Sur iOS 15 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS15.png)
    -![Sur iOS 13 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS13.png) +![Sur iOS 13 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS13.png)
    -![Sur iOS 12 : activer Contrôle de sélection à partir du menu Général-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS12.png) +![Sur iOS 12 : activer Contrôle de sélection à partir du menu Général-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS12.png)

    @@ -245,9 +245,9 @@ L'outil Accessibility Inspector dispose d'une fonctionnal

    ### Inspection de code -L'interface de développement Xcode fournit un outil particulièrement intéressant intitulé **Accessibility Inspector**. +L'interface de développement Xcode fournit un outil particulièrement intéressant intitulé **Accessibility Inspector**. -L'intérêt et l'utilisation de cet outil ne seront pas développés ici car ils sont très bien expliqués dans les vidéos parfaitement détaillées [`Audit` `d'une` `app` `en` `accessibilité`](../wwdc/2016/407/) et [`Découvrir` `Accessibility` `Inspector`](../wwdc/2019/#decouvrir-accessibility-inspector) dont le visionnage est très fortement recommandé. +L'intérêt et l'utilisation de cet outil ne seront pas développés ici car ils sont très bien expliqués dans les vidéos parfaitement détaillées [`Audit` `d'une` `app` `en` `accessibilité`](../wwdc/2016/407/) et [`Découvrir` `Accessibility` `Inspector`](../wwdc/2019/#decouvrir-accessibility-inspector) dont le visionnage est très fortement recommandé.

    ### Tests liés au code diff --git a/src/fr/web/developper/contenu-textuel.md b/src/fr/web/developper/contenu-textuel.md index 06d2582bf..9a93230db 100644 --- a/src/fr/web/developper/contenu-textuel.md +++ b/src/fr/web/developper/contenu-textuel.md @@ -83,7 +83,7 @@ Un titrage de page avec un saut de niveau h2 → h4 : **Outils :** Des extensions à installer dans votre navigateur permettent d'extraire la liste des titres : -- L’extension HeadingsMaps disponible sur Firefox et chrome. +- L’extension HeadingsMaps disponible sur Firefox et chrome. - L'extension Web developer. **Référence WCAG :** From 90145227e7b1631ba06a8e7b4f7a3569cffed847 Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Tue, 6 Aug 2024 10:53:23 +0200 Subject: [PATCH 17/20] =?UTF-8?q?Fixes=20#535=20:=20Des=20changements=20de?= =?UTF-8?q?=20langue=20=C3=A0=20indiquer=20dans=20du=20texte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/fr/mobile/ios/voiceover/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/fr/mobile/ios/voiceover/index.md b/src/fr/mobile/ios/voiceover/index.md index 75a7ccc39..e9da5d65d 100644 --- a/src/fr/mobile/ios/voiceover/index.md +++ b/src/fr/mobile/ios/voiceover/index.md @@ -17,21 +17,21 @@ L'activation de VoiceOver se fait via le menu `Réglages` data-bs-toggle="tab" href="#VoiceOverActivation-iOS15" role="tab" - aria-selected="true">iOS 15 + aria-selected="true" lang="en">iOS 15