2 Commits

Author SHA1 Message Date
d7149b83e9 Release version 2.1.1 2026-09-10 16:07:26 +02:00
e00ff9437c 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>
2026-09-10 16:03:21 +02:00
4 changed files with 41 additions and 19 deletions

View File

@@ -1,5 +1,10 @@
# Changelog # Changelog
## [2.1.1] - 2026-09-10
* Accessibility: header icons are *aria-hidden*, links read by label alone
* Test coverage: unit test requires *aria-hidden* on every header icon
## [2.1.0] - 2026-08-22 ## [2.1.0] - 2026-08-22
* Multilingual site: every ISO 639-1 language has its own URL, */* follows the visitor's browser language, and a switcher in the navbar lists all 184 in their own script * Multilingual site: every ISO 639-1 language has its own URL, */* follows the visitor's browser language, and a switcher in the navbar lists all 184 in their own script

View File

@@ -1,5 +1,5 @@
{% macro render_icon_and_name(item) %} {% 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 %} {% if item.name is defined %}
{{ item.name }} {{ item.name }}
{% else %} {% else %}
@@ -101,7 +101,7 @@
{% if menu_type == "header" %} {% if menu_type == "header" %}
<li class="nav-item dropdown"> <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') }}"> <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> </a>
<ul class="dropdown-menu language-menu"> <ul class="dropdown-menu language-menu">
{% for code, endonym in languages.items() %} {% for code, endonym in languages.items() %}

View File

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
[project] [project]
name = "portfolio-ui" name = "portfolio-ui"
version = "2.1.0" version = "2.1.1"
description = "A lightweight YAML-driven portfolio and landing-page generator." description = "A lightweight YAML-driven portfolio and landing-page generator."
readme = "README.md" readme = "README.md"
requires-python = ">=3.12" requires-python = ">=3.12"

View File

@@ -9,14 +9,46 @@ class AnchorCollector(HTMLParser):
def __init__(self): def __init__(self):
super().__init__() super().__init__()
self.anchors = [] self.anchors = []
self.icons = []
def handle_starttag(self, tag, attrs): def handle_starttag(self, tag, attrs):
if tag == "a": if tag == "a":
self.anchors.append(dict(attrs)) self.anchors.append(dict(attrs))
if tag == "i":
self.icons.append(dict(attrs))
class TestNavigationTemplate(unittest.TestCase): class TestNavigationTemplate(unittest.TestCase):
def test_top_level_dropdowns_have_bootstrap_toggle_attribute(self): 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" template_dir = Path(__file__).resolve().parents[2] / "app" / "templates"
environment = Environment( environment = Environment(
loader=FileSystemLoader(template_dir), loader=FileSystemLoader(template_dir),
@@ -68,22 +100,7 @@ class TestNavigationTemplate(unittest.TestCase):
parser = AnchorCollector() parser = AnchorCollector()
parser.feed(rendered) parser.feed(rendered)
dropdown_toggles = [ return parser
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/")
if __name__ == "__main__": if __name__ == "__main__":