From 95c95bb01240e1ac9c217915d74ea07e58bf2135 Mon Sep 17 00:00:00 2001
From: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Date: Wed, 24 Jul 2024 21:33:57 +0100
Subject: [PATCH 1/4] fixed 16852: misc accessbility problems

---
 netbox/templates/base/layout.html             | 24 +++++++++----------
 netbox/templates/dcim/inc/rack_elevation.html |  2 +-
 netbox/templates/extras/dashboard/widget.html |  2 ++
 netbox/templates/generic/bulk_import.html     |  2 +-
 .../templates/helpers/table_config_form.html  |  8 +++----
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index cb6dc4dfcc..8106e042d2 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -147,40 +147,40 @@ <h1 class="navbar-brand">
               {% block footer_links %}
                 {# Documentation #}
                 <li class="list-inline-item">
-                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener">
-                    <i title="{% trans "Docs" %}" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Docs" %}">
+                    <i class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# REST API #}
                 <li class="list-inline-item">
-                  <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener">
-                    <i title="{% trans "REST API" %}" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API" %}">
+                    <i class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# API docs #}
                 <li class="list-inline-item">
-                  <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener">
-                    <i title="{% trans "REST API documentation" %}" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API documentation" %}">
+                    <i class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# GraphQL API #}
                 {% if config.GRAPHQL_ENABLED %}
                   <li class="list-inline-item">
-                    <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener">
-                      <i title="{% trans "GraphQL API" %}" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "GraphQL API" %}">
+                      <i class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                     </a>
                   </li>
                 {% endif %}
                 {# GitHub #}
                 <li class="list-inline-item">
-                  <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener">
-                    <i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Source Code" %}">
+                    <i class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# NetDev Slack #}
                 <li class="list-inline-item">
-                  <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener">
-                    <i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Community" %}">
+                    <i class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
               {% endblock footer_links %}
diff --git a/netbox/templates/dcim/inc/rack_elevation.html b/netbox/templates/dcim/inc/rack_elevation.html
index 03a847e33c..5ab6a3f7df 100644
--- a/netbox/templates/dcim/inc/rack_elevation.html
+++ b/netbox/templates/dcim/inc/rack_elevation.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 <div style="margin-left: -30px">
-    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation"></object>
+    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation" aria-label="Rack elevation"></object>
 </div>
 <div class="text-center mt-3">
     <a class="btn btn-outline-primary" href="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" hx-boost="false">
diff --git a/netbox/templates/extras/dashboard/widget.html b/netbox/templates/extras/dashboard/widget.html
index 51b40342e2..cd57cb56d5 100644
--- a/netbox/templates/extras/dashboard/widget.html
+++ b/netbox/templates/extras/dashboard/widget.html
@@ -15,6 +15,7 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
+        aria-label="{{ widget.title }} widget configuration"
       >
         <i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
@@ -28,6 +29,7 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
+        aria-label="Close {{ widget.title }} widget"
       >
         <i class="mdi mdi-close {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
diff --git a/netbox/templates/generic/bulk_import.html b/netbox/templates/generic/bulk_import.html
index 8514bf9006..967265858b 100644
--- a/netbox/templates/generic/bulk_import.html
+++ b/netbox/templates/generic/bulk_import.html
@@ -145,7 +145,7 @@ <h2 class="card-header">{% trans "Field Options" %}</h2>
                     {{ field.label }}
                   {% endif %}
                   {% if field.STATIC_CHOICES %}
-                    <a href="#" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices"><i class="mdi mdi-help-circle"></i></a>
+                    <a href="#" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices" aria-label="{{ name }} choices"><i class="mdi mdi-help-circle"></i></a>
                     <div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
                       <div class="modal-dialog" role="document">
                         <div class="modal-content">
diff --git a/netbox/utilities/templates/helpers/table_config_form.html b/netbox/utilities/templates/helpers/table_config_form.html
index c3a79cfbf2..e8cee4bfea 100644
--- a/netbox/utilities/templates/helpers/table_config_form.html
+++ b/netbox/utilities/templates/helpers/table_config_form.html
@@ -16,10 +16,10 @@ <h5 class="modal-title">{% trans "Table Configuration" %}</h5>
           </div>
           <div class="col-2 d-flex align-items-center">
             <div>
-              <a class="btn btn-success btn-sm w-100 my-2" id="add_columns">
+              <a tabindex="0" class="btn btn-success btn-sm w-100 my-2" id="add_columns">
                 <i class="mdi mdi-arrow-right-bold"></i> {% trans "Add" %}
               </a>
-              <a class="btn btn-danger btn-sm w-100 my-2" id="remove_columns">
+              <a tabindex="0" class="btn btn-danger btn-sm w-100 my-2" id="remove_columns">
                 <i class="mdi mdi-arrow-left-bold"></i> {% trans "Remove" %}
               </a>
             </div>
@@ -27,10 +27,10 @@ <h5 class="modal-title">{% trans "Table Configuration" %}</h5>
           <div class="col-5 text-center">
             {{ form.columns.label }}
             {{ form.columns }}
-            <a class="btn btn-primary btn-sm mt-2" id="move-option-up" data-target="id_columns">
+            <a tabindex="0" class="btn btn-primary btn-sm mt-2" id="move-option-up" data-target="id_columns">
                 <i class="mdi mdi-arrow-up-bold"></i> {% trans "Move Up" %}
             </a>
-            <a class="btn btn-primary btn-sm mt-2" id="move-option-down" data-target="id_columns">
+            <a tabindex="0" class="btn btn-primary btn-sm mt-2" id="move-option-down" data-target="id_columns">
                 <i class="mdi mdi-arrow-down-bold"></i> {% trans "Move Down" %}
             </a>
           </div>

From 403c45e4c06315943b8ba6340d2a66b52cc62600 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 25 Jul 2024 16:23:42 -0400
Subject: [PATCH 2/4] Restore tooltip text

---
 netbox/templates/base/layout.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index 8106e042d2..c760c91630 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -148,39 +148,39 @@ <h1 class="navbar-brand">
                 {# Documentation #}
                 <li class="list-inline-item">
                   <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Docs" %}">
-                    <i class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    <i title="{% trans "Docs" %}" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# REST API #}
                 <li class="list-inline-item">
                   <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API" %}">
-                    <i class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    <i title="{% trans "REST API" %}" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# API docs #}
                 <li class="list-inline-item">
                   <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API documentation" %}">
-                    <i class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    <i title="{% trans "REST API documentation" %}" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# GraphQL API #}
                 {% if config.GRAPHQL_ENABLED %}
                   <li class="list-inline-item">
                     <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "GraphQL API" %}">
-                      <i class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                      <i title="{% trans "GraphQL API" %}" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                     </a>
                   </li>
                 {% endif %}
                 {# GitHub #}
                 <li class="list-inline-item">
                   <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Source Code" %}">
-                    <i class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    <i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# NetDev Slack #}
                 <li class="list-inline-item">
                   <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Community" %}">
-                    <i class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    <i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
               {% endblock footer_links %}

From 7b8fccb6908ca7bc76b58964f09bc20d3c0996c8 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 25 Jul 2024 16:27:55 -0400
Subject: [PATCH 3/4] Add translation support

---
 netbox/templates/dcim/inc/rack_elevation.html | 2 +-
 netbox/templates/extras/dashboard/widget.html | 4 ++--
 netbox/templates/generic/bulk_import.html     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/netbox/templates/dcim/inc/rack_elevation.html b/netbox/templates/dcim/inc/rack_elevation.html
index 5ab6a3f7df..33037c1ff8 100644
--- a/netbox/templates/dcim/inc/rack_elevation.html
+++ b/netbox/templates/dcim/inc/rack_elevation.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 <div style="margin-left: -30px">
-    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation" aria-label="Rack elevation"></object>
+    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation" aria-label="{% trans "Rack elevation" %}"></object>
 </div>
 <div class="text-center mt-3">
     <a class="btn btn-outline-primary" href="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" hx-boost="false">
diff --git a/netbox/templates/extras/dashboard/widget.html b/netbox/templates/extras/dashboard/widget.html
index cd57cb56d5..78e6c04dfb 100644
--- a/netbox/templates/extras/dashboard/widget.html
+++ b/netbox/templates/extras/dashboard/widget.html
@@ -15,7 +15,7 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
-        aria-label="{{ widget.title }} widget configuration"
+        aria-label="{{ widget.title }} {% trans "widget configuration" %}"
       >
         <i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
@@ -29,7 +29,7 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
-        aria-label="Close {{ widget.title }} widget"
+        aria-label="{% trans "Close widget" %} {{ widget.title }}"
       >
         <i class="mdi mdi-close {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
diff --git a/netbox/templates/generic/bulk_import.html b/netbox/templates/generic/bulk_import.html
index 967265858b..3a652d3e93 100644
--- a/netbox/templates/generic/bulk_import.html
+++ b/netbox/templates/generic/bulk_import.html
@@ -145,7 +145,7 @@ <h2 class="card-header">{% trans "Field Options" %}</h2>
                     {{ field.label }}
                   {% endif %}
                   {% if field.STATIC_CHOICES %}
-                    <a href="#" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices" aria-label="{{ name }} choices"><i class="mdi mdi-help-circle"></i></a>
+                    <a href="#" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices" aria-label="{{ name }} {% trans "choices" %}"><i class="mdi mdi-help-circle"></i></a>
                     <div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
                       <div class="modal-dialog" role="document">
                         <div class="modal-content">

From 152b432ba16b5bb1bcbd0918c656c09fb33fea64 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 25 Jul 2024 16:43:51 -0400
Subject: [PATCH 4/4] Add missing i18n

---
 netbox/templates/extras/dashboard/widget.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/netbox/templates/extras/dashboard/widget.html b/netbox/templates/extras/dashboard/widget.html
index 78e6c04dfb..7a2bf0f051 100644
--- a/netbox/templates/extras/dashboard/widget.html
+++ b/netbox/templates/extras/dashboard/widget.html
@@ -1,4 +1,5 @@
 {% load dashboard %}
+{% load i18n %}
 
 <div
     class="grid-stack-item"