Fixed #35791 -- Updated icon button dimensions to 24x24 pixels.

This is to meet the WCAG 2.5.8 minimum size requirement.

Co-authored-by: Eva Nanyonga <evewish@gmail.com>

django/contrib/admin/static/admin/css/dark_mode.css

@@ -84,8 +84,8 @@ html[data-theme="dark"] {
 
 .theme-toggle svg {
     vertical-align: middle;
-    height: 1rem;
-    width: 1rem;
+    height: 1.5rem;
+    width: 1.5rem;
     display: none;
 }
 

django/contrib/admin/static/admin/css/responsive.css

@@ -277,28 +277,6 @@ input[type="submit"], button {
         margin-bottom: 5px;
     }
 
-    .selector ul.selector-chooser {
-        width: 26px;
-        height: 52px;
-        padding: 2px 0;
-        border-radius: 20px;
-        transform: translateY(-10px);
-    }
-
-    .selector-add, .selector-remove {
-        width: 20px;
-        height: 20px;
-        background-size: 20px auto;
-    }
-
-    .selector-add {
-        background-position: 0 -120px;
-    }
-
-    .selector-remove {
-        background-position: 0 -80px;
-    }
-
     .selector-chooseall, .selector-clearall {
         align-self: center;
     }
@@ -321,8 +299,6 @@ input[type="submit"], button {
     }
 
     .stacked ul.selector-chooser {
-        width: 52px;
-        height: 26px;
         padding: 0 2px;
         transform: none;
     }
@@ -331,42 +307,6 @@ input[type="submit"], button {
         padding: 3px;
     }
 
-    .stacked .selector-add, .stacked .selector-remove {
-        background-size: 20px auto;
-    }
-
-    .stacked .selector-add {
-        background-position: 0 -40px;
-    }
-
-    .stacked .active.selector-add {
-        background-position: 0 -40px;
-    }
-
-    .active.selector-add:focus, .active.selector-add:hover {
-        background-position: 0 -140px;
-    }
-
-    .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
-        background-position: 0 -60px;
-    }
-
-    .stacked .selector-remove {
-        background-position: 0 0;
-    }
-
-    .stacked .active.selector-remove {
-        background-position: 0 0;
-    }
-
-    .active.selector-remove:focus, .active.selector-remove:hover {
-        background-position: 0 -100px;
-    }
-
-    .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
-        background-position: 0 -20px;
-    }
-
     .help-tooltip, .selector .help-icon {
         display: none;
     }
@@ -680,9 +620,9 @@ input[type="submit"], button {
     }
 
     .selector ul.selector-chooser {
-        display: block;
-        width: 52px;
-        height: 26px;
+        display: flex;
+        width: 60px;
+        height: 30px;
         padding: 0 2px;
         transform: none;
     }
@@ -696,15 +636,15 @@ input[type="submit"], button {
     }
 
     .active.selector-remove:focus, .active.selector-remove:hover {
-        background-position: 0 -20px;
+        background-position: 0 -24px;
     }
 
     .selector-add  {
-        background-position: 0 -40px;
+        background-position: 0 -48px;
     }
 
     .active.selector-add:focus, .active.selector-add:hover {
-        background-position: 0 -60px;
+        background-position: 0 -72px;
     }
 
     /* Inlines */

django/contrib/admin/static/admin/css/responsive_rtl.css

@@ -52,22 +52,6 @@
         padding-left: 0;
         padding-right: 16px;
     }
-
-    [dir="rtl"] .selector-add {
-        background-position: 0 -80px;
-    }
-
-    [dir="rtl"] .selector-remove {
-        background-position: 0 -120px;
-    }
-
-    [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
-        background-position: 0 -100px;
-    }
-
-    [dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
-        background-position: 0 -140px;
-    }
 }
 
 /* MOBILE */
@@ -97,14 +81,14 @@
     }
 
     [dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
-        background-position: 0 -20px;
+        background-position: 0 -24px;
     }
 
     [dir="rtl"] .selector-add  {
-        background-position: 0 -40px;
+        background-position: 0 -48px;
     }
 
     [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
-        background-position: 0 -60px;
+        background-position: 0 -72px;
     }
 }

django/contrib/admin/static/admin/css/rtl.css

@@ -220,19 +220,21 @@ fieldset .fieldBox {
 }
 
 .selector-add {
-  background: url(../img/selector-icons.svg) 0 -64px no-repeat;
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background-size: 24px auto;
 }
 
 .active.selector-add:focus, .active.selector-add:hover {
-  background-position: 0 -80px;
+    background-position: 0 -120px;
 }
 
 .selector-remove {
-  background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background: url(../img/selector-icons.svg) 0 -144px no-repeat;
+    background-size: 24px auto;
 }
 
 .active.selector-remove:focus, .active.selector-remove:hover {
-  background-position: 0 -112px;
+    background-position: 0 -168px;
 }
 
 .selector-chooseall {

django/contrib/admin/static/admin/css/widgets.css

@@ -93,7 +93,7 @@
 
 .selector ul.selector-chooser {
     align-self: center;
-    width: 22px;
+    width: 30px;
     background-color: var(--selected-bg);
     border-radius: 10px;
     margin: 0;
@@ -123,8 +123,8 @@
 }
 
 .selector-add, .selector-remove {
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     display: block;
     text-indent: -3000px;
     overflow: hidden;
@@ -142,19 +142,21 @@
 }
 
 .selector-add {
-    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background: url(../img/selector-icons.svg) 0 -144px no-repeat;
+    background-size: 24px auto;
 }
 
 .active.selector-add:focus, .active.selector-add:hover {
-    background-position: 0 -112px;
+    background-position: 0 -168px;
 }
 
 .selector-remove {
-    background: url(../img/selector-icons.svg) 0 -64px no-repeat;
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background-size: 24px auto;
 }
 
 .active.selector-remove:focus, .active.selector-remove:hover {
-    background-position: 0 -80px;
+    background-position: 0 -120px;
 }
 
 .selector-chooseall, .selector-clearall {
@@ -230,8 +232,9 @@
 }
 
 .stacked ul.selector-chooser {
-    height: 22px;
-    width: 50px;
+    display: flex;
+    height: 30px;
+    width: 64px;
     margin: 0 0 10px 40%;
     background-color: #eee;
     border-radius: 10px;
@@ -248,22 +251,24 @@
 }
 
 .stacked .selector-add {
-    background: url(../img/selector-icons.svg) 0 -32px no-repeat;
+    background: url(../img/selector-icons.svg) 0 -48px no-repeat;
+    background-size: 24px auto;
     cursor: default;
 }
 
 .stacked .active.selector-add {
-    background-position: 0 -32px;
+    background-position: 0 -48px;
     cursor: pointer;
 }
 
 .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
-    background-position: 0 -48px;
+    background-position: 0 -72px;
     cursor: pointer;
 }
 
 .stacked .selector-remove {
     background: url(../img/selector-icons.svg) 0 0 no-repeat;
+    background-size: 24px auto;
     cursor: default;
 }
 
@@ -273,7 +278,7 @@
 }
 
 .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
-    background-position: 0 -16px;
+    background-position: 0 -24px;
     cursor: pointer;
 }
 
@@ -329,28 +334,30 @@ table p.datetime {
     position: relative;
     display: inline-block;
     vertical-align: middle;
-    height: 16px;
-    width: 16px;
+    height: 24px;
+    width: 24px;
     overflow: hidden;
 }
 
 .datetimeshortcuts .clock-icon {
     background: url(../img/icon-clock.svg) 0 0 no-repeat;
+    background-size: 24px auto;
 }
 
 .datetimeshortcuts a:focus .clock-icon,
 .datetimeshortcuts a:hover .clock-icon {
-    background-position: 0 -16px;
+    background-position: 0 -24px;
 }
 
 .datetimeshortcuts .date-icon {
     background: url(../img/icon-calendar.svg) 0 0 no-repeat;
+    background-size: 24px auto;
     top: -1px;
 }
 
 .datetimeshortcuts a:focus .date-icon,
 .datetimeshortcuts a:hover .date-icon {
-    background-position: 0 -16px;
+    background-position: 0 -24px;
 }
 
 .timezonewarning {
@@ -569,9 +576,10 @@ ul.timelist, .timelist li {
     float: right;
     text-indent: -9999px;
     background: url(../img/inline-delete.svg) 0 0 no-repeat;
-    width: 16px;
-    height: 16px;
+    width: 1.5rem;
+    height: 1.5rem;
     border: 0px none;
+    margin-bottom: .25rem;
 }
 
 .inline-deletelink:focus, .inline-deletelink:hover {

django/contrib/admin/static/admin/img/inline-delete.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
   <path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
 </svg>

django/contrib/admin/templates/admin/base.html

@@ -115,9 +115,9 @@
 
 <!-- SVGs -->
 <svg xmlns="http://www.w3.org/2000/svg" class="base-svgs">
-  <symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></symbol>
-  <symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol>
-  <symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol>
+  <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></symbol>
+  <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol>
+  <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol>
 </svg>
 <!-- END SVGs -->
 {% block extrabody %}{% endblock extrabody %}

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="" width="20" height="20">
+            <img src="{% static 'admin/img/icon-changelink.svg' %}" alt="" width="24" height="24">
         </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="" width="20" height="20">
+            <img src="{% static 'admin/img/icon-addlink.svg' %}" alt="" width="24" height="24">
         </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="" width="20" height="20">
+            <img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="" width="24" height="24">
         </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="" width="20" height="20">
+            <img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="" width="24" height="24">
           </a>
         {% endif %}
         {% endif %}

tests/admin_views/test_related_object_lookups.py

@@ -36,8 +36,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")
+                self.assertEqual(link_image.get_attribute("width"), "24")
+                self.assertEqual(link_image.get_attribute("height"), "24")
 
     def test_related_object_lookup_link_initial_state(self):
         from selenium.webdriver.common.by import By

tests/admin_widgets/tests.py

@@ -959,7 +959,7 @@ class RelatedFieldWidgetWrapperTests(SimpleTestCase):
           <a class="related-widget-wrapper-link add-related" id="add_id_stream"
              data-popup="yes" title="Add another release event"
              href="/admin_widgets/releaseevent/add/?_to_field=album&amp;_popup=1">
-            <img src="/static/admin/img/icon-addlink.svg" alt="" width="20" height="20">
+            <img src="/static/admin/img/icon-addlink.svg" alt="" width="24" height="24">
           </a>
         </div>
         """