From 1699f8b52ac15f687cc39088401c2641022c71cd Mon Sep 17 00:00:00 2001
From: Nina Menezes <nina.menezes@cabinetoffice.gov.uk>
Date: Fri, 2 Jun 2023 15:52:12 +0100
Subject: [PATCH] Fixed #34628 -- Improved icons accessibility of related
 widget wrapper in admin.

This improves accessibility of icons by making them larger and grayscale
(when not selected).
---
 django/contrib/admin/static/admin/css/widgets.css        | 9 +++------
 .../templates/admin/widgets/related_widget_wrapper.html  | 8 ++++----
 tests/admin_views/test_related_object_lookups.py         | 4 +++-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index 5f7adcb221..7f1f022c2e 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/django/contrib/admin/static/admin/css/widgets.css
@@ -579,16 +579,13 @@ ul.timelist, .timelist li {
 }
 
 .related-widget-wrapper-link {
-    opacity: 0.3;
+    opacity: .6;
+    filter: grayscale(1);
 }
 
 .related-widget-wrapper-link:link {
-    opacity: .8;
-}
-
-.related-widget-wrapper-link:link:focus,
-.related-widget-wrapper-link:link:hover {
     opacity: 1;
+    filter: grayscale(0);
 }
 
 select + .related-widget-wrapper-link,
diff --git a/django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html b/django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html
index 805f48b947..8e4356a95c 100644
--- a/django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html
+++ b/django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html
@@ -9,7 +9,7 @@
             data-href-template="{{ change_related_template_url }}?{{ url_params }}"
             data-popup="yes"
             title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}">
-            <img src="{% static 'admin/img/icon-changelink.svg' %}" alt="">
+            <img src="{% static 'admin/img/icon-changelink.svg' %}" alt="" width="20" height="20">
         </a>
         {% endif %}
         {% if can_add_related %}
@@ -17,7 +17,7 @@
             data-popup="yes"
             href="{{ add_related_url }}?{{ url_params }}"
             title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
-            <img src="{% static 'admin/img/icon-addlink.svg' %}" alt="">
+            <img src="{% static 'admin/img/icon-addlink.svg' %}" alt="" width="20" height="20">
         </a>
         {% endif %}
         {% if can_delete_related %}
@@ -25,14 +25,14 @@
             data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
             data-popup="yes"
             title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
-            <img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="">
+            <img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="" width="20" height="20">
         </a>
         {% endif %}
         {% if can_view_related %}
           <a class="related-widget-wrapper-link view-related" id="view_id_{{ name }}"
              data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
              title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
-            <img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="">
+            <img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="" width="20" height="20">
           </a>
         {% endif %}
         {% endif %}
diff --git a/tests/admin_views/test_related_object_lookups.py b/tests/admin_views/test_related_object_lookups.py
index d478214d90..145bf0d6de 100644
--- a/tests/admin_views/test_related_object_lookups.py
+++ b/tests/admin_views/test_related_object_lookups.py
@@ -16,7 +16,7 @@ class SeleniumTests(AdminSeleniumTestCase):
             username="super", password="secret", login_url=reverse("admin:index")
         )
 
-    def test_related_object_link_images_empty_alt(self):
+    def test_related_object_link_images_attributes(self):
         from selenium.webdriver.common.by import By
 
         album_add_url = reverse("admin:admin_views_album_add")
@@ -34,6 +34,8 @@ class SeleniumTests(AdminSeleniumTestCase):
                     By.XPATH, f'//*[@id="{link_id}"]/img'
                 )
                 self.assertEqual(link_image.get_attribute("alt"), "")
+                self.assertEqual(link_image.get_attribute("width"), "20")
+                self.assertEqual(link_image.get_attribute("height"), "20")
 
     def test_related_object_lookup_link_initial_state(self):
         from selenium.webdriver.common.by import By