drop tabindex explicit arguments from form macro templates

refs #181
level12 · Dec 6, 2022 · 09c4e8b · 09c4e8b
1 parent 1eb8db2
commit 09c4e8b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 68 deletions.
diff --git a/docs/source/getting-started.rst b/docs/source/getting-started.rst
@@ -124,6 +124,9 @@ breaking changes. This list should provide information on needed app changes.
   - Bootstrap 4 "horizontal" form templates had been broken and were displaying forms in the
   vertical style instead. This has been resolved, which means forms will change to showing with
   horizontal layout. If this is not desired, you will need to override the form templates/macros.
+  - Tab index setting has been removed from the form macro templates. tabindex > 0 is not
+  recommended for accessibility. The _field_order attribute of the form should be used to
+  indirectly control tab order, instead of setting tabindex explicitly.
   - Template files now follow keg's more recent naming scheme to use dashes instead of underscores.
   E.g. ``keg_elements/forms/horizontal_b4.html`` became ``keg-elements/forms/horizontal-b4.html``
   - The older Bootstrap 3 macro template (``horizontal.html``) has been renamed for

diff --git a/keg_elements/templates/keg-elements/forms/horizontal-b3.html b/keg_elements/templates/keg-elements/forms/horizontal-b3.html
@@ -13,22 +13,6 @@
 
     Example usage:
         {{ horz_form.field(form.email, placeholder='Input email', type='email') }}
-
-    Note:
-    A change was made to the below macros to support adding tab indexes to form
-    elements. A tab index can be added explicitly as a html attribute when creating a
-    field but we wanted to add the tab indexes when a wtform is created using the
-    form macro, fields macro or the sections macro.
-    Due to the fact that some of these macros can be used multiple times in a template,
-    we needed a way to specify the start tab index for each invocation of the macro. We
-    do that by passing in the start_tab_index parameter to the form, fields and section
-    macros.
-    This change could possibly cause tab indexes to be incorrect for existing forms
-    if some form fields are being rendered explicity inside a form macro. The tab indexes
-    would be incorrect because by default, the start_tab_index in the form macro is set to
-    1 and the same index is then used to set the tab index on the form submit buttons. To fix
-    the tab indexes, the parameter start_tab_index in the form macro will need to be
-    set so to account for all the fields which are being explicitly rendered.
 #}
 
 {% macro div_form_group(field) -%}
@@ -197,12 +181,12 @@
     {% endcall %}
 {%- endmacro %}
 
-{% macro submit_group(action_text='Submit', btn_class='btn btn-primary', cancel_url='', tab_index=1) -%}
+{% macro submit_group(action_text='Submit', btn_class='btn btn-primary', cancel_url='') -%}
     <div class="form-group">
       <div class="unlabeled-group">
-        <button type="submit" class="{{ btn_class }}" tabIndex="{{tab_index}}">{{ action_text }} </button>
+        <button type="submit" class="{{ btn_class }}">{{ action_text }} </button>
         {% if cancel_url %}
-            <a href="{{cancel_url}}" class="cancel" tabIndex="{{tab_index+1}}">Cancel</a>
+            <a href="{{cancel_url}}" class="cancel">Cancel</a>
         {% endif %}
       </div>
     </div>
@@ -257,8 +241,7 @@
     btn_class='btn btn-primary',
     cancel_url='',
     form_upload=false,
-    dirty_check=false,
-    start_tab_index=1
+    dirty_check=false
 ) -%}
 
     <form method="POST"
@@ -269,7 +252,6 @@
           {% if dirty_check %}data-dirty-check="on"{% endif %}
     >
         {{ form.hidden_tag() if form.hidden_tag }}
-        {% set tab_index=[start_tab_index|int] %}
         {{ form_errors(form) }}
         {% if caller %}
             {{ caller() }}
@@ -279,28 +261,25 @@
             {% for f in form %}
                 {% if not f.widget.input_type == 'hidden' %}
                     {# Hidden fields are rendered by the `hidden_tag()` call above #}
-                    {{ render_field(f, tabIndex=tab_index.pop()) }}
-                    {% if tab_index.append(start_tab_index|int+loop.index) %} {% endif %}
+                    {{ render_field(f) }}
                 {% endif %}
             {% endfor %}
         {% endif %}
-        {{ submit_group(action_text=action_text, btn_class=btn_class, cancel_url=cancel_url, tab_index=tab_index[0]) }}
+        {{ submit_group(action_text=action_text, btn_class=btn_class, cancel_url=cancel_url) }}
     </form>
 {%- endmacro %}
 
-{% macro fields(form, field_names, start_tab_index=1) -%}
-    {% set tab_index = start_tab_index|int %}
+{% macro fields(form, field_names) -%}
     {% for field_name in field_names %}
-        {% set tab_index = tab_index + loop.index0 %}
-        {{ render_field(form[field_name], tabIndex=tab_index) }}
+        {{ render_field(form[field_name]) }}
     {% endfor %}
 {%- endmacro %}
 
-{% macro section(heading, form, field_names, start_tab_index=1) -%}
+{% macro section(heading, form, field_names) -%}
     <h2>{{heading}}</h2>
     {% if caller %}
         {{ caller() }}
     {% else %}
-        {{ fields(form, field_names, start_tab_index) }}
+        {{ fields(form, field_names) }}
     {% endif %}
 {%- endmacro %}
diff --git a/keg_elements/templates/keg-elements/forms/horizontal-b4.html b/keg_elements/templates/keg-elements/forms/horizontal-b4.html
@@ -13,22 +13,6 @@
 
     Example usage:
         {{ horz_form.field(form.email, placeholder='Input email', type='email') }}
-
-    Note:
-    A change was made to the below macros to support adding tab indexes to form
-    elements. A tab index can be added explicitly as a html attribute when creating a
-    field but we wanted to add the tab indexes when a wtform is created using the
-    form macro, fields macro or the sections macro.
-    Due to the fact that some of these macros can be used multiple times in a template,
-    we needed a way to specify the start tab index for each invocation of the macro. We
-    do that by passing in the start_tab_index parameter to the form, fields and section
-    macros.
-    This change could possibly cause tab indexes to be incorrect for existing forms
-    if some form fields are being rendered explicity inside a form macro. The tab indexes
-    would be incorrect because by default, the start_tab_index in the form macro is set to
-    1 and the same index is then used to set the tab index on the form submit buttons. To fix
-    the tab indexes, the parameter start_tab_index in the form macro will need to be
-    set so to account for all the fields which are being explicitly rendered.
 #}
 
 {% macro div_form_group(field) -%}
@@ -218,12 +202,12 @@
     </fieldset>
 {%- endmacro %}
 
-{% macro submit_group(action_text='Submit', btn_class='btn btn-primary', cancel_url='', tab_index=1) -%}
+{% macro submit_group(action_text='Submit', btn_class='btn btn-primary', cancel_url='') -%}
     <div class="form-group row col-9 offset-sm-3">
       <div class="unlabeled-group">
-        <button type="submit" class="{{ btn_class }}" tabIndex="{{tab_index}}">{{ action_text }} </button>
+        <button type="submit" class="{{ btn_class }}">{{ action_text }} </button>
         {% if cancel_url %}
-            <a href="{{cancel_url}}" class="cancel" tabIndex="{{tab_index+1}}">Cancel</a>
+            <a href="{{cancel_url}}" class="cancel">Cancel</a>
         {% endif %}
       </div>
     </div>
@@ -279,7 +263,6 @@
     cancel_url='',
     form_upload=false,
     dirty_check=false,
-    start_tab_index=1,
     form_id=None,
     form_name=None
 ) -%}
@@ -295,7 +278,6 @@
           novalidate
     >
         {{ form.hidden_tag() if form.hidden_tag }}
-        {% set tab_index=[start_tab_index|int] %}
         {{ form_errors(form) }}
 
         {% if caller %}
@@ -306,31 +288,27 @@
             {% for f in form %}
                 {% if not f.widget.input_type == 'hidden' %}
                     {# Hidden fields are rendered by the `hidden_tag()` call above #}
-                    {{ render_field(f, tabIndex=tab_index.pop()) }}
-                    {% if tab_index.append(start_tab_index|int+loop.index) %} {% endif %}
+                    {{ render_field(f) }}
                 {% endif %}
             {% endfor %}
 
         {% endif %}
-        {{ submit_group(action_text=action_text, btn_class=btn_class, cancel_url=cancel_url, tab_index=tab_index[0]) }}
+        {{ submit_group(action_text=action_text, btn_class=btn_class, cancel_url=cancel_url) }}
     </form>
 {%- endmacro %}
 
-{% macro fields(form, field_names, start_tab_index=1) -%}
-    {% set tab_index = start_tab_index|int %}
+{% macro fields(form, field_names) -%}
     {% for field_name in field_names %}
-        {% set tab_index = tab_index + loop.index0 %}
-        {{ render_field(form[field_name], tabIndex=tab_index) }}
-
+        {{ render_field(form[field_name]) }}
     {% endfor %}
 {%- endmacro %}
 
-{% macro section(heading, form, field_names, start_tab_index=1) -%}
+{% macro section(heading, form, field_names) -%}
     <h2>{{heading}}</h2>
     {% if caller %}
         {{ caller() }}
     {% else %}
-        {{ fields(form, field_names, start_tab_index) }}
+        {{ fields(form, field_names) }}
     {% endif %}
 {%- endmacro %}
 

diff --git a/keg_elements/templates/keg-elements/forms/horizontal-static.html b/keg_elements/templates/keg-elements/forms/horizontal-static.html
@@ -93,10 +93,10 @@
     {% endcall %}
 {%- endmacro %}
 
-{% macro submit_group(action_text='Done', btn_class='btn btn-primary', cancel_url='', tab_index="1") -%}
+{% macro submit_group(action_text='Done', btn_class='btn btn-primary', cancel_url='') -%}
     <div class="form-group">
         <div class="unlabeled-group">
-          <a tabIndex={{tab_index}} href="{{cancel_url}}" class="{{ btn_class }}">{{ action_text }}</a>
+          <a href="{{cancel_url}}" class="{{ btn_class }}">{{ action_text }}</a>
         </div>
     </div>
 {%- endmacro %}
@@ -135,8 +135,7 @@
     class_='form-horizontal',
     btn_class='btn btn-primary',
     cancel_url='',
-    dirty_check=false,
-    start_tab_index=1
+    dirty_check=false
 ) -%}
     <div class="{{ class_ }}">
         {% if caller %}
@@ -152,13 +151,13 @@
     </div>
 {%- endmacro %}
 
-{% macro fields(form, field_names, start_tab_index=1) -%}
+{% macro fields(form, field_names) -%}
     {% for field_name in field_names %}
         {{ render_field(form[field_name]) }}
     {% endfor %}
 {%- endmacro %}
 
-{% macro section(heading, form, field_names, start_tab_index=1) -%}
+{% macro section(heading, form, field_names) -%}
     <h2>{{heading}}</h2>
     {% if caller %}
         {{ caller() }}