Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♿️fix(logo): évite les arrêts de vocalisation de lecteurs d'écrans #903

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

♿️fix(logo): évite les arrêts de vocalisation de lecteurs d'écrans #903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/analytics/example/component/header/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container" >
<%- sample('En-tête', '../../../../component/header/example/sample/header.ejs', {header: { id: uniqueId('header'), logo:{ title: 'République<br>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épublique<br role="presentation">Française'}, operator: imgData('img/placeholder.16x9.png', 'rendered', null, null, 'max-width:9.0625rem;'), service: true, links:true, search: true, navigation: 'min' }}); %>
</div>
2 changes: 1 addition & 1 deletion src/analytics/example/spa/agnostic/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="<%= prefix %>-header__logo">
<p class="<%= prefix %>-logo">
République
<br>Française
<br role="presentation">Française
</p>
</div>
<div class="<%= prefix %>-header__operator">
Expand Down
2 changes: 1 addition & 1 deletion src/analytics/example/spa/angular/_index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ app.config(function($routeProvider) {
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République <br/>
République <br role="presentation" />
Française
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/analytics/example/spa/react/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République <br/>
République <br role="presentation" />
Française
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/analytics/example/spa/vue/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="<%= prefix %>-header__logo">
<p class="<%= prefix %>-logo">
République
<br>Française
<br role="presentation">Française
</p>
</div>
<div class="<%= prefix %>-header__operator">
Expand Down
2 changes: 1 addition & 1 deletion src/component/display/deprecated/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ let dataFooter = {
id: uniqueId('footer'),
brand: {
logo: {
title: 'république<br>française',
title: 'république<br role="presentation">française',
},
},
content: {
Expand Down
2 changes: 1 addition & 1 deletion src/component/display/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ let dataFooter = {
id: uniqueId('footer'),
brand: {
logo: {
title: 'république<br>française',
title: 'république<br role="presentation">française',
},
},
content: {
Expand Down
2 changes: 1 addition & 1 deletion src/component/follow/deprecated/example/sample/data.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<% let data = {};
data.socials = {
title: "Suivez-nous<br> sur les réseaux sociaux",
title: "Suivez-nous<br role=\"presentation\"> sur les réseaux sociaux",
networks: [
{
label: "facebook",
Expand Down
2 changes: 1 addition & 1 deletion src/component/follow/example/data/socials.json.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<% let data = {};
data.socials = {
title: "Suivez-nous<br> sur les réseaux sociaux",
title: "Suivez-nous<br role=\"presentation\"> sur les réseaux sociaux",
buttons: [
{
label: "Facebook",
Expand Down
2 changes: 1 addition & 1 deletion src/component/header/deprecated/example/sample/header.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const data = {body: {}, menu: menu};
let hasNavbar = false;
let hasMenu = false;

const brand = { logo: header.logo || {title: 'Intitulé<br>officiel'} };
const brand = { logo: header.logo || {title: 'Intitulé<br role="presentation">officiel'} };
data.body.brand = brand;

if (header.operator !== undefined) {
Expand Down
34 changes: 17 additions & 17 deletions src/component/header/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,38 @@
}
</style>

<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, navigation: 'min' }}, true, './layout'); %>
<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">officiel'}, navigation: 'min' }}, true, './layout'); %>

<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service: true }}, true, './layout'); %>
<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">officiel'}, service: true }}, true, './layout'); %>

<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>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é<br role="presentation">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é<br>officiel'}, links:true, service: true}}, true, './layout'); %>
<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">officiel'}, links:true, service: true}}, true, './layout'); %>

<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %>
<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %>

<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout'); %>
<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">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é<br>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é<br role="presentation">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é<br>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é<br role="presentation">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<br>de l’europe<br>et des affaires<br>é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ère<br role="presentation">de l’europe<br role="presentation">et des affaires<br role="presentation">étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout'); %>

<%- sample('Header avec nom de service, recherche', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service: 'title', search: true, navigation: 'min' }}, true, './layout'); %>
<%- sample('Header avec nom de service, recherche', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">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<br>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épublique<br role="presentation">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 horizontal, nom de service, lien d’accès, recherche', './sample/header.ejs', {header: { logo:{ title: 'République<br>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épublique<br role="presentation">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 raccourcis dupliqués, pour Angular, React et Vue', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>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é<br role="presentation">officiel'}, links:true, duplicateLinks: true }}, true, './layout'); %>

<%- sample('Header avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>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é<br role="presentation">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é<br>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é<br role="presentation">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é<br>officiel'}, beta: true, navigation: 'min' }}, true, './layout'); %>
<%- sample('Header min avec bandeau BETA', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">officiel'}, beta: true, navigation: 'min' }}, true, './layout'); %>

<%- deprecation(); %>

<%- sample('Header déprécié', '../deprecated/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>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é<br role="presentation">officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %>
6 changes: 3 additions & 3 deletions src/component/logo/example/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<% const sample = getSample(include); %>

<%- sample('Logo MD (par défaut)', './sample/logo.ejs', {logo: {title: 'Intitulé<br>officiel'}}, true); %>
<%- sample('Logo MD (par défaut)', './sample/logo.ejs', {logo: {title: 'Intitulé<br role="presentation">officiel'}}, true); %>

<%- sample('Logo SM', './sample/logo.ejs', {logo: {size: 'sm', title: 'Intitulé<br>officiel'}, }, true); %>
<%- sample('Logo SM', './sample/logo.ejs', {logo: {size: 'sm', title: 'Intitulé<br role="presentation">officiel'}, }, true); %>

<%- sample('Logo LG', './sample/logo.ejs', {logo: {size: 'lg', title: 'Intitulé<br>officiel'}}, true); %>
<%- sample('Logo LG', './sample/logo.ejs', {logo: {size: 'lg', title: 'Intitulé<br role="presentation">officiel'}}, true); %>

<%- sample('Exemple logo long', './sample/logo-ecology.ejs', {}, true); %>

Expand Down
2 changes: 1 addition & 1 deletion src/component/logo/example/sample/logo-diplomacy.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<%- include('./logo', {logo: { title: 'Ministère<br>de l’europe<br>et des affaires<br>étrangères'}});%>
<%- include('./logo', {logo: { title: 'Ministère<br role="presentation">de l’europe<br role="presentation">et des affaires<br role="presentation">étrangères'}});%>
2 changes: 1 addition & 1 deletion src/component/logo/example/sample/logo-ecology.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<%- include('./logo', {logo: { title: 'Ministère<br>de la transition<br>écologique<br>et solidaire'}});%>
<%- include('./logo', {logo: { title: 'Ministère<br role="presentation">de la transition<br role="presentation">écologique<br role="presentation">et solidaire'}});%>
2 changes: 1 addition & 1 deletion src/component/logo/example/sample/logo-egality.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<%- include('./logo', {logo: { title: 'Secrétaire d’État<br>chargé(e) de<br>l’égalité entre les<br>femmes et les<br>hommes et de la<br>lutte contre les<br>discriminations'} });%>
<%- include('./logo', {logo: { title: 'Secrétaire d’État<br role="presentation">chargé(e) de<br role="presentation">l’égalité entre les<br role="presentation">femmes et les<br role="presentation">hommes et de la<br role="presentation">lutte contre les<br role="presentation">discriminations'} });%>
2 changes: 1 addition & 1 deletion src/component/skiplink/example/prepend.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<%- include('./sample/skiplinks'); %>
<%- include('../../header/example/sample/header.ejs', { header : { logo:{ title: 'Intitulé<br>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é<br role="presentation">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' }}}); %>
2 changes: 1 addition & 1 deletion src/page/example/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const search = locals.search || false;
<h4><%= title %></h4>
<% } %>
<div class="<%= prefix %>-mb-6v" >
<%- include('../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: search, navigation: true }}, true); %>
<%- include('../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé<br role="presentation">officiel'}, service:true, links:true, search: search, navigation: true }}, true); %>

<% if (locals.breadcrumb !== false) { %>
<% const breadcrumb = {
Expand Down
4 changes: 2 additions & 2 deletions tool/example/decorator.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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é<br>officiel';
const logoTitlePlaceholder = 'Intitulé<br role="presentation">officiel';
const logoPlaceholderOperator = 'République Française';
const logoTitlePlaceholderOperator = 'République<br>Française';
const logoTitlePlaceholderOperator = 'République<br role="presentation">Française';
const operatorPlaceholder = imgAltText + ' : nom de l\'opérateur ou du site serviciel';
const servicePlaceholder = {
title: 'Nom du site / service',
Expand Down