From 8d1f37511b0d467d6df4b047230f14afd8c936e9 Mon Sep 17 00:00:00 2001 From: Emmanuel Pelletier Date: Fri, 8 Mar 2024 16:27:40 +0100 Subject: [PATCH] =?UTF-8?q?fix(logo):=20=C3=A9vite=20les=20arr=C3=AAts=20d?= =?UTF-8?q?e=20vocalisation=20de=20lecteurs=20d'=C3=A9crans?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Actuellement on utilise des `
` dans les logos pour que "République Française" ou autres termes s'affichent bien visuellement. Par défaut, un lecteur d'écran peut avoir tendance à arrêter la lecture après un `
`. C'est le comportement normal, c'est ce qu'on veut habituellement : il s'arrête pour marquer un passage à la ligne. Cependant ici ça serait mieux que le lecteur ne s'arrête pas, le br étant utilisé uniquement pour l'aspect layout. Masquer ces `
` de l'arbre d'accessibilité permet de rendre la vocalisation plus fluide (plus d'arrêts à cause des br) tout en gardant l'impact visuel. Note : dans certains usages du logo, le problème n'était pas présent (le dom n'est pas tout à fait le même sur un "header minimal" et un "header sans navigation" par exemple). Cependant j'ai trouvé ça pas plus mal de garder cette idée de aria-hidden partout afin que tout copié/collé rapide du DSFR fonctionne. Signed-off-by: Emmanuel Pelletier --- .../example/component/header/index.ejs | 2 +- src/analytics/example/spa/agnostic/index.ejs | 2 +- src/analytics/example/spa/angular/_index.ejs | 2 +- src/analytics/example/spa/react/index.ejs | 2 +- src/analytics/example/spa/vue/index.ejs | 2 +- .../display/deprecated/example/index.ejs | 2 +- src/component/display/example/index.ejs | 2 +- .../follow/deprecated/example/sample/data.ejs | 2 +- .../follow/example/data/socials.json.ejs | 2 +- .../deprecated/example/sample/header.ejs | 2 +- src/component/header/example/index.ejs | 34 +++++++++---------- src/component/logo/example/index.ejs | 6 ++-- .../logo/example/sample/logo-diplomacy.ejs | 2 +- .../logo/example/sample/logo-ecology.ejs | 2 +- .../logo/example/sample/logo-egality.ejs | 2 +- src/component/skiplink/example/prepend.ejs | 2 +- src/page/example/layout.ejs | 2 +- tool/example/decorator.ejs | 4 +-- 18 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/analytics/example/component/header/index.ejs b/src/analytics/example/component/header/index.ejs index 563fdc6da8..a482334ada 100755 --- a/src/analytics/example/component/header/index.ejs +++ b/src/analytics/example/component/header/index.ejs @@ -1,5 +1,5 @@ <% const sample = getSample(include); %>
- <%- sample('En-tête', '../../../../component/header/example/sample/header.ejs', {header: { id: uniqueId('header'), logo:{ title: 'République
Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:9.0625rem;'), service: true, links:true, search: true, navigation: 'min' }}); %> + <%- sample('En-tête', '../../../../component/header/example/sample/header.ejs', {header: { id: uniqueId('header'), logo:{ title: 'RépubliqueFrançaise'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:9.0625rem;'), service: true, links:true, search: true, navigation: 'min' }}); %>
diff --git a/src/analytics/example/spa/agnostic/index.ejs b/src/analytics/example/spa/agnostic/index.ejs index 0a93174fd4..84ecf7d79d 100644 --- a/src/analytics/example/spa/agnostic/index.ejs +++ b/src/analytics/example/spa/agnostic/index.ejs @@ -7,7 +7,7 @@
diff --git a/src/analytics/example/spa/angular/_index.ejs b/src/analytics/example/spa/angular/_index.ejs index 15f1c56966..44b2c0b0e3 100644 --- a/src/analytics/example/spa/angular/_index.ejs +++ b/src/analytics/example/spa/angular/_index.ejs @@ -26,7 +26,7 @@ app.config(function($routeProvider) {
diff --git a/src/analytics/example/spa/react/index.ejs b/src/analytics/example/spa/react/index.ejs index 22f0726436..e99fcb3790 100644 --- a/src/analytics/example/spa/react/index.ejs +++ b/src/analytics/example/spa/react/index.ejs @@ -26,7 +26,7 @@
diff --git a/src/analytics/example/spa/vue/index.ejs b/src/analytics/example/spa/vue/index.ejs index 275587d0df..e790e6458b 100644 --- a/src/analytics/example/spa/vue/index.ejs +++ b/src/analytics/example/spa/vue/index.ejs @@ -10,7 +10,7 @@
diff --git a/src/component/display/deprecated/example/index.ejs b/src/component/display/deprecated/example/index.ejs index 6230e81ad1..dbb0a8f6c6 100644 --- a/src/component/display/deprecated/example/index.ejs +++ b/src/component/display/deprecated/example/index.ejs @@ -28,7 +28,7 @@ let dataFooter = { id: uniqueId('footer'), brand: { logo: { - title: 'république
française', + title: 'républiquefrançaise', }, }, content: { diff --git a/src/component/display/example/index.ejs b/src/component/display/example/index.ejs index 7eba44d526..77ee96c05b 100644 --- a/src/component/display/example/index.ejs +++ b/src/component/display/example/index.ejs @@ -28,7 +28,7 @@ let dataFooter = { id: uniqueId('footer'), brand: { logo: { - title: 'république
française', + title: 'républiquefrançaise', }, }, content: { diff --git a/src/component/follow/deprecated/example/sample/data.ejs b/src/component/follow/deprecated/example/sample/data.ejs index 7ee2d3b52a..31b5c23e0a 100755 --- a/src/component/follow/deprecated/example/sample/data.ejs +++ b/src/component/follow/deprecated/example/sample/data.ejs @@ -1,6 +1,6 @@ <% let data = {}; data.socials = { - title: "Suivez-nous
sur les réseaux sociaux", + title: "Suivez-nous
sur les réseaux sociaux", networks: [ { label: "facebook", diff --git a/src/component/follow/example/data/socials.json.ejs b/src/component/follow/example/data/socials.json.ejs index f8940bddc6..c911bf8934 100644 --- a/src/component/follow/example/data/socials.json.ejs +++ b/src/component/follow/example/data/socials.json.ejs @@ -1,6 +1,6 @@ <% let data = {}; data.socials = { - title: "Suivez-nous
sur les réseaux sociaux", + title: "Suivez-nous
sur les réseaux sociaux", buttons: [ { label: "Facebook", diff --git a/src/component/header/deprecated/example/sample/header.ejs b/src/component/header/deprecated/example/sample/header.ejs index 0595675d26..d00eb6e65e 100755 --- a/src/component/header/deprecated/example/sample/header.ejs +++ b/src/component/header/deprecated/example/sample/header.ejs @@ -6,7 +6,7 @@ const data = {body: {}, menu: menu}; let hasNavbar = false; let hasMenu = false; -const brand = { logo: header.logo || {title: 'Intitulé
officiel'} }; +const brand = { logo: header.logo || {title: 'Intituléofficiel'} }; data.body.brand = brand; if (header.operator !== undefined) { diff --git a/src/component/header/example/index.ejs b/src/component/header/example/index.ejs index de6437e46f..120b707ed1 100755 --- a/src/component/header/example/index.ejs +++ b/src/component/header/example/index.ejs @@ -8,38 +8,38 @@ } -<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service: true }}, true, './layout'); %> +<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, service: true }}, true, './layout'); %> -<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links: { buttons: [{ url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}] }, service: true}}, true, './layout'); %> +<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, links: { buttons: [{ url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}] }, service: true}}, true, './layout'); %> -<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, service: true}}, true, './layout'); %> +<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, links:true, service: true}}, true, './layout'); %> -<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> +<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> -<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout'); %> +<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout'); %> -<%- sample('Header avec selecteur de langues et raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout'); %> +<%- sample('Header avec selecteur de langues et raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout'); %> -<%- sample('Header avec selecteur de langues et paramètre d\'affichage', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:{ buttons: [{ label: 'Paramètres d\'affichage', classes: [`${prefix}-icon-theme-fill`, `${prefix}-btn--icon-left`], attributes: {'aria-controls': `${prefix}-theme-modal`, 'data-fr-opened': false}}, { url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}]}, navigation: true, translate: true, display: true, service: true}}, true, './layout'); %> +<%- sample('Header avec selecteur de langues et paramètre d\'affichage', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, links:{ buttons: [{ label: 'Paramètres d\'affichage', classes: [`${prefix}-icon-theme-fill`, `${prefix}-btn--icon-left`], attributes: {'aria-controls': `${prefix}-theme-modal`, 'data-fr-opened': false}}, { url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}]}, navigation: true, translate: true, display: true, service: true}}, true, './layout'); %> -<%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministère
de l’europe
et des affaires
étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministèrede l’europeet des affairesétrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header avec nom de service, recherche', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service: 'title', search: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header avec nom de service, recherche', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, service: 'title', search: true, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header avec logo opérateur vertical, recherche', './sample/header.ejs', {header: { logo:{ title: 'République
Française'}, operator: imgData('img/placeholder.3x4.png', 'rendered', null, null, 'max-width:3.5rem;'), search: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header avec logo opérateur vertical, recherche', './sample/header.ejs', {header: { logo:{ title: 'RépubliqueFrançaise'}, operator: imgData('img/placeholder.3x4.png', 'rendered', null, null, 'max-width:3.5rem;'), search: true, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header avec logo opérateur horizontal, nom de service, lien d’accès, recherche', './sample/header.ejs', {header: { logo:{ title: 'République
Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), service: true, links:true, search: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header avec logo opérateur horizontal, nom de service, lien d’accès, recherche', './sample/header.ejs', {header: { logo:{ title: 'RépubliqueFrançaise'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), service: true, links:true, search: true, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header avec raccourcis dupliqués, pour Angular, React et Vue', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, duplicateLinks: true }}, true, './layout'); %> +<%- sample('Header avec raccourcis dupliqués, pour Angular, React et Vue', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, links:true, duplicateLinks: true }}, true, './layout'); %> -<%- sample('Header avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header logo opérateur + bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header logo opérateur + bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:8rem;'), beta: true, service: true, links:true, search: true, navigation: 'min' }}, true, './layout'); %> -<%- sample('Header min avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, beta: true, navigation: 'min' }}, true, './layout'); %> +<%- sample('Header min avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, beta: true, navigation: 'min' }}, true, './layout'); %> <%- deprecation(); %> -<%- sample('Header déprécié', '../deprecated/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> +<%- sample('Header déprécié', '../deprecated/example/sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> diff --git a/src/component/logo/example/index.ejs b/src/component/logo/example/index.ejs index bdcd4aa5e8..b41b220448 100755 --- a/src/component/logo/example/index.ejs +++ b/src/component/logo/example/index.ejs @@ -1,10 +1,10 @@ <% const sample = getSample(include); %> -<%- sample('Logo MD (par défaut)', './sample/logo.ejs', {logo: {title: 'Intitulé
officiel'}}, true); %> +<%- sample('Logo MD (par défaut)', './sample/logo.ejs', {logo: {title: 'Intituléofficiel'}}, true); %> -<%- sample('Logo SM', './sample/logo.ejs', {logo: {size: 'sm', title: 'Intitulé
officiel'}, }, true); %> +<%- sample('Logo SM', './sample/logo.ejs', {logo: {size: 'sm', title: 'Intituléofficiel'}, }, true); %> -<%- sample('Logo LG', './sample/logo.ejs', {logo: {size: 'lg', title: 'Intitulé
officiel'}}, true); %> +<%- sample('Logo LG', './sample/logo.ejs', {logo: {size: 'lg', title: 'Intituléofficiel'}}, true); %> <%- sample('Exemple logo long', './sample/logo-ecology.ejs', {}, true); %> diff --git a/src/component/logo/example/sample/logo-diplomacy.ejs b/src/component/logo/example/sample/logo-diplomacy.ejs index 7521c07e3a..f9c92302a1 100755 --- a/src/component/logo/example/sample/logo-diplomacy.ejs +++ b/src/component/logo/example/sample/logo-diplomacy.ejs @@ -1 +1 @@ -<%- include('./logo', {logo: { title: 'Ministère
de l’europe
et des affaires
étrangères'}});%> \ No newline at end of file +<%- include('./logo', {logo: { title: 'Ministèrede l’europeet des affairesétrangères'}});%> \ No newline at end of file diff --git a/src/component/logo/example/sample/logo-ecology.ejs b/src/component/logo/example/sample/logo-ecology.ejs index bb9d659a0a..f34a9ab0f7 100755 --- a/src/component/logo/example/sample/logo-ecology.ejs +++ b/src/component/logo/example/sample/logo-ecology.ejs @@ -1 +1 @@ -<%- include('./logo', {logo: { title: 'Ministère
de la transition
écologique
et solidaire'}});%> \ No newline at end of file +<%- include('./logo', {logo: { title: 'Ministèrede la transitionécologiqueet solidaire'}});%> \ No newline at end of file diff --git a/src/component/logo/example/sample/logo-egality.ejs b/src/component/logo/example/sample/logo-egality.ejs index b028b349af..dfdb65459e 100755 --- a/src/component/logo/example/sample/logo-egality.ejs +++ b/src/component/logo/example/sample/logo-egality.ejs @@ -1 +1 @@ -<%- include('./logo', {logo: { title: 'Secrétaire d’État
chargé(e) de
l’égalité entre les
femmes et les
hommes et de la
lutte contre les
discriminations'} });%> \ No newline at end of file +<%- include('./logo', {logo: { title: 'Secrétaire d’Étatchargé(e) del’égalité entre lesfemmes et leshommes et de lalutte contre lesdiscriminations'} });%> \ No newline at end of file diff --git a/src/component/skiplink/example/prepend.ejs b/src/component/skiplink/example/prepend.ejs index 2c63c0828a..d70851b5b6 100755 --- a/src/component/skiplink/example/prepend.ejs +++ b/src/component/skiplink/example/prepend.ejs @@ -1,2 +1,2 @@ <%- include('./sample/skiplinks'); %> -<%- include('../../header/example/sample/header.ejs', { header : { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, search: { modalId: 'header-search', input: {placeholder: 'Rechercher', label:'Rechercher'}, button: {id: uniqueId('search-btn'), label: 'Rechercher', title: 'Rechercher', modalId: 'header-search'}}, navigation: true, menu: { modalId: 'header-navigation' }}}); %> +<%- include('../../header/example/sample/header.ejs', { header : { logo:{ title: 'Intituléofficiel'}, service:true, links:true, search: true, search: { modalId: 'header-search', input: {placeholder: 'Rechercher', label:'Rechercher'}, button: {id: uniqueId('search-btn'), label: 'Rechercher', title: 'Rechercher', modalId: 'header-search'}}, navigation: true, menu: { modalId: 'header-navigation' }}}); %> diff --git a/src/page/example/layout.ejs b/src/page/example/layout.ejs index c1284a79e0..f4dae61d7d 100644 --- a/src/page/example/layout.ejs +++ b/src/page/example/layout.ejs @@ -6,7 +6,7 @@ const search = locals.search || false;

<%= title %>

<% } %>
- <%- include('../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: search, navigation: true }}, true); %> + <%- include('../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intituléofficiel'}, service:true, links:true, search: search, navigation: true }}, true); %> <% if (locals.breadcrumb !== false) { %> <% const breadcrumb = { diff --git a/tool/example/decorator.ejs b/tool/example/decorator.ejs index 211dbd5ac2..de5b30b6df 100644 --- a/tool/example/decorator.ejs +++ b/tool/example/decorator.ejs @@ -106,9 +106,9 @@ locals.imgAltText = 'texte alternatif de l’image'; const brandData = (component = 'header', logo = true, service = false, operator = false, beta = false, href = '/') => { const data = {}; const logoPlaceholder = 'Nom de l’entité (ministère, secrétariat d‘état, gouvernement)'; - const logoTitlePlaceholder = 'Intitulé
officiel'; + const logoTitlePlaceholder = 'Intituléofficiel'; const logoPlaceholderOperator = 'République Française'; - const logoTitlePlaceholderOperator = 'République
Française'; + const logoTitlePlaceholderOperator = 'RépubliqueFrançaise'; const operatorPlaceholder = imgAltText + ' : nom de l\'opérateur ou du site serviciel'; const servicePlaceholder = { title: 'Nom du site / service',