From 86661f2449fb0903f72b3522c68e146934013377 Mon Sep 17 00:00:00 2001 From: Tainara Palmeira Date: Fri, 15 Nov 2024 16:19:23 +0100 Subject: [PATCH] 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 --- .../admin/static/admin/css/dark_mode.css | 4 +- .../admin/static/admin/css/responsive.css | 72 ++----------------- .../admin/static/admin/css/responsive_rtl.css | 22 +----- django/contrib/admin/static/admin/css/rtl.css | 10 +-- .../admin/static/admin/css/widgets.css | 46 +++++++----- .../admin/static/admin/img/inline-delete.svg | 2 +- .../contrib/admin/templates/admin/base.html | 6 +- .../admin/widgets/related_widget_wrapper.html | 8 +-- .../test_related_object_lookups.py | 4 +- tests/admin_widgets/tests.py | 2 +- 10 files changed, 55 insertions(+), 121 deletions(-) diff --git a/django/contrib/admin/static/admin/css/dark_mode.css b/django/contrib/admin/static/admin/css/dark_mode.css index 7e12a81578..65b58d035f 100644 --- a/django/contrib/admin/static/admin/css/dark_mode.css +++ b/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; } diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css index 7d296b150f..9896d5ece2 100644 --- a/django/contrib/admin/static/admin/css/responsive.css +++ b/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 */ diff --git a/django/contrib/admin/static/admin/css/responsive_rtl.css b/django/contrib/admin/static/admin/css/responsive_rtl.css index f7c90adb23..fca8996595 100644 --- a/django/contrib/admin/static/admin/css/responsive_rtl.css +++ b/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; } } diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css index 5b55b63013..3ee008939e 100644 --- a/django/contrib/admin/static/admin/css/rtl.css +++ b/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 { diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index c8bf90b3b2..d3ccb24e57 100644 --- a/django/contrib/admin/static/admin/css/widgets.css +++ b/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 { diff --git a/django/contrib/admin/static/admin/img/inline-delete.svg b/django/contrib/admin/static/admin/img/inline-delete.svg index 17d1ad67cd..875115056e 100644 --- a/django/contrib/admin/static/admin/img/inline-delete.svg +++ b/django/contrib/admin/static/admin/img/inline-delete.svg @@ -1,3 +1,3 @@ - + diff --git a/django/contrib/admin/templates/admin/base.html b/django/contrib/admin/templates/admin/base.html index f4df6b30af..236d759483 100644 --- a/django/contrib/admin/templates/admin/base.html +++ b/django/contrib/admin/templates/admin/base.html @@ -115,9 +115,9 @@ - - - + + + {% block extrabody %}{% endblock extrabody %} 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 99b20545af..9251527aa5 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 %}"> - + {% endif %} {% if can_add_related %} @@ -17,7 +17,7 @@ data-popup="yes" href="{{ add_related_url }}?{{ url_params }}" title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}"> - + {% 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 %}"> - + {% endif %} {% if can_view_related %} - + {% endif %} {% endif %} diff --git a/tests/admin_views/test_related_object_lookups.py b/tests/admin_views/test_related_object_lookups.py index b591117460..968558491c 100644 --- a/tests/admin_views/test_related_object_lookups.py +++ b/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 diff --git a/tests/admin_widgets/tests.py b/tests/admin_widgets/tests.py index a81f5802d1..15e11a6d8f 100644 --- a/tests/admin_widgets/tests.py +++ b/tests/admin_widgets/tests.py @@ -959,7 +959,7 @@ class RelatedFieldWidgetWrapperTests(SimpleTestCase): - + """