From 37a7f7aaeb8a821281c9319f9d24e9b77f0ccbd9 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Fri, 12 Dec 2025 12:01:38 +0100
Subject: [PATCH 1/8] Remove aria-hidden="true" from .nav-header

The aria-hidden="true" attribute was hidding the whole main navigation menu for screen readers, making it inaccessible for blind and visually impaired users.

In mobile view, the menu was accessible thanks to .nav-main-mobile, which is hidden with display:none in desktop view (making it also hidden for screen readers).
---
 assets/components/organisms/header/header.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/components/organisms/header/header.twig b/assets/components/organisms/header/header.twig
index 4dab6bca..b63833f6 100644
--- a/assets/components/organisms/header/header.twig
+++ b/assets/components/organisms/header/header.twig
@@ -6,7 +6,7 @@
   <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">
+  <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' %}

From 6fb8a50b10249847e749478a00e7666164a77984 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Fri, 12 Dec 2025 12:10:23 +0100
Subject: [PATCH 2/8] Wrap main navigation menu inside a <nav> tag

---
 .../components/organisms/header/header.twig   | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/assets/components/organisms/header/header.twig b/assets/components/organisms/header/header.twig
index b63833f6..bb8644a3 100644
--- a/assets/components/organisms/header/header.twig
+++ b/assets/components/organisms/header/header.twig
@@ -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 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 %}

From 66a58c787193d8f91b7ac2d8f41447985237f015 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Fri, 12 Dec 2025 12:18:03 +0100
Subject: [PATCH 3/8] Use <button> instead of <a> for the search toggle button

---
 .../components/molecules/search/search-mobile.twig |  4 ++--
 assets/components/molecules/search/search.scss     | 14 ++++++++++++++
 assets/components/molecules/search/search.twig     |  4 ++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/assets/components/molecules/search/search-mobile.twig b/assets/components/molecules/search/search-mobile.twig
index 217baef1..65f46873 100644
--- a/assets/components/molecules/search/search-mobile.twig
+++ b/assets/components/molecules/search/search-mobile.twig
@@ -1,7 +1,7 @@
 {% 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" href="#">
     {% 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>
@@ -9,7 +9,7 @@
     {% 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">
diff --git a/assets/components/molecules/search/search.scss b/assets/components/molecules/search/search.scss
index 512aca84..4f801550 100644
--- a/assets/components/molecules/search/search.scss
+++ b/assets/components/molecules/search/search.scss
@@ -5,6 +5,7 @@
 
   .dropdown-toggle {
     padding: $spacer;
+
     &:after {
       display: none;
     }
@@ -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 {
diff --git a/assets/components/molecules/search/search.twig b/assets/components/molecules/search/search.twig
index da895842..fdf558e9 100644
--- a/assets/components/molecules/search/search.twig
+++ b/assets/components/molecules/search/search.twig
@@ -1,9 +1,9 @@
 {% 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">
     {% include "@atoms/icon/icon.twig" with { icon: 'icon-search' } %}
-  </a>
+  </button>
   <form action="#" class="dropdown-menu border-0 p-0">
     <div class="search-form mt-1 input-group">
       {% if language == 'fr' %}

From a20fcbe49f6907a7640bfe04261831272a6f5979 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Fri, 12 Dec 2025 12:24:11 +0100
Subject: [PATCH 4/8] Wrap language selector with a <div> instead of a <nav>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The <nav> element is meant to be used for navigation links, such as menus, breadcrumbs, tables of contents…
---
 assets/components/atoms/list/list.scss               | 1 +
 assets/components/atoms/nav-lang/nav-lang-short.twig | 4 ++--
 assets/components/atoms/nav-lang/nav-lang.twig       | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/assets/components/atoms/list/list.scss b/assets/components/atoms/list/list.scss
index 06f79338..15eca3c9 100644
--- a/assets/components/atoms/list/list.scss
+++ b/assets/components/atoms/list/list.scss
@@ -107,6 +107,7 @@ ol {
 .list-unstyled,
 .list-inline,
 .nav,
+.nav-lang,
 nav {
 
   li {
diff --git a/assets/components/atoms/nav-lang/nav-lang-short.twig b/assets/components/atoms/nav-lang/nav-lang-short.twig
index 36ec8c69..374e3687 100644
--- a/assets/components/atoms/nav-lang/nav-lang-short.twig
+++ b/assets/components/atoms/nav-lang/nav-lang-short.twig
@@ -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>
@@ -27,4 +27,4 @@
       </li>
     {% endif %}
   </ul>
-</nav>
+</div>
diff --git a/assets/components/atoms/nav-lang/nav-lang.twig b/assets/components/atoms/nav-lang/nav-lang.twig
index 8d487c2e..fb722214 100644
--- a/assets/components/atoms/nav-lang/nav-lang.twig
+++ b/assets/components/atoms/nav-lang/nav-lang.twig
@@ -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>
@@ -26,4 +26,4 @@
       </a>
     </li>
   </ul>
-</nav>
+</div>

From 7007c188d35bc41f6b18f03d9c9e9128e3844350 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Mon, 15 Dec 2025 15:32:04 +0100
Subject: [PATCH 5/8] Add ARIA attributes to mobile nav button

---
 .../atoms/nav-toggle-mobile/nav-toggle-mobile.twig           | 2 +-
 assets/components/organisms/nav-main/nav-main.js             | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
index b1ae40ca..1934c424 100644
--- a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
+++ b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig
@@ -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>
diff --git a/assets/components/organisms/nav-main/nav-main.js b/assets/components/organisms/nav-main/nav-main.js
index 5e1bbef5..3e98de26 100644
--- a/assets/components/organisms/nav-main/nav-main.js
+++ b/assets/components/organisms/nav-main/nav-main.js
@@ -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.

From dcc92e3546f7645f764ade1d7a11fb29fdc584a1 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Tue, 16 Dec 2025 14:20:47 +0100
Subject: [PATCH 6/8] Remove attribute href from mobile search toggle button

---
 assets/components/molecules/search/search-mobile.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/components/molecules/search/search-mobile.twig b/assets/components/molecules/search/search-mobile.twig
index 65f46873..8812d3a0 100644
--- a/assets/components/molecules/search/search-mobile.twig
+++ b/assets/components/molecules/search/search-mobile.twig
@@ -1,7 +1,7 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
 
 <form action="#" class="d-xl-none">
-  <button id="search-mobile-toggle" class="search-mobile-toggle searchform-controller" href="#">
+  <button id="search-mobile-toggle" class="search-mobile-toggle searchform-controller">
     {% 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>

From 0790bde1a681f3a9c95dfd358ca5ca98a9fa2773 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Tue, 16 Dec 2025 14:23:28 +0100
Subject: [PATCH 7/8] Add sr-only accessible name to search toggle button

---
 assets/components/molecules/search/search.twig | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/assets/components/molecules/search/search.twig b/assets/components/molecules/search/search.twig
index fdf558e9..c8c9aeca 100644
--- a/assets/components/molecules/search/search.twig
+++ b/assets/components/molecules/search/search.twig
@@ -3,6 +3,12 @@
 <div class="dropdown dropright search d-none d-xl-block">
   <button class="dropdown-toggle" href="#" data-toggle="dropdown">
     {% include "@atoms/icon/icon.twig" with { icon: 'icon-search' } %}
+    {% 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">

From 2f7182cc30607aeb59e650eef7037d492cdcbee7 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Tue, 16 Dec 2025 14:32:30 +0100
Subject: [PATCH 8/8] Fix .nav-header and .navigation positioning

---
 assets/components/organisms/header/header.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/assets/components/organisms/header/header.scss b/assets/components/organisms/header/header.scss
index df9c76fe..5463a509 100644
--- a/assets/components/organisms/header/header.scss
+++ b/assets/components/organisms/header/header.scss
@@ -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;