fixed 16852: misc accessbility problems #16977

andrewgormley · 2024-07-24T20:38:02Z

Fixes: #16852

(Racks) Rack elevation objects missing alt text [Multiple]
(Misc) Info hotspot missing link text [Multiple]
(Configure Table) some buttons are skipped when tabbing through the modal [Multiple]
(Footer) Missing link text [Global]
(Dashboard) Module actions missing text [Single]

jeremystretch · 2024-07-25T20:14:20Z

netbox/templates/base/layout.html

-                  <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>


We need to keep the title text on each of these anchor elements to preserve the tooltip on hover.

jeremystretch · 2024-07-25T20:16:33Z

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>


Remember to wrap any new labels with the trans (translate) template tag to ensure internationalization support. (In some cases it may be necessary to also include {% load i18n %} at the top of the file, if it's not already there.)

Suggested change

<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>

jeremystretch · 2024-07-25T20:16:57Z

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"


Suggested change

aria-label="{{ widget.title }} widget configuration"

aria-label="{{ widget.title }} {% trans "widget configuration" %}"

jeremystretch · 2024-07-25T20:17:09Z

netbox/templates/extras/dashboard/widget.html

@@ -28,6 +29,7 @@
        hx-target="#htmx-modal-content"
        data-bs-toggle="modal"
        data-bs-target="#htmx-modal"
+        aria-label="Close {{ widget.title }} widget"


Suggested change

aria-label="Close {{ widget.title }} widget"

aria-label="{% blocktranslate %}Close {{ widget.title }} {% endblocktranslate %}"

jeremystretch · 2024-07-25T20:20:24Z

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>


Suggested change

<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>

* 16649 general contrast issues (#16759) * fixes #16647: navigation contrast issues updated * fixes #16651: table contrast issues new * fixed #16649: general contrast issues * fixes #16649: feedback changes --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband> * 16648 dashboard contrast issues (#16824) * fixed #16648: dashboard contrast issues * reinstate amendment to 16649 * fixed #16648: created gridstack override and removed inline bug fix --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> * fixed #16853: accessibility issues * fixed #16847: updated font (#16848) * fixed #16847: updated font * fixed #16847: changed font to local and added current font as fallback * fixed #16847: removed inter and added padding to page header --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * 16849 document hierarchy issues (#16875) * fixed #16849: h elements not in sequential order * fixed #16849: Lists do not contain only li elements * fixed #16849: fixed h hierarchy on rack object pages * Remove standalone h5 classes * Remove unnecessary line breaks --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * 16650 button contrast issues (#16845) * fixed #16650: button contrast issues * fixed #16650: green bg text contrast issue * Revert errant JS resource updates * Revert custom button colors * Fix indentation --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * 16907 web UI refresh (#16915) * closes #16907: web ui refresh * closes #16907: changed default widget color to primary color * closes #16907: removed comma * Revert dashboard widget color changes * Rename logo images for consistency * Restore original dashboard widget config * Remove .navbar-brand-autodark from logo * Restore logo file names --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * 16394 distinguish product edition (#16924) * closes #16907: web ui refresh * closes #16907: changed default widget color to primary color * closes #16907: removed comma * closes #16394: distinguish product edition * Revert dashboard changes * Clean up redundant styling (merge error) * removed labs logo and added sub text for all editions * fixed motif bug * Fix "flashing" of side nav under dark mode * Use title case for edition label * altered edition text style --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * Query release features to toggle commercial theme * fixes dark mode primary button contrast issue * fixes #16913: hidden admin nav link (#16978) Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * 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> * fixes issues in #16850 (#16986) * fixes issues in #16850: issue 3 and 5 * Add link text for 'clear' button on table column * Translate aria label --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com> * Use alternate footer links for commercial releases * Remove Inter font * Adjust base font weight to 500 * Retain default text color for hyperlinks inside tables * Logo & edition cleanup * Move dashboard styling * Misc cleanup * Remove unused styles * Misc cleanup & refactoring --------- Co-authored-by: Andrew Gormley <andrewgormley91@gmail.com> Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>

fixed 16852: misc accessbility problems

95c95bb

andrewgormley requested a review from jeremystretch July 24, 2024 20:38

andrewgormley self-assigned this Jul 24, 2024

andrewgormley added this to the v4.1 milestone Jul 24, 2024

andrewgormley mentioned this pull request Jul 24, 2024

Misc Accessibility problems #16852

Closed

6 tasks

jeremystretch requested changes Jul 25, 2024

View reviewed changes

jeremystretch added 2 commits July 25, 2024 16:23

Restore tooltip text

403c45e

Add translation support

7b8fccb

jeremystretch approved these changes Jul 25, 2024

View reviewed changes

Add missing i18n

152b432

jeremystretch merged commit 74c89de into netbox-community:feature-ui Jul 25, 2024
3 checks passed

github-actions bot locked as resolved and limited conversation to collaborators Aug 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fixed 16852: misc accessbility problems #16977

fixed 16852: misc accessbility problems #16977

andrewgormley commented Jul 24, 2024

jeremystretch Jul 25, 2024

jeremystretch Jul 25, 2024

jeremystretch Jul 25, 2024

jeremystretch Jul 25, 2024

jeremystretch Jul 25, 2024

	<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>

	aria-label="{{ widget.title }} widget configuration"
	aria-label="{{ widget.title }} {% trans "widget configuration" %}"

	aria-label="Close {{ widget.title }} widget"
	aria-label="{% blocktranslate %}Close {{ widget.title }} {% endblocktranslate %}"

	<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>

fixed 16852: misc accessbility problems #16977

fixed 16852: misc accessbility problems #16977

Conversation

andrewgormley commented Jul 24, 2024

Fixes: #16852

jeremystretch Jul 25, 2024

Choose a reason for hiding this comment

jeremystretch Jul 25, 2024

Choose a reason for hiding this comment

jeremystretch Jul 25, 2024

Choose a reason for hiding this comment

jeremystretch Jul 25, 2024

Choose a reason for hiding this comment

jeremystretch Jul 25, 2024

Choose a reason for hiding this comment