Improve modal icon size and accessibility

ronilaukkarinen · Dec 17, 2023 · a475930 · a475930
1 parent 5b57d3d
commit a475930
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@
 * Add proportions for the new copy icon
 * Fix alignment for textual label links
 * Add styles for the new /start onboarding on 4.3.0
+* Improve modal icon size and accessibility
 
 ### 1.8.0: 2023-10-29
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -499,8 +499,12 @@ body.layout-multiple-columns {
   gap: 6px;
 }
 
-.layout-multiple-columns .media-modal__navigation .icon-times {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+/* Improve modal icon size and accessibility */
+.layout-multiple-columns .image-loader .icon,
+.layout-multiple-columns .media-modal__navigation .icon {
+  color: var(--color-light-text);
+  height: 32px;
+  width: 32px;
 }
 
 /* List adder input */

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -507,8 +507,12 @@ body.layout-single-column {
   gap: 6px;
 }
 
-.layout-single-column .media-modal__navigation .icon-times {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+/* Improve modal icon size and accessibility */
+.layout-single-column .image-loader .icon,
+.layout-single-column .media-modal__navigation .icon {
+  color: var(--color-light-text);
+  height: 32px;
+  width: 32px;
 }
 
 /* List adder input */