fix(ui): Fix tabindex sequence (#11952)

* Added tabindex -1 to the visual keyboard
* Adjusted tabindex for zen mode
* Updated the tests to align with the changes
* Removed the tabindexes with high value

weblate/templates/snippets/format-translation.html

@@ -12,8 +12,8 @@ <h5 class="list-group-item-heading"><strong>{{ item.title }}</strong></h5>
     {% endif %}
     <div class="list-group-item-text" lang="{{ language.code }}" dir="{{ language.direction }}">
       {% if unit and item.copy %}
-      <button type="button" class="btn btn-link btn-xs pull-right flip" data-clipboard-text="{{ item.copy }}" title="{% trans "Copy to clipboard" %}">{% icon "copy.svg" %}</button>
-      <button type="button" class="btn btn-link btn-xs btn-sidebar pull-right flip" data-clone-text="{{ item.copy }}" title="{% trans "Clone to translation" %}">{% icon "clone.svg" %}</button>
+      <button type="button" class="btn btn-link btn-xs pull-right flip" data-clipboard-text="{{ item.copy }}" title="{% trans "Copy to clipboard" %}" tabindex="-1">{% icon "copy.svg" %}</button>
+      <button type="button" class="btn btn-link btn-xs btn-sidebar pull-right flip" data-clone-text="{{ item.copy }}" title="{% trans "Clone to translation" %}" tabindex="-1">{% icon "clone.svg" %}</button>
       {% endif %}
       <span class="{% if wrap and item.content|length > 25 %}wrap-text{% endif %}">{{ item.content }}</span></div>
   </div>

weblate/templates/translate.html

@@ -201,7 +201,7 @@ <h4 class="panel-title">
         </div>
       {% endif %}
     {% endwith %}
-    <button class="btn btn-primary" type="submit" name="save" tabindex="150"
+    <button class="btn btn-primary" type="submit" name="save"
     {% if locked %}
         disabled="disabled"
     {% elif not user_can_translate and not user_can_edit_flags %}
@@ -211,7 +211,7 @@ <h4 class="panel-title">
     {% endif %}
     >{% trans "Save and continue" %}</button>
 
-    <button class="btn btn-warning btn-spaced" type="submit" name="save-stay" tabindex="151"
+    <button class="btn btn-warning btn-spaced" type="submit" name="save-stay"
     {% if locked %}
         disabled="disabled"
     {% elif not user_can_translate and not user_can_edit_flags %}
@@ -222,7 +222,7 @@ <h4 class="panel-title">
     >{% trans "Save and stay" %}</button>
 
     {% if unit.translation.enable_suggestions %}
-    <button class="btn btn-warning btn-spaced" type="submit" name="suggest" tabindex="152"
+    <button class="btn btn-warning btn-spaced" type="submit" name="suggest"
     {% if project_locked or not user_can_suggest or unit.readonly %}disabled="disabled"{% endif %}
       {% if not user_can_suggest %}
         title="{% trans "Insufficient privileges for adding suggestions." %}"
@@ -233,7 +233,7 @@ <h4 class="panel-title">
       {% endif %}
     >{% icon "suggest.svg" %} {% trans "Suggest" %}</button>
     {% endif %}
-    <a class="btn btn-warning btn-spaced" href="{{ next_unit_url }}" rel="next" tabindex="153">{% if LANGUAGE_BIDI %}{% icon "rewind.svg" %}{% else %}{% icon "fast-forward.svg" %}{% endif %} {% trans "Skip" %}</a>
+    <a class="btn btn-warning btn-spaced" href="{{ next_unit_url }}" rel="next">{% if LANGUAGE_BIDI %}{% icon "rewind.svg" %}{% else %}{% icon "fast-forward.svg" %}{% endif %} {% trans "Skip" %}</a>
     </div>
   </div>
 </div>
@@ -789,7 +789,7 @@ <h4 class="panel-title">{% blocktrans with existing=unit.get_source_plurals.0 %}
             {{ new_unit_form|crispy }}
           </div>
           <div class="modal-footer">
-            <input type="submit" class="btn btn-primary" value="{% trans "Add" %}" tabindex="210" />
+            <input type="submit" class="btn btn-primary" value="{% trans "Add" %}" />
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->

weblate/templates/zen-units.html

@@ -16,8 +16,8 @@
   {{ item.unit.position }}
 {% endif %}
 <div class="pull-right flip btn-padded">
-  <a class="btn btn-link btn-xs" href="{{ site_url }}{{ item.unit.get_absolute_url }}" data-clipboard-text="{{ site_url }}{{ item.unit.get_absolute_url }}" data-clipboard-message="{% trans "Permalink copied to clipboard." %}" title="{% trans "Copy permalink" %}">{% icon "link.svg" %}</a>
-  <a class="btn btn-link btn-xs" href="{% url 'translate' path=object.get_url_path  %}?{{ search_url }}&amp;offset={{ item.offset }}" title="{% trans "Open in full editor" %}">{% icon "pencil-mini.svg" %}</a>
+  <a class="btn btn-link btn-xs" href="{{ site_url }}{{ item.unit.get_absolute_url }}" data-clipboard-text="{{ site_url }}{{ item.unit.get_absolute_url }}" data-clipboard-message="{% trans "Permalink copied to clipboard." %}" title="{% trans "Copy permalink" %}" tabindex="-1">{% icon "link.svg" %}</a>
+  <a class="btn btn-link btn-xs" href="{% url 'translate' path=object.get_url_path  %}?{{ search_url }}&amp;offset={{ item.offset }}" title="{% trans "Open in full editor" %}" tabindex="-1">{% icon "pencil-mini.svg" %}</a>
 </div>
 {% get_location_links user item.unit %}
 </td>
@@ -53,7 +53,7 @@
 {% if item.secondary %}
 {% for unit in item.secondary %}
 <div class="form-group">
-  <a href="{{ unit.get_absolute_url }}" class="language">{{ unit.translation.language }}</a>
+  <a href="{{ unit.get_absolute_url }}" class="language" tabindex="-1">{{ unit.translation.language }}</a>
   {% if user.profile.hide_source_secondary %}
     {% include "snippets/note-badge.html" with unit=item.unit %}
   {% endif %}
@@ -71,7 +71,7 @@
 
 {% if not user.profile.hide_source_secondary or not item.secondary %}
 <div class="form-group">
-  <a href="{{ item.unit.source_unit.get_absolute_url }}" class="language">{{ item.unit.translation.component.source_language }}</a>
+  <a href="{{ item.unit.source_unit.get_absolute_url }}" class="language" tabindex="-1">{{ item.unit.translation.component.source_language }}</a>
   {% include "snippets/note-badge.html" with unit=item.unit %}
   {% format_unit_source item.unit search_match=search_query glossary=item.glossary show_copy=True %}
 </div>

weblate/trans/forms.py

@@ -271,7 +271,7 @@ def get_toolbar(self, language, fieldname, unit, idx, source):
                     "specialchar",
                     name,
                     format_html(
-                        'data-value="{}"',
+                        'data-value="{}" tabindex="-1"',
                         mark_safe(  # noqa: S308
                             value.encode("ascii", "xmlcharrefreplace").decode("ascii")
                         ),
@@ -310,12 +310,11 @@ def render(self, name, value, attrs=None, renderer=None, **kwargs):
             values = unit.get_target_plurals()
         if "zen-mode" in self.attrs:
             lang_label = format_html(
-                '<a class="language" href="{}">{}</a>',
+                '<a class="language" href="{}" tabindex="-1">{}</a>',
                 unit.get_absolute_url(),
                 lang_label,
             )
         plural = translation.plural
-        tabindex = self.attrs["tabindex"]
         placeables = set()
         for text in plurals:
             placeables.update(hl[2] for hl in highlight_string(text, unit))
@@ -324,7 +323,6 @@ def render(self, name, value, attrs=None, renderer=None, **kwargs):
 
         # Need to add extra class
         attrs["class"] = "translation-editor form-control highlight-editor"
-        attrs["tabindex"] = tabindex
         attrs["lang"] = lang.code
         attrs["dir"] = lang.direction
         attrs["rows"] = 3
@@ -342,7 +340,6 @@ def render(self, name, value, attrs=None, renderer=None, **kwargs):
             fieldname = f"{name}_{idx}"
             fieldid = f"{base_id}_{idx}"
             attrs["id"] = fieldid
-            attrs["tabindex"] = tabindex + idx
             source = plurals[1] if idx and len(plurals) > 1 else plurals[0]
 
             # Render textare
@@ -515,7 +512,6 @@ def __init__(self, user, unit: Unit, *args, **kwargs) -> None:
                 "explanation": unit.explanation,
             }
             kwargs["auto_id"] = f"id_{unit.checksum}_%s"
-        tabindex = kwargs.pop("tabindex", 100)
         super().__init__(unit, *args, **kwargs)
         if unit.readonly:
             for field in ["target", "fuzzy", "review"]:
@@ -526,7 +522,6 @@ def __init__(self, user, unit: Unit, *args, **kwargs) -> None:
                 if state == STATE_READONLY
             ]
         self.user = user
-        self.fields["target"].widget.attrs["tabindex"] = tabindex
         self.fields["target"].widget.profile = user.profile
         self.fields["review"].widget.attrs["class"] = "review_radio"
         # Avoid failing validation on untranslated string
@@ -2333,11 +2328,8 @@ class NewUnitBaseForm(forms.Form):
         required=False,
     )
 
-    def __init__(
-        self, translation, user, tabindex: int | None = None, *args, **kwargs
-    ) -> None:
+    def __init__(self, translation, user, *args, **kwargs) -> None:
         super().__init__(*args, **kwargs)
-        self.tabindex = tabindex or 200
         self.translation = translation
         self.fields["variant"].queryset = translation.unit_set.all()
         self.user = user
@@ -2391,14 +2383,11 @@ def __init__(
         self,
         translation,
         user,
-        tabindex: int | None = None,
         is_source_plural: bool | None = None,
         *args,
         **kwargs,
     ) -> None:
-        super().__init__(translation, user, tabindex, *args, **kwargs)
-        self.fields["context"].widget.attrs["tabindex"] = self.tabindex
-        self.fields["source"].widget.attrs["tabindex"] = self.tabindex + 1
+        super().__init__(translation, user, *args, **kwargs)
         self.fields["source"].widget.profile = user.profile
         self.fields["source"].widget.is_source_plural = is_source_plural
         self.fields["source"].initial = Unit(translation=translation, id_hash=0)
@@ -2426,15 +2415,12 @@ def __init__(
         self,
         translation,
         user,
-        tabindex: int | None = None,
         is_source_plural: bool | None = None,
         *args,
         **kwargs,
     ) -> None:
-        super().__init__(translation, user, tabindex, *args, **kwargs)
-        self.fields["context"].widget.attrs["tabindex"] = self.tabindex
+        super().__init__(translation, user, *args, **kwargs)
         self.fields["context"].label = translation.component.context_label
-        self.fields["source"].widget.attrs["tabindex"] = self.tabindex + 1
         self.fields["source"].widget.profile = user.profile
         self.fields["source"].widget.is_source_plural = is_source_plural
         self.fields["source"].initial = Unit(
@@ -2455,13 +2441,11 @@ def __init__(
         self,
         translation,
         user,
-        tabindex: int | None = None,
         is_source_plural: bool | None = None,
         *args,
         **kwargs,
     ) -> None:
-        super().__init__(translation, user, tabindex, is_source_plural, *args, **kwargs)
-        self.fields["target"].widget.attrs["tabindex"] = self.tabindex + 2
+        super().__init__(translation, user, is_source_plural, *args, **kwargs)
         self.fields["target"].widget.profile = user.profile
         self.fields["target"].widget.is_source_plural = is_source_plural
         self.fields["target"].initial = Unit(translation=translation, id_hash=0)
@@ -2494,13 +2478,11 @@ def get_glossary_flags(self):
 
 
 class NewBilingualGlossarySourceUnitForm(GlossaryAddMixin, NewBilingualSourceUnitForm):
-    def __init__(
-        self, translation, user, tabindex: int | None = None, *args, **kwargs
-    ) -> None:
+    def __init__(self, translation, user, *args, **kwargs) -> None:
         if kwargs["initial"] is None:
             kwargs["initial"] = {}
         kwargs["initial"]["terminology"] = True
-        super().__init__(translation, user, tabindex, *args, **kwargs)
+        super().__init__(translation, user, *args, **kwargs)
 
 
 class NewBilingualGlossaryUnitForm(GlossaryAddMixin, NewBilingualUnitForm):

weblate/trans/templatetags/translations.py

@@ -86,7 +86,7 @@
 
 SOURCE_LINK = (
     '<a href="{0}" target="_blank" rel="noopener noreferrer"'
-    ' class="{2}" dir="ltr">{1}</a>'
+    ' class="{2}" dir="ltr" tabindex="-1">{1}</a>'
 )
 HLCHECK = '<span class="hlcheck" data-value="{}"><span class="highlight-number"></span>'
 
@@ -593,7 +593,7 @@ def render_documentation_icon(doc_url: str, right: bool):
     if not doc_url:
         return ""
     return format_html(
-        """<a class="{} doc-link" href="{}" title="{}" target="_blank" rel="noopener">{}</a>""",
+        """<a class="{} doc-link" href="{}" title="{}" target="_blank" rel="noopener" tabindex="-1">{}</a>""",
         "pull-right flip" if right else "",
         doc_url,
         gettext("Documentation"),

weblate/trans/tests/test_templatetags.py

@@ -125,13 +125,13 @@ def test_repowebs(self) -> None:
             get_location_links(self.user, self.unit),
             """
             <a class="wrap-text"
-                href="http://example.net/foo.bar#L123" target="_blank"
+                href="http://example.net/foo.bar#L123" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             foo.bar:123
             </a>
             <span class="divisor">•</span>
             <a class="wrap-text"
-                href="http://example.net/bar.foo#L321" target="_blank"
+                href="http://example.net/bar.foo#L321" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             bar.foo:321
             </a>
@@ -147,7 +147,7 @@ def test_repoweb(self) -> None:
             get_location_links(self.user, self.unit),
             """
             <a class="wrap-text"
-                href="http://example.net/foo.bar#L123" target="_blank"
+                href="http://example.net/foo.bar#L123" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             foo.bar:123
             </a>
@@ -164,7 +164,7 @@ def test_user_url(self) -> None:
             get_location_links(self.user, self.unit),
             """
             <a class="wrap-text"
-                href="editor://open/?file=foo.bar&amp;line=123" target="_blank"
+                href="editor://open/?file=foo.bar&amp;line=123" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             foo.bar:123
             </a>
@@ -180,7 +180,7 @@ def test_filename_quote(self) -> None:
             get_location_links(self.user, self.unit),
             """
             <a class="wrap-text"
-                href="http://example.net/foo%2Bbar#L321" target="_blank"
+                href="http://example.net/foo%2Bbar#L321" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             foo+bar:321
             </a>
@@ -198,25 +198,25 @@ def test_absolute_url(self) -> None:
             get_location_links(self.user, self.unit),
             """
             <a class="wrap-text"
-                href="http://example.net/foo.bar#L123" target="_blank"
+                href="http://example.net/foo.bar#L123" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             foo.bar:123
             </a>
             <span class="divisor">•</span>
             <a class="wrap-text"
-                href="http://example.net/bar.foo#L321" target="_blank"
+                href="http://example.net/bar.foo#L321" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             bar.foo:321
             </a>
             <span class="divisor">•</span>
             <a class="wrap-text"
-                href="https://example.com/foo" target="_blank"
+                href="https://example.com/foo" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             https://example.com/foo
             </a>
             <span class="divisor">•</span>
             <a class="wrap-text"
-                href="http://example.org/bar" target="_blank"
+                href="http://example.org/bar" tabindex="-1" target="_blank"
                 dir="ltr" rel="noopener noreferrer">
             http://example.org/bar
             </a>

weblate/trans/views/edit.py

@@ -871,9 +871,7 @@ def get_zen_unitdata(obj, project, unit_set, request):
                 and request.user.profile.secondary_in_zen
                 else None
             ),
-            "form": ZenTranslationForm(
-                request.user, unit, tabindex=100 + (unit.position * 10)
-            ),
+            "form": ZenTranslationForm(request.user, unit),
             "offset": offset + pos + 1,
             "glossary": get_glossary_terms(unit),
         }