Forms accessibility improvements

refs #1735

- use visually-hidden CSS class on labels and icon buttons
- use outline on focused fields
- add missing tabindex on buttons
- drop useless javascript code

diff --git a/galette/templates/default/components/forms/groups.html.twig b/galette/templates/default/components/forms/groups.html.twig
index 21f059846243c37b128a657dc1a2b9da03f7115f..f59cbcdac5c5f01729a74c7cd97db0f741957ba3 100644 (file)
--- a/galette/templates/default/components/forms/groups.html.twig
+++ b/galette/templates/default/components/forms/groups.html.twig
@@ -41,13 +41,13 @@
     </div>
     {% endif %}
     {% if login.isGroupManager() %}
-    <a class="jsonly disabled ui icon button" id="btngroups">
+    <a class="jsonly disabled ui icon button" id="btngroups" tabindex="0">
         <i class="user tag icon" aria-hidden="true"></i>
         {{ _T("Manage user's groups") }}
     </a>
     {% endif %}
     {% if login.isAdmin() or login.isStaff() %}
-    <a class="jsonly disabled ui icon button" id="btnmanagedgroups">
+    <a class="jsonly disabled ui icon button" id="btnmanagedgroups" tabindex="0">
         <i class="user shield icon" aria-hidden="true"></i>
         {{ _T("Manage user's managed groups") }}
     </a>

diff --git a/galette/templates/default/elements/group.html.twig b/galette/templates/default/elements/group.html.twig
index 6bc6df7753e4d67f170eadfdb6685ab2bb60760e..d29af3edd148508394916a28152463665ed04c45 100644 (file)
--- a/galette/templates/default/elements/group.html.twig
+++ b/galette/templates/default/elements/group.html.twig
@@ -120,50 +120,3 @@
         </div>
     </div>
 </form>
-<script type="text/javascript">
-    $(function() {
-        var _btnaid = '#newgroup';
-        var _btnuid = '#btnusers_small';
-        var _btnmid = '#btnmanagers_small';
-
-        {# Tabs #}
-        $('.menu.tabbed .item').tab({
-            onFirstLoad: function(tabPath) {
-{% if login.isAdmin() or login.isStaff() %}
-                if (tabPath == 'group_managers') {
-                    $(_btnaid).addClass('displaynone');
-                    $(_btnuid).addClass('displaynone');
-                } else if ( tabPath == 'group_members' ) {
-                    $(_btnaid).addClass('displaynone');
-                    $(_btnmid).addClass('displaynone');
-                } else if ( tabPath == 'group_information' ) {
-                    $(_btnuid).addClass('displaynone');
-                    $(_btnmid).addClass('displaynone');
-                }
-{% endif %}
-            },
-            onVisible: function(tabPath) {
-                document.getElementById('tab').value = tabPath;
-{% if login.isAdmin() or login.isStaff() %}
-                if ( tabPath == 'group_managers'  ) {
-                    $(_btnmid).removeClass('displaynone');
-                    $(_btnaid).addClass('displaynone');
-                    if ( !$(_btnuid).hasClass('displaynone') ) {
-                        $(_btnuid).addClass('displaynone');
-                    }
-                } else if ( tabPath == 'group_members' ) {
-                    $(_btnuid).removeClass('displaynone');
-                    $(_btnaid).addClass('displaynone');
-                    if ( !$(_btnmid).hasClass('displaynone') ) {
-                        $(_btnmid).addClass('displaynone');
-                    }
-                } else if ( tabPath == 'group_information' ) {
-                    $(_btnaid).removeClass('displaynone');
-                    $(_btnuid).addClass('displaynone');
-                    $(_btnmid).addClass('displaynone');
-                }
-{% endif %}
-            }
-        }).tab('change tab', '{{ tab }}');
-    });
-</script>

diff --git a/galette/templates/default/pages/advanced_search.html.twig b/galette/templates/default/pages/advanced_search.html.twig
index 3765134bdb83a6712467eed1f4eeed40ab7a3e1f..26abe15af5ca03fc840f30e8041308234b8e7640 100644 (file)
--- a/galette/templates/default/pages/advanced_search.html.twig
+++ b/galette/templates/default/pages/advanced_search.html.twig
@@ -220,7 +220,7 @@
                         title="{{ _T('Add new group search criteria') }}"
                     >
                         <i class="plus icon" aria-hidden="true"></i>
-                        <span class="displaynone">{{ _T('Add new group search criteria') }}</span>
+                        <span class="visually-hidden">{{ _T('Add new group search criteria') }}</span>
                     </a>
                 </div>
                 <div class="active content">
@@ -250,7 +250,7 @@
                                         title="{{ _T('Remove criteria') }}"
                                     >
                                         <i class="trash alt icon" aria-hidden="true"></i>
-                                        <span class="displaynone">{{ _T('Remove criteria') }}</span>
+                                        <span class="visually-hidden">{{ _T('Remove criteria') }}</span>
                                     </a>
                                 </div>
                             </div>
@@ -424,7 +424,7 @@
                             title="{{ _T('Add new free search criteria') }}"
                         >
                             <i class="plus icon" aria-hidden="true"></i>
-                            <span class="displaynone">{{ _T('Add new free search criteria') }}</span>
+                            <span class="visually-hidden">{{ _T('Add new free search criteria') }}</span>
                         </a>
                     </div>
                     <div class="active content">
@@ -537,7 +537,7 @@
                                             title="{{ _T('Remove criteria') }}"
                                         >
                                             <i class="trash alt icon" aria-hidden="true"></i>
-                                            <span class="displaynone">{{ _T('Remove criteria') }}</span>
+                                            <span class="visually-hidden">{{ _T('Remove criteria') }}</span>
                                         </a>
 
                                     </div>

diff --git a/galette/templates/default/pages/directlink.html.twig b/galette/templates/default/pages/directlink.html.twig
index 84f8320dd08d2ed0c7fde77f66f76b25b799d8b0..98a5b50d9ad0b1b58f04c9b4032d4ca7d0afd19c 100644 (file)
--- a/galette/templates/default/pages/directlink.html.twig
+++ b/galette/templates/default/pages/directlink.html.twig
@@ -5,7 +5,7 @@
                 <div class="ui segment">
                     <div class="field">
                         <div class="ui left icon input">
-                            <i class="envelope icon" aria-hidden="true"></i><span class="displaynone"><label for="email">{{ _T("Please confirm your email address:") }}</label></span>
+                            <i class="envelope icon" aria-hidden="true"></i><label for="email" class="visually-hidden">{{ _T("Please confirm your email address:") }}</label>
                             <input type="email" name="email" id="email" maxlength="50" required="required" autofocus placeholder="{{ _T("Please confirm your email address:") }}"/>
                         </div>
                     </div>

diff --git a/galette/templates/default/pages/index.html.twig b/galette/templates/default/pages/index.html.twig
index 7d6db7f0abe9124ddf0d82ad820882dea3b8ba4e..d4f24a608613e501d15105d4ea2d47c613202fe5 100644 (file)
--- a/galette/templates/default/pages/index.html.twig
+++ b/galette/templates/default/pages/index.html.twig
@@ -10,13 +10,13 @@
                         <div class="ui segment">
                             <div class="field">
                                 <div class="ui left icon input">
-                                    <i class="user icon" aria-hidden="true"></i><span class="displaynone"><label for="login">{{ _T("Username:") }}</label></span>
+                                    <i class="user icon" aria-hidden="true"></i><label for="login" class="visually-hidden">{{ _T("Username:") }}</label>
                                     <input type="text" name="login" id="login" autofocus placeholder="{{ _T("Username:") }}"/>
                                 </div>
                             </div>
                             <div class="field">
                                 <div class="ui left icon input">
-                                    <i class="lock icon" aria-hidden="true"></i><span class="displaynone"><label for="password">{{ _T("Password:") }}</label></span>
+                                    <i class="lock icon" aria-hidden="true"></i><label for="password" class="visually-hidden">{{ _T("Password:") }}</label>
                                     <input type="password" name="password" id="password" placeholder="{{ _T("Password:") }}"/>
                                 </div>
                             </div>

diff --git a/galette/templates/default/pages/members_list.html.twig b/galette/templates/default/pages/members_list.html.twig
index 262eea0ff073942e167b5d44325b3d68250f3966..f2ff0e0f979003fb21d44de9ce77ebdd8027ebd0 100644 (file)
--- a/galette/templates/default/pages/members_list.html.twig
+++ b/galette/templates/default/pages/members_list.html.twig
@@ -101,7 +101,7 @@
                     </select>
                 </div>
                 <div class="flexend field">
-                    <label for="filter_account" class="displaynone">{{ _T('among:') }}</label>
+                    <label for="filter_account" class="visually-hidden">{{ _T('among:') }}</label>
                     <select name="filter_account" class="ui search dropdown nochosen">
                         {% for key, value in filter_accounts_options %}
                             <option value="{{ key }}"{% if key == filters.filter_account %} selected="selected"{% endif %}>{{ value }}</option>
@@ -109,7 +109,7 @@
                     </select>
                 </div>
                 <div class="flexend field">
-                    <label for="group_filter" class="displaynone">{{ _T('among:') }}</label>
+                    <label for="group_filter" class="visually-hidden">{{ _T('among:') }}</label>
                     <select name="group_filter" class="ui search dropdown nochosen">
                         <option value="0">{{ _T('Select a group') }}</option>
     {% for group in filter_groups_options %}

diff --git a/galette/templates/default/pages/password_lost.html.twig b/galette/templates/default/pages/password_lost.html.twig
index 9a9e576aac7bce0c8ef0922bab076c95352622f4..1741ff527d83f3c2e4dba843caac52bcb28d9228 100644 (file)
--- a/galette/templates/default/pages/password_lost.html.twig
+++ b/galette/templates/default/pages/password_lost.html.twig
@@ -7,7 +7,7 @@
                     <div class="ui segment">
                         <div class="field">
                             <div class="ui left icon input">
-                                <i class="user icon" aria-hidden="true"></i><span class="displaynone"><label for="login">{{ _T("Username or email:") }}</label></span>
+                                <i class="user icon" aria-hidden="true"></i><label for="login" class="visually-hidden">{{ _T("Username or email:") }}</label>
                                 <input type="text" name="login" id="login" autofocus placeholder="{{ _T("Username or email:") }}"/>
                             </div>
                         </div>

diff --git a/galette/templates/default/pages/password_recover.html.twig b/galette/templates/default/pages/password_recover.html.twig
index 4757719987cb03edb81239d10b86d1d818f95106..05d8f0041a9284c904e8aa0beaafb357ba986657 100644 (file)
--- a/galette/templates/default/pages/password_recover.html.twig
+++ b/galette/templates/default/pages/password_recover.html.twig
@@ -8,13 +8,13 @@
                 <p class="ui yellow small message"><i class="exclamation triangle icon" aria-hidden="true"></i> {{ _T('(at least 4 characters)') }}</p>
                 <div class="field">
                     <div class="ui left icon input">
-                        <i class="lock icon" aria-hidden="true"></i><span class="displaynone"><label for="mdp_adh">{{ _T('New password:') }}</label></span>
+                        <i class="lock icon" aria-hidden="true"></i><label for="mdp_adh" class="visually-hidden">{{ _T('New password:') }}</label>
                         <input type="password" name="mdp_adh" id="mdp_adh" value="" required="required" autofocus placeholder="{{ _T('New password:') }}"/>
                     </div>
                 </div>
                 <div class="field">
                     <div class="ui left icon input">
-                        <i class="lock icon" aria-hidden="true"></i><span class="displaynone"><label for="mdp_adh2">{{ _T('Confirmation:') }}</label></span>
+                        <i class="lock icon" aria-hidden="true"></i><label for="mdp_adh2" class="visually-hidden">{{ _T('Confirmation:') }}</label>
                         <input type="password" name="mdp_adh2" id="mdp_adh2" value="" required="required" placeholder="{{ _T('Confirmation:') }}"/>
                     </div>
                 </div>

diff --git a/ui/js/common.js b/ui/js/common.js
index 44af7339a0b04abe59aba447a9b7473be9bfbb8e..05e75d9fd60431b8bd141b27ba0f029d96f480e4 100644 (file)
--- a/ui/js/common.js
+++ b/ui/js/common.js
@@ -207,8 +207,6 @@ $(function() {
     $('.jsenabled .jsonly.read-only').removeClass('read-only');
     $('.jsenabled .jsonly.search-dropdown').removeClass('search-dropdown').addClass('search clearable selection dropdown');
 
-    $('#login').focus();
-
     _bindFomanticComponents();
 
     _bindDropdownsAutosubmit();

diff --git a/ui/semantic/galette/collections/form.overrides b/ui/semantic/galette/collections/form.overrides
index 63b1492950242128840ccc42b342fde1302998b8..eba56b62e79799df46a2e31c4b58868167e36ce8 100644 (file)
--- a/ui/semantic/galette/collections/form.overrides
+++ b/ui/semantic/galette/collections/form.overrides
@@ -65,3 +65,30 @@
 .ui.form .data.inline.fields {
   margin-bottom: 0;
 }
+
+/*--------------------------
+      Focus state
+---------------------------*/
+.ui.form input[type="color"]:focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="file"]:focus,
+.ui.form input[type="month"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="url"]:focus,
+.ui.form input[type="week"]:focus,
+.ui.form input[type="checkbox"]:focus,
+.ui.form input[type="radio"]:focus,
+.ui.checkbox:not(.invisible) input:focus ~ label::before,
+.ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary),
+.ui.form textarea:focus,
+.ui.form .ui.search.dropdown > input.search:focus,
+.main-content .ui.dropdown:not(.tertiary):focus {
+  outline: 3px solid @blueFocus;
+}