From e00ff9437c520350b085dd3559fa0a004531da1a Mon Sep 17 00:00:00 2001 From: Kevin Veen-Birkenbach Date: Thu, 10 Sep 2026 16:03:08 +0200 Subject: [PATCH] fix(navigation): keep menu icon glyphs out of the links' accessible names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Font Awesome 6 paints each icon through ::before with a private-use character, and the menu's 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) --- app/templates/moduls/navigation.html.j2 | 4 +- tests/unit/test_navigation_template.py | 49 +++++++++++++++++-------- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/app/templates/moduls/navigation.html.j2 b/app/templates/moduls/navigation.html.j2 index f215126..4b2ffd6 100644 --- a/app/templates/moduls/navigation.html.j2 +++ b/app/templates/moduls/navigation.html.j2 @@ -1,5 +1,5 @@ {% macro render_icon_and_name(item) %} - + {% if item.name is defined %} {{ item.name }} {% else %} @@ -101,7 +101,7 @@ {% if menu_type == "header" %}
    • {% for code, endonym in languages.items() %} diff --git a/tests/unit/test_navigation_template.py b/tests/unit/test_navigation_template.py index 2835240..de0a181 100644 --- a/tests/unit/test_navigation_template.py +++ b/tests/unit/test_navigation_template.py @@ -9,14 +9,46 @@ class AnchorCollector(HTMLParser): def __init__(self): super().__init__() self.anchors = [] + self.icons = [] def handle_starttag(self, tag, attrs): if tag == "a": self.anchors.append(dict(attrs)) + if tag == "i": + self.icons.append(dict(attrs)) class TestNavigationTemplate(unittest.TestCase): def test_top_level_dropdowns_have_bootstrap_toggle_attribute(self): + parser = self._render_header() + dropdown_toggles = [ + anchor + for anchor in parser.anchors + if "nav-link" in anchor.get("class", "") + and "dropdown-toggle" in anchor.get("class", "") + ] + + self.assertEqual(len(dropdown_toggles), 2) + for toggle in dropdown_toggles: + self.assertEqual(toggle.get("data-bs-toggle"), "dropdown") + + language_links = [ + anchor for anchor in parser.anchors if anchor.get("hreflang") == "de" + ] + self.assertEqual(len(language_links), 1) + self.assertEqual(language_links[0]["href"], "/de/") + + def test_menu_icons_stay_out_of_the_accessible_name(self): + parser = self._render_header() + + self.assertTrue(parser.icons) + self.assertEqual( + [icon for icon in parser.icons if icon.get("aria-hidden") != "true"], + [], + "a Font Awesome glyph without aria-hidden joins the link's accessible name", + ) + + def _render_header(self): template_dir = Path(__file__).resolve().parents[2] / "app" / "templates" environment = Environment( loader=FileSystemLoader(template_dir), @@ -68,22 +100,7 @@ class TestNavigationTemplate(unittest.TestCase): parser = AnchorCollector() parser.feed(rendered) - dropdown_toggles = [ - anchor - for anchor in parser.anchors - if "nav-link" in anchor.get("class", "") - and "dropdown-toggle" in anchor.get("class", "") - ] - - self.assertEqual(len(dropdown_toggles), 2) - for toggle in dropdown_toggles: - self.assertEqual(toggle.get("data-bs-toggle"), "dropdown") - - language_links = [ - anchor for anchor in parser.anchors if anchor.get("hreflang") == "de" - ] - self.assertEqual(len(language_links), 1) - self.assertEqual(language_links[0]["href"], "/de/") + return parser if __name__ == "__main__":