Skip to content

Amélioration de l'accessibilité du header #809

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

Open
alinekeller wants to merge 9 commits into
base: dev
Choose a base branch
from
Open

Amélioration de l'accessibilité du header #809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
37a7f7a
Remove aria-hidden="true" from .nav-header
alinekeller Dec 12, 2025
6fb8a50
Wrap main navigation menu inside a <nav> tag
alinekeller Dec 12, 2025
66a58c7
Use <button> instead of <a> for the search toggle button
alinekeller Dec 12, 2025
a20fcbe
Wrap language selector with a <div> instead of a <nav>
alinekeller Dec 12, 2025
7007c18
Add ARIA attributes to mobile nav button
alinekeller Dec 15, 2025
dcc92e3
Remove attribute href from mobile search toggle button
alinekeller Dec 16, 2025
0790bde
Add sr-only accessible name to search toggle button
alinekeller Dec 16, 2025
2f7182c
Fix .nav-header and .navigation positioning
alinekeller Dec 16, 2025
55d0a31
Merge branch 'dev' into styleguide/header-a11y
williambelle Dec 19, 2025
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
1 change: 1 addition & 0 deletions assets/components/atoms/list/list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ ol {
.list-unstyled,
.list-inline,
.nav,
.nav-lang,
nav:not(.table-of-contents) {

li {
Expand Down
4 changes: 2 additions & 2 deletions assets/components/atoms/nav-lang/nav-lang-short.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<nav class="nav-lang nav-lang-short ml-auto">
<div class="nav-lang nav-lang-short ml-auto">
<ul>
{% if language == 'fr' %}
<li>
Expand All @@ -27,4 +27,4 @@
</li>
{% endif %}
</ul>
</nav>
</div>
4 changes: 2 additions & 2 deletions assets/components/atoms/nav-lang/nav-lang.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="nav-lang ml-auto dropdown" aria-label="Change language">
<div class="nav-lang ml-auto dropdown" aria-label="Change language">
<button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
{% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
<span>FR</span>
Expand Down Expand Up @@ -26,4 +26,4 @@
</a>
</li>
</ul>
</nav>
</div>
2 changes: 1 addition & 1 deletion assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<button class="btn btn-secondary nav-toggle-mobile d-xl-none">
<button class="btn btn-secondary nav-toggle-mobile d-xl-none" aria-haspopup="true" aria-expanded="false" aria-controls="main-navigation">
<span class="label">Menu</span>
<div class="hamburger">
<span></span>
Expand Down
4 changes: 2 additions & 2 deletions assets/components/molecules/search/search-mobile.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<form action="#" class="d-xl-none">
<a id="search-mobile-toggle" class="search-mobile-toggle searchform-controller" href="#">
<button id="search-mobile-toggle" class="search-mobile-toggle searchform-controller">
Copy link
Member

@williambelle williambelle Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En l'état, le type button va soumettre le formulaire (au lieu d'afficher la barre de recherche).

{% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
{% if language == 'fr' %}
<span class="toggle-label sr-only">Afficher / masquer le formulaire de recherche</span>
{% endif %}
{% if language == 'en' %}
<span class="toggle-label sr-only">Show / hide the search form</span>
{% endif %}
</a>
</button>
<div class="input-group search-mobile" role="search">
<div class="input-group-prepend">
<span class="input-group-text">
Expand Down
14 changes: 14 additions & 0 deletions assets/components/molecules/search/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.dropdown-toggle {
padding: $spacer;

&:after {
display: none;
}
Expand All @@ -23,6 +24,19 @@
}
}

.search button.dropdown-toggle,
button.search-mobile-toggle {
background: transparent;
border: 0;
transition:
text-decoration-color 0.2s ease-in-out,
color 0.2s ease-in-out;

&:hover {
color: $red;
}
}

.search-mobile-toggle {

.icon {
Expand Down
10 changes: 8 additions & 2 deletions assets/components/molecules/search/search.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
{% if language is not defined %}{% set language = 'fr' %}{% endif %}

<div class="dropdown dropright search d-none d-xl-block">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<button class="dropdown-toggle" href="#" data-toggle="dropdown">
Copy link
Member

@williambelle williambelle Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Est-ce que le href est nécessaire ?

{% include "@atoms/icon/icon.twig" with { icon: 'icon-search' } %}
</a>
{% if language == 'fr' %}
<span class="sr-only">Afficher le formulaire de recherche</span>
{% endif %}
{% if language == 'en' %}
<span class="sr-only">Show search form</span>
{% endif %}
</button>
<form action="#" class="dropdown-menu border-0 p-0">
<div class="search-form mt-1 input-group">
{% if language == 'fr' %}
Expand Down
10 changes: 10 additions & 0 deletions assets/components/organisms/header/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,16 @@
.icon { font-size: 0.9em; }
}

nav.navigation {
flex: 0 0 auto;
margin: 0 0 0 (3.7 * $spacer);

.nav-header {
flex: none;
margin: 0;
}
}

@include media-breakpoint-down (lg) {
height: $header-height;
max-height: $header-height;
Expand Down
32 changes: 17 additions & 15 deletions assets/components/organisms/header/header.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,23 @@
<a class="logo" href="#">
<img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
</a>
<ul aria-hidden="true" class="nav-header d-none d-xl-flex">
{% for head in header %}
<li id="menu-item-{{ loop.index }}" {% if ( loop.index == 2 ) and ( showCurrentMenuItem|default(true) ) %} class="current-menu-item"{% endif %}>
{% if language == 'fr' %}
<a class="nav-item" href="{{ head.url_fr }}">{{ head.name_fr }}</a>
{% endif %}
{% if language == 'en' %}
<a class="nav-item" href="{{ head.url_en }}">{{ head.name_en }}</a>
{% endif %}
{% if language == 'de' %}
<a class="nav-item" href="{{ head.url_de }}">{{ head.name_de }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
<nav class="navigation" role="navigation" aria-label="Menu principal">
<ul class="nav-header d-none d-xl-flex">
{% for head in header %}
<li id="menu-item-{{ loop.index }}" {% if ( loop.index == 2 ) and ( showCurrentMenuItem|default(true) ) %} class="current-menu-item"{% endif %}>
{% if language == 'fr' %}
<a class="nav-item" href="{{ head.url_fr }}">{{ head.name_fr }}</a>
{% endif %}
{% if language == 'en' %}
<a class="nav-item" href="{{ head.url_en }}">{{ head.name_en }}</a>
{% endif %}
{% if language == 'de' %}
<a class="nav-item" href="{{ head.url_de }}">{{ head.name_de }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% include '@molecules/search/search.twig' %}
{% include '@molecules/search/search-mobile.twig' %}
{% if nav_user %}
Expand Down
5 changes: 5 additions & 0 deletions assets/components/organisms/nav-main/nav-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ const nav = () => {
}

$('body').toggleClass('mobile-menu-open');

// update aria-expanded attribute
$('.nav-toggle-mobile').attr('aria-expanded',
$('.nav-toggle-mobile').attr('aria-expanded') == 'false' ? 'true' : 'false'
);
};

// Open or close desktop toggle navigation, keeping its actual position.
Expand Down
Loading