From 57c7701d540098a2c8e1651b7a231ecc7d3120cb Mon Sep 17 00:00:00 2001 From: Guillaume AGNIERAY Date: Wed, 8 Nov 2023 15:38:03 +0100 Subject: [PATCH] Fix keyboard navigation accessibility refs #1735 Fix keyboard navigation order Emphasize focused elements outline style Fix navigation accordion and dropdowns keyboard accessibility Improve compact menu accessibility Clean unused menus_macros.twig template Remove/Replace onChange callbacks on selects and dropdowns: - on members' list filters (removed) - on records per page - on batch actions - on labels translation - on email texts edition - on contrib form - on advanced search --- .../Galette/Controllers/TextController.php | 1 + .../default/elements/language.html.twig | 38 ++++----- .../templates/default/elements/list.html.twig | 18 ++-- .../default/elements/logged_user.html.twig | 40 +++++---- .../elements/navigation/menus_macros.twig | 39 --------- .../navigation/navigation_aside.html.twig | 2 +- .../navigation/navigation_sidebar.html.twig | 9 +- .../navigation/navigation_topbar.html.twig | 6 +- .../navigation/public_pages.html.twig | 4 +- galette/templates/default/macros.twig | 10 ++- .../default/pages/advanced_search.html.twig | 77 +++++++++-------- ...nfiguration_dynamic_translations.html.twig | 34 +++----- .../pages/configuration_texts.html.twig | 30 +++---- .../default/pages/contribution_form.html.twig | 83 ++++++++++--------- .../default/pages/member_form.html.twig | 14 ---- .../default/pages/members_list.html.twig | 6 +- .../default/pages/transaction_form.html.twig | 2 +- ui/js/common.js | 73 ++++++++++++---- .../galette/collections/form.overrides | 7 ++ .../galette/collections/menu.overrides | 51 ++++++++++++ .../galette/collections/menu.variables | 10 +++ ui/semantic/galette/globals/site.overrides | 13 +++ .../galette/modules/dropdown.overrides | 12 +++ 23 files changed, 343 insertions(+), 236 deletions(-) delete mode 100644 galette/templates/default/elements/navigation/menus_macros.twig diff --git a/galette/lib/Galette/Controllers/TextController.php b/galette/lib/Galette/Controllers/TextController.php index 7219d4a5c..cd4f44e66 100644 --- a/galette/lib/Galette/Controllers/TextController.php +++ b/galette/lib/Galette/Controllers/TextController.php @@ -93,6 +93,7 @@ class TextController extends AbstractController 'reflist' => $texts->getRefs($lang), 'langlist' => $this->i18n->getList(), 'cur_lang' => $lang, + 'cur_lang_name' => $this->i18n->getNameFromId($lang), 'cur_ref' => $ref, 'mtxt' => $mtxt, ] diff --git a/galette/templates/default/elements/language.html.twig b/galette/templates/default/elements/language.html.twig index 4f92c2b18..23aa6616d 100644 --- a/galette/templates/default/elements/language.html.twig +++ b/galette/templates/default/elements/language.html.twig @@ -3,8 +3,8 @@ {% set component_classes = "tooltip language item" %} {% set content_classes = "content" %} {% set header = true %} - {% elseif ui == 'dropdown' %} - {% set component_classes = "tooltip language ui dropdown right-aligned item" %} + {% elseif ui == 'dropdown' %} + {% set component_classes = "tooltip language ui dropdown navigation right-aligned item" %} {% set content_classes = "menu" %} {% set header = false %} {% endif %} @@ -12,24 +12,24 @@
{% if header == true %} -
+
{% endif %} - - {{ galette_lang }} - + + {{ galette_lang }} + {% if header == true %} -
+
{% endif %} -
- {% for langue in languages %} - {% if langue.getAbbrev() != galette_lang %} - - {{ langue.getName() }} ({{ langue.getAbbrev() }}) - - {% endif %} - {% endfor %} -
+
+{% for langue in languages %} + {% if langue.getAbbrev() != galette_lang %} + + {{ langue.getName() }} ({{ langue.getAbbrev() }}) + + {% endif %} +{% endfor %} +
diff --git a/galette/templates/default/elements/list.html.twig b/galette/templates/default/elements/list.html.twig index c5617bc8b..5cc3357d9 100644 --- a/galette/templates/default/elements/list.html.twig +++ b/galette/templates/default/elements/list.html.twig @@ -22,12 +22,16 @@
- + +
{% if numrows == 0 %}{{ _T('All') }}{% else %}{{ numrows }}{% endif %}
+
{% for key, value in nbshow_options %} - +
{{ value }}
{% endfor %} - - +
+
{% endif %} @@ -152,10 +156,14 @@ {% endif %} $('.batch-select-action').before(_checklinks); $('.batch-select-action').dropdown({ - onChange: function(value, text, $selectedItem) { + action: function(text, value, element) { if (!_checkselection()) { return false; } + // Hide dropdown + var element = element.parentElement !== undefined ? element : element[0]; + var dropdown = element.parentElement.parentElement; + $(dropdown).dropdown('hide'); // Handle direct download actions. if (value.endsWith('__directdownload')) { const _value = value.split('__'); diff --git a/galette/templates/default/elements/logged_user.html.twig b/galette/templates/default/elements/logged_user.html.twig index 146fa73d7..92275b8a1 100644 --- a/galette/templates/default/elements/logged_user.html.twig +++ b/galette/templates/default/elements/logged_user.html.twig @@ -59,11 +59,12 @@ {% include "elements/modes.html.twig" %} {% else %} - {% set component_classes = "ui vertical centered tiny fluid icon menu" %} + {% set component_classes = "ui vertical centered tiny icon fluid menu" %}
-
+
- {{ login.loggedInAs()|raw }} + {{ login.loggedInAs()|raw }} +
@@ -77,24 +78,27 @@
{% include "elements/modes.html.twig" %}
- - - {% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %} - - - - {% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %} -
+ + + {% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %} + + + + {% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %} +
{% endif %} {% endif %} diff --git a/galette/templates/default/elements/navigation/menus_macros.twig b/galette/templates/default/elements/navigation/menus_macros.twig deleted file mode 100644 index 2f3baa300..000000000 --- a/galette/templates/default/elements/navigation/menus_macros.twig +++ /dev/null @@ -1,39 +0,0 @@ -{% macro renderMenu(title, icon, items) %} - {% set my_routes = [] %} - {% for item in items %} - {% set my_routes = my_routes|merge([item.route.name]) %} - {% endfor %} -
-
- - {{ title }} - -
-
- {% for item in items %} - {{ _self.renderMenuItem(item.label, item.title, item.route, item.icon ?? null) }} - {% endfor %} -
-
-{% endmacro %} - -{% macro renderMenuItem(label, title, route, icon, class, tips_position) %} - {% if class is empty %} - {% if is_current_url(route.name, route.args|default([])) %} - {% set class = "active item" %} - {% else %} - {% set class = "item" %} - {% endif %} - {% endif %} - - {% if icon %} - - {% endif %} - {{ label }} - -{% endmacro %} diff --git a/galette/templates/default/elements/navigation/navigation_aside.html.twig b/galette/templates/default/elements/navigation/navigation_aside.html.twig index 7b85e62be..67a6068cf 100644 --- a/galette/templates/default/elements/navigation/navigation_aside.html.twig +++ b/galette/templates/default/elements/navigation/navigation_aside.html.twig @@ -14,7 +14,7 @@ {% endif %}
- {% set mode = login.getCompactMenu() ? "compact" : "accordion" %} + {% set mode = login.getCompactMenu() ? "compact" : "default" %} {% include "elements/navigation/navigation_items.html.twig" with { mode: mode } %} diff --git a/galette/templates/default/elements/navigation/navigation_sidebar.html.twig b/galette/templates/default/elements/navigation/navigation_sidebar.html.twig index 6b6d80fe4..cfcd65a20 100644 --- a/galette/templates/default/elements/navigation/navigation_sidebar.html.twig +++ b/galette/templates/default/elements/navigation/navigation_sidebar.html.twig @@ -1,4 +1,4 @@ -
+