From fa3e0703fade78d7649817d9c6a3798d52d44ac5 Mon Sep 17 00:00:00 2001 From: "nicolas T." Date: Wed, 11 Mar 2026 22:45:02 +0100 Subject: [PATCH 1/4] feat(a11y): add keyboard navigation for all features (story 3.5) - Add FR/EN language switcher buttons to base.html nav (trans() i18n) - Add Escape key handler and focus management to mobile.js filter panel - Fix compare.html: skip link, nav aria-label, main landmark, dynamic lang - Add lang_nav_label, lang_switch_fr, lang_switch_en i18n keys (EN+FR) - All axe-core checks pass (0 violations on 4 pages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- ...-5-keyboard-navigation-for-all-features.md | 174 ++++++++++++++++++ .../sprint-status.yaml | 141 ++++++++++++++ static/compare.html | 11 +- static/mobile.js | 18 +- templates/base.html | 10 + zola.toml | 6 + 6 files changed, 357 insertions(+), 3 deletions(-) create mode 100644 _bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md create mode 100644 _bmad-output/implementation-artifacts/sprint-status.yaml diff --git a/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md b/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md new file mode 100644 index 0000000..19a7d43 --- /dev/null +++ b/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md @@ -0,0 +1,174 @@ +# Story 3.5: Keyboard Navigation for All Features + +Status: review + +## Story + +As a **user with motor disabilities or keyboard preference**, +I want to navigate the entire site using only keyboard, +So that I can access all features without a mouse. + +## Acceptance Criteria + +1. **Tab order**: All links, buttons, and inputs are reachable via Tab/Shift+Tab in a logical order +2. **Activation**: All buttons and links are activatable with Enter; checkboxes with Space +3. **Filter panel keyboard**: Escape closes the filter panel; focus returns to the toggle button on close; focus moves to first filter on open (mobile) +4. **No keyboard traps**: User can always Tab away from any element +5. **No hover-only features**: All functionality accessible without mouse +6. **Language switcher**: Language switch UI buttons are present and keyboard-accessible in nav +7. **Comparison page (compare.html)**: Skip link present; `
diff --git a/zola.toml b/zola.toml index 33f239f..010ff86 100644 --- a/zola.toml +++ b/zola.toml @@ -44,6 +44,9 @@ add_to_comparison = "Add to Comparison" added_to_comparison = "✓ Added to Comparison" comparison_full = "Comparison Full" noscript_message = "All providers are visible below. Filtering and search features require JavaScript to be enabled." +lang_nav_label = "Language selection" +lang_switch_fr = "Switch to French" +lang_switch_en = "Switch to English" [languages.fr] title = "Cloud Landscape" @@ -75,6 +78,9 @@ add_to_comparison = "Ajouter à la comparaison" added_to_comparison = "✓ Ajouté à la comparaison" comparison_full = "Comparaison complète" noscript_message = "Tous les fournisseurs sont visibles ci-dessous. Les fonctionnalités de filtrage et de recherche nécessitent l'activation de JavaScript." +lang_nav_label = "Sélection de la langue" +lang_switch_fr = "Passer en français" +lang_switch_en = "Passer en anglais" [markdown] From 8a3628d1d02eb7edba4ddfee23ff30ff714aeade Mon Sep 17 00:00:00 2001 From: "nicolas T." Date: Wed, 11 Mar 2026 22:56:54 +0100 Subject: [PATCH 2/4] fix(a11y): address CR findings for story 3.5 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace aria-current with aria-pressed on language toggle buttons - Replace nested
+ diff --git a/static/lang.js b/static/lang.js index 2a1f18a..491a90b 100644 --- a/static/lang.js +++ b/static/lang.js @@ -72,21 +72,21 @@ const switcher = document.createElement('div'); switcher.className = 'language-switcher'; - switcher.setAttribute('role', 'navigation'); - switcher.setAttribute('aria-label', 'Language switcher'); + switcher.setAttribute('role', 'group'); + switcher.setAttribute('aria-label', 'Language selection'); switcher.innerHTML = ` - | + `; diff --git a/templates/base.html b/templates/base.html index 06f82c9..88dc7ea 100644 --- a/templates/base.html +++ b/templates/base.html @@ -49,19 +49,19 @@ Providers - + aria-label="{{ trans(key="lang_en_label", lang=lang) }}" + aria-pressed="{% if lang == 'en' %}true{% else %}false{% endif %}">EN + -
+
{% block content %}{% endblock %}
diff --git a/zola.toml b/zola.toml index 010ff86..8cc066e 100644 --- a/zola.toml +++ b/zola.toml @@ -47,6 +47,8 @@ noscript_message = "All providers are visible below. Filtering and search featur lang_nav_label = "Language selection" lang_switch_fr = "Switch to French" lang_switch_en = "Switch to English" +lang_fr_label = "Français" +lang_en_label = "English" [languages.fr] title = "Cloud Landscape" @@ -81,6 +83,8 @@ noscript_message = "Tous les fournisseurs sont visibles ci-dessous. Les fonction lang_nav_label = "Sélection de la langue" lang_switch_fr = "Passer en français" lang_switch_en = "Passer en anglais" +lang_fr_label = "Français" +lang_en_label = "English" [markdown] From 2dcc72a2a91aab74163ad5fe7c04befd81c48d69 Mon Sep 17 00:00:00 2001 From: "nicolas T." Date: Wed, 11 Mar 2026 22:57:34 +0100 Subject: [PATCH 3/4] =?UTF-8?q?chore:=20story=203.5=20done=20=E2=80=94=20u?= =?UTF-8?q?pdate=20sprint-status=20and=20story=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../3-5-keyboard-navigation-for-all-features.md | 2 +- _bmad-output/implementation-artifacts/sprint-status.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md b/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md index 19a7d43..bb1855f 100644 --- a/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md +++ b/_bmad-output/implementation-artifacts/3-5-keyboard-navigation-for-all-features.md @@ -1,6 +1,6 @@ # Story 3.5: Keyboard Navigation for All Features -Status: review +Status: done ## Story diff --git a/_bmad-output/implementation-artifacts/sprint-status.yaml b/_bmad-output/implementation-artifacts/sprint-status.yaml index e7109a8..d018a1c 100644 --- a/_bmad-output/implementation-artifacts/sprint-status.yaml +++ b/_bmad-output/implementation-artifacts/sprint-status.yaml @@ -80,7 +80,7 @@ development_status: 3-2-display-all-provider-listings-in-both-languages: done 3-3-display-ui-navigation-and-elements-in-both-languages: done 3-4-persist-user-language-preference: done - 3-5-keyboard-navigation-for-all-features: review + 3-5-keyboard-navigation-for-all-features: done 3-6-screen-reader-support-for-all-content: backlog 3-7-sufficient-color-contrast-wcag-2-1-aa: done # Merged via PR #7 (brand identity) 3-8-provide-skip-navigation-links: backlog From 7f5168d6d4aec14fe137631b3e5b44a6d7835560 Mon Sep 17 00:00:00 2001 From: nicolas Trauwaen Date: Sun, 15 Mar 2026 18:37:08 +0100 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: nicolas Trauwaen --- zola.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zola.toml b/zola.toml index 8cc066e..59721d1 100644 --- a/zola.toml +++ b/zola.toml @@ -84,7 +84,7 @@ lang_nav_label = "Sélection de la langue" lang_switch_fr = "Passer en français" lang_switch_en = "Passer en anglais" lang_fr_label = "Français" -lang_en_label = "English" +lang_en_label = "Anglais" [markdown]