From 74c89deb20478a1e5cda9e46f5057e72cbd60476 Mon Sep 17 00:00:00 2001
From: Andrew Gormley <andrewgormley91@gmail.com>
Date: Thu, 25 Jul 2024 22:12:19 +0100
Subject: [PATCH] fixed 16852: misc accessbility problems (#16977)

* fixed 16852: misc accessbility problems

* Restore tooltip text

* Add translation support

* Add missing i18n

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
---
 netbox/templates/base/layout.html                    | 12 ++++++------
 netbox/templates/dcim/inc/rack_elevation.html        |  2 +-
 netbox/templates/extras/dashboard/widget.html        |  3 +++
 netbox/templates/generic/bulk_import.html            |  2 +-
 .../templates/helpers/table_config_form.html         |  8 ++++----
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index cb6dc4dfc..c760c9163 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -147,39 +147,39 @@ Blocks:
               {% block footer_links %}
                 {# Documentation #}
                 <li class="list-inline-item">
-                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener">
+                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Docs" %}">
                     <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">
+                  <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API" %}">
                     <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">
+                  <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API documentation" %}">
                     <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">
+                    <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "GraphQL API" %}">
                       <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">
+                  <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Source Code" %}">
                     <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">
+                  <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Community" %}">
                     <i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
diff --git a/netbox/templates/dcim/inc/rack_elevation.html b/netbox/templates/dcim/inc/rack_elevation.html
index 03a847e33..33037c1ff 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="{% 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 51b40342e..7a2bf0f05 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"
@@ -15,6 +16,7 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
+        aria-label="{{ widget.title }} {% trans "widget configuration" %}"
       >
         <i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
@@ -28,6 +30,7 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
+        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 8514bf900..3a652d3e9 100644
--- a/netbox/templates/generic/bulk_import.html
+++ b/netbox/templates/generic/bulk_import.html
@@ -145,7 +145,7 @@ Context:
                     {{ 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 }} {% 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">
diff --git a/netbox/utilities/templates/helpers/table_config_form.html b/netbox/utilities/templates/helpers/table_config_form.html
index c3a79cfbf..e8cee4bfe 100644
--- a/netbox/utilities/templates/helpers/table_config_form.html
+++ b/netbox/utilities/templates/helpers/table_config_form.html
@@ -16,10 +16,10 @@
           </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 @@
           <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>