fix(navigation): keep menu icon glyphs out of the links' accessible names

Font Awesome 6 paints each icon through ::before with a private-use
character, and the menu's <i> elements carried no aria-hidden, so every
menu link's accessible name began with that glyph: the Login link was
announced as " Login". Screen readers read the glyph, and exact
name matches such as Playwright's getByRole("link", { name: /^login$/i })
never found the link, which left infinito-nexus's post-login check that
the Login control is gone passing without ever looking at it.

The icons of the navigation macro and of the language menu are now
aria-hidden, as Font Awesome recommends for decorative icons. A unit
test holds every icon of the rendered header to it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-10 16:03:08 +02:00
parent d115fc99b2
commit e00ff9437c
2 changed files with 35 additions and 18 deletions

View File

@@ -1,5 +1,5 @@
{% macro render_icon_and_name(item) %}
<i class="{{ item.icon.class if item.icon is defined and item.icon.class is defined else 'fa-solid fa-link' }}"></i>
<i class="{{ item.icon.class if item.icon is defined and item.icon.class is defined else 'fa-solid fa-link' }}" aria-hidden="true"></i>
{% if item.name is defined %}
{{ item.name }}
{% else %}
@@ -101,7 +101,7 @@
{% if menu_type == "header" %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdownLanguage" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false" title="{{ t('Language') }}">
<i class="fa-solid fa-language"></i> {{ languages[lang] }}
<i class="fa-solid fa-language" aria-hidden="true"></i> {{ languages[lang] }}
</a>
<ul class="dropdown-menu language-menu">
{% for code, endonym in languages.items() %}