fix(forms): replace encoded background images with inline SVGs (#691)

- Mitigate radio, checkbox, and toggle mark [visibility problems](https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html#background-images-are-mostly-ignored) in Windows hi-contrast mode - Eradicate all remaining usage of inline data URLs as background images in `react-components` – alleviating the potential need for `img-src 'self' data:` CSP (Content Security Policy) flags in order to use Garden components
zendeskgarden · Apr 3, 2020 · b0f5896 · b0f5896
1 parent 707da5f
commit b0f5896
Show file tree

Hide file tree

Showing 47 changed files with 445 additions and 273 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -11,6 +11,7 @@
     "value-keyword-case": ["lower", { ignoreKeywords: ['dummyValue'] }],
     "block-no-empty": null,
     "number-leading-zero": null,
+    "selector-type-case": null,
     "selector-type-no-unknown": null
   }
 }
diff --git a/packages/accordions/package.json b/packages/accordions/package.json
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^8.4.1",
-    "@zendeskgarden/svg-icons": "6.13.1"
+    "@zendeskgarden/svg-icons": "6.15.0"
   },
   "keywords": [
     "accordions",

diff --git a/packages/accordions/yarn.lock b/packages/accordions/yarn.lock
@@ -23,19 +23,19 @@
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-"@zendeskgarden/react-theming@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.2.0.tgz#77c300f9ff9d2ea866571246f69d9005607dd7db"
-  integrity sha512-t7GvHPFym4eksIXLjW/zZv1XTqdi88G8M8w1X9vQDggZh1XeIPxAezEGQT/rnS0Yk0o7xYCPWjsqPmutG1/gtw==
+"@zendeskgarden/react-theming@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.4.1.tgz#8dd2a165a0146c31cc093e733c544895a0837f4c"
+  integrity sha512-KHTP09GpJQf+5+0ax6ONHwsXDxCsJy3PmWQ9nMv5poAsLzpocVp+E8P3rxwjuK1cnxD13cwtcrZ0MHSIA0E7Vg==
   dependencies:
     "@zendeskgarden/container-focusvisible" "^0.4.3"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/svg-icons@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.13.1.tgz#7e4e6844dae773bc0e1f59e6c01098cdf93a2b96"
-  integrity sha512-MWqWsjWOYm76Rtv/jgfKDv6Y4K6QeqVjLZh9KN19yH/j/P+1RVwERK8HzJUHxRqvj6DGAe+RZxor9N4B+/kXzA==
+"@zendeskgarden/svg-icons@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.15.0.tgz#cb7f890b86d3ffe83e7b6fae83db2f776594d4af"
+  integrity sha512-OMkA3pWbwY7fviZFC29ZEBJp/Ue73w+PhbB4bKQLTp6UyK97crHTZzyPhJU/GnhOp1ubOvJii3tlJgYzg4r9KA==
 
 polished@^3.4.4:
   version "3.4.4"

diff --git a/packages/breadcrumbs/.size-snapshot.json b/packages/breadcrumbs/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 7931,
-    "minified": 5548,
-    "gzipped": 1803
+    "bundled": 8022,
+    "minified": 5647,
+    "gzipped": 1840
   },
   "dist/index.esm.js": {
-    "bundled": 7526,
-    "minified": 5196,
-    "gzipped": 1725,
+    "bundled": 7617,
+    "minified": 5295,
+    "gzipped": 1759,
     "treeshaked": {
       "rollup": {
-        "code": 3982,
+        "code": 4081,
         "import_statements": 308
       },
       "webpack": {
-        "code": 5211
+        "code": 5310
       }
     }
   }

diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^8.4.1",
-    "@zendeskgarden/svg-icons": "6.13.1"
+    "@zendeskgarden/svg-icons": "6.15.0"
   },
   "keywords": [
     "components",

diff --git a/packages/breadcrumbs/yarn.lock b/packages/breadcrumbs/yarn.lock
@@ -35,19 +35,19 @@
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-"@zendeskgarden/react-theming@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.2.0.tgz#77c300f9ff9d2ea866571246f69d9005607dd7db"
-  integrity sha512-t7GvHPFym4eksIXLjW/zZv1XTqdi88G8M8w1X9vQDggZh1XeIPxAezEGQT/rnS0Yk0o7xYCPWjsqPmutG1/gtw==
+"@zendeskgarden/react-theming@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.4.1.tgz#8dd2a165a0146c31cc093e733c544895a0837f4c"
+  integrity sha512-KHTP09GpJQf+5+0ax6ONHwsXDxCsJy3PmWQ9nMv5poAsLzpocVp+E8P3rxwjuK1cnxD13cwtcrZ0MHSIA0E7Vg==
   dependencies:
     "@zendeskgarden/container-focusvisible" "^0.4.3"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/svg-icons@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.13.1.tgz#7e4e6844dae773bc0e1f59e6c01098cdf93a2b96"
-  integrity sha512-MWqWsjWOYm76Rtv/jgfKDv6Y4K6QeqVjLZh9KN19yH/j/P+1RVwERK8HzJUHxRqvj6DGAe+RZxor9N4B+/kXzA==
+"@zendeskgarden/svg-icons@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.15.0.tgz#cb7f890b86d3ffe83e7b6fae83db2f776594d4af"
+  integrity sha512-OMkA3pWbwY7fviZFC29ZEBJp/Ue73w+PhbB4bKQLTp6UyK97crHTZzyPhJU/GnhOp1ubOvJii3tlJgYzg4r9KA==
 
 polished@^3.4.4:
   version "3.4.4"

diff --git a/packages/buttons/.size-snapshot.json b/packages/buttons/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 22624,
-    "minified": 16200,
-    "gzipped": 4153
+    "bundled": 22668,
+    "minified": 16252,
+    "gzipped": 4217
   },
   "dist/index.esm.js": {
-    "bundled": 21779,
-    "minified": 15420,
-    "gzipped": 4036,
+    "bundled": 21823,
+    "minified": 15472,
+    "gzipped": 4103,
     "treeshaked": {
       "rollup": {
-        "code": 12012,
+        "code": 12064,
         "import_statements": 383
       },
       "webpack": {
-        "code": 13883
+        "code": 13935
       }
     }
   }

diff --git a/packages/buttons/package.json b/packages/buttons/package.json
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^8.4.1",
-    "@zendeskgarden/svg-icons": "6.13.1"
+    "@zendeskgarden/svg-icons": "6.15.0"
   },
   "keywords": [
     "components",

diff --git a/packages/buttons/yarn.lock b/packages/buttons/yarn.lock
@@ -49,19 +49,19 @@
   resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-0.5.1.tgz#738dc99dbe4a98809fdc015e5a8e000997725876"
   integrity sha512-+nswWqFEiWHkuQeYSdftJ5c3Xy48IHPKb23qktIeEl+ZibMXzWVytdg91zOerI/HGJizNJ0gKmq+0A/4//eiQQ==
 
-"@zendeskgarden/react-theming@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.2.0.tgz#77c300f9ff9d2ea866571246f69d9005607dd7db"
-  integrity sha512-t7GvHPFym4eksIXLjW/zZv1XTqdi88G8M8w1X9vQDggZh1XeIPxAezEGQT/rnS0Yk0o7xYCPWjsqPmutG1/gtw==
+"@zendeskgarden/react-theming@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.4.1.tgz#8dd2a165a0146c31cc093e733c544895a0837f4c"
+  integrity sha512-KHTP09GpJQf+5+0ax6ONHwsXDxCsJy3PmWQ9nMv5poAsLzpocVp+E8P3rxwjuK1cnxD13cwtcrZ0MHSIA0E7Vg==
   dependencies:
     "@zendeskgarden/container-focusvisible" "^0.4.3"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/svg-icons@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.13.1.tgz#7e4e6844dae773bc0e1f59e6c01098cdf93a2b96"
-  integrity sha512-MWqWsjWOYm76Rtv/jgfKDv6Y4K6QeqVjLZh9KN19yH/j/P+1RVwERK8HzJUHxRqvj6DGAe+RZxor9N4B+/kXzA==
+"@zendeskgarden/svg-icons@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.15.0.tgz#cb7f890b86d3ffe83e7b6fae83db2f776594d4af"
+  integrity sha512-OMkA3pWbwY7fviZFC29ZEBJp/Ue73w+PhbB4bKQLTp6UyK97crHTZzyPhJU/GnhOp1ubOvJii3tlJgYzg4r9KA==
 
 polished@^3.4.4:
   version "3.4.4"

diff --git a/packages/chrome/.size-snapshot.json b/packages/chrome/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 51066,
-    "minified": 38725,
-    "gzipped": 7134
+    "bundled": 51156,
+    "minified": 38823,
+    "gzipped": 7168
   },
   "dist/index.esm.js": {
-    "bundled": 48768,
-    "minified": 36515,
-    "gzipped": 6964,
+    "bundled": 48858,
+    "minified": 36613,
+    "gzipped": 6999,
     "treeshaked": {
       "rollup": {
-        "code": 27296,
+        "code": 27394,
         "import_statements": 530
       },
       "webpack": {
-        "code": 30693
+        "code": 30791
       }
     }
   }

diff --git a/packages/chrome/package.json b/packages/chrome/package.json
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^8.4.1",
-    "@zendeskgarden/svg-icons": "6.13.1"
+    "@zendeskgarden/svg-icons": "6.15.0"
   },
   "keywords": [
     "components",

diff --git a/packages/chrome/yarn.lock b/packages/chrome/yarn.lock
@@ -43,19 +43,19 @@
   resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-0.5.1.tgz#738dc99dbe4a98809fdc015e5a8e000997725876"
   integrity sha512-+nswWqFEiWHkuQeYSdftJ5c3Xy48IHPKb23qktIeEl+ZibMXzWVytdg91zOerI/HGJizNJ0gKmq+0A/4//eiQQ==
 
-"@zendeskgarden/react-theming@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.2.0.tgz#77c300f9ff9d2ea866571246f69d9005607dd7db"
-  integrity sha512-t7GvHPFym4eksIXLjW/zZv1XTqdi88G8M8w1X9vQDggZh1XeIPxAezEGQT/rnS0Yk0o7xYCPWjsqPmutG1/gtw==
+"@zendeskgarden/react-theming@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.4.1.tgz#8dd2a165a0146c31cc093e733c544895a0837f4c"
+  integrity sha512-KHTP09GpJQf+5+0ax6ONHwsXDxCsJy3PmWQ9nMv5poAsLzpocVp+E8P3rxwjuK1cnxD13cwtcrZ0MHSIA0E7Vg==
   dependencies:
     "@zendeskgarden/container-focusvisible" "^0.4.3"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/svg-icons@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.13.1.tgz#7e4e6844dae773bc0e1f59e6c01098cdf93a2b96"
-  integrity sha512-MWqWsjWOYm76Rtv/jgfKDv6Y4K6QeqVjLZh9KN19yH/j/P+1RVwERK8HzJUHxRqvj6DGAe+RZxor9N4B+/kXzA==
+"@zendeskgarden/svg-icons@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.15.0.tgz#cb7f890b86d3ffe83e7b6fae83db2f776594d4af"
+  integrity sha512-OMkA3pWbwY7fviZFC29ZEBJp/Ue73w+PhbB4bKQLTp6UyK97crHTZzyPhJU/GnhOp1ubOvJii3tlJgYzg4r9KA==
 
 polished@^3.4.4:
   version "3.4.4"

diff --git a/packages/datepickers/.size-snapshot.json b/packages/datepickers/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 130072,
-    "minified": 72894,
-    "gzipped": 16133
+    "bundled": 130155,
+    "minified": 72993,
+    "gzipped": 16203
   },
   "dist/index.esm.js": {
-    "bundled": 128857,
-    "minified": 71730,
-    "gzipped": 16073,
+    "bundled": 128940,
+    "minified": 71829,
+    "gzipped": 16145,
     "treeshaked": {
       "rollup": {
-        "code": 59047,
+        "code": 59146,
         "import_statements": 483
       },
       "webpack": {
-        "code": 61764
+        "code": 61863
       }
     }
   }

diff --git a/packages/datepickers/package.json b/packages/datepickers/package.json
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^8.4.1",
-    "@zendeskgarden/svg-icons": "6.13.1"
+    "@zendeskgarden/svg-icons": "6.15.0"
   },
   "keywords": [
     "components",

diff --git a/packages/datepickers/yarn.lock b/packages/datepickers/yarn.lock
@@ -28,19 +28,19 @@
   resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-0.5.1.tgz#738dc99dbe4a98809fdc015e5a8e000997725876"
   integrity sha512-+nswWqFEiWHkuQeYSdftJ5c3Xy48IHPKb23qktIeEl+ZibMXzWVytdg91zOerI/HGJizNJ0gKmq+0A/4//eiQQ==
 
-"@zendeskgarden/react-theming@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.2.0.tgz#77c300f9ff9d2ea866571246f69d9005607dd7db"
-  integrity sha512-t7GvHPFym4eksIXLjW/zZv1XTqdi88G8M8w1X9vQDggZh1XeIPxAezEGQT/rnS0Yk0o7xYCPWjsqPmutG1/gtw==
+"@zendeskgarden/react-theming@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.4.1.tgz#8dd2a165a0146c31cc093e733c544895a0837f4c"
+  integrity sha512-KHTP09GpJQf+5+0ax6ONHwsXDxCsJy3PmWQ9nMv5poAsLzpocVp+E8P3rxwjuK1cnxD13cwtcrZ0MHSIA0E7Vg==
   dependencies:
     "@zendeskgarden/container-focusvisible" "^0.4.3"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/svg-icons@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.13.1.tgz#7e4e6844dae773bc0e1f59e6c01098cdf93a2b96"
-  integrity sha512-MWqWsjWOYm76Rtv/jgfKDv6Y4K6QeqVjLZh9KN19yH/j/P+1RVwERK8HzJUHxRqvj6DGAe+RZxor9N4B+/kXzA==
+"@zendeskgarden/svg-icons@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.15.0.tgz#cb7f890b86d3ffe83e7b6fae83db2f776594d4af"
+  integrity sha512-OMkA3pWbwY7fviZFC29ZEBJp/Ue73w+PhbB4bKQLTp6UyK97crHTZzyPhJU/GnhOp1ubOvJii3tlJgYzg4r9KA==
 
 create-react-context@^0.3.0:
   version "0.3.0"

diff --git a/packages/dropdowns/.size-snapshot.json b/packages/dropdowns/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 75553,
-    "minified": 48650,
-    "gzipped": 10076
+    "bundled": 75770,
+    "minified": 48899,
+    "gzipped": 10277
   },
   "dist/index.esm.js": {
-    "bundled": 72862,
-    "minified": 46071,
-    "gzipped": 9912,
+    "bundled": 73079,
+    "minified": 46320,
+    "gzipped": 10108,
     "treeshaked": {
       "rollup": {
-        "code": 35324,
+        "code": 35573,
         "import_statements": 807
       },
       "webpack": {
-        "code": 39290
+        "code": 39539
       }
     }
   }

diff --git a/packages/dropdowns/package.json b/packages/dropdowns/package.json
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.6",
     "@zendeskgarden/react-theming": "^8.4.1",
-    "@zendeskgarden/svg-icons": "6.13.1",
+    "@zendeskgarden/svg-icons": "6.15.0",
     "lodash.debounce": "4.0.8"
   },
   "keywords": [

diff --git a/packages/dropdowns/yarn.lock b/packages/dropdowns/yarn.lock
@@ -55,28 +55,28 @@
   resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-0.5.1.tgz#738dc99dbe4a98809fdc015e5a8e000997725876"
   integrity sha512-+nswWqFEiWHkuQeYSdftJ5c3Xy48IHPKb23qktIeEl+ZibMXzWVytdg91zOerI/HGJizNJ0gKmq+0A/4//eiQQ==
 
-"@zendeskgarden/react-forms@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.2.0.tgz#3a6a48ac239a1034865aabf2cf6047e514bb0be5"
-  integrity sha512-g/8MFj8JWsg1mc5uhz9EqhKLTWQmnnvDBzw9dCjj7QiHHFBdazUYiInffh90xqDphplpH6bhFAwuR2qeKERRdQ==
+"@zendeskgarden/react-forms@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.4.1.tgz#06555831975a1e8df9a9342058cad506545d8722"
+  integrity sha512-+815DI+9DMMF5m7V4AnQrXH8Ak/RpBqmrbVJJuDQWjhMdXSKaV0AfdCDUbW0YzNQrxgN2v4cmhBNEIdGvmDmGg==
   dependencies:
     "@zendeskgarden/container-field" "^1.3.1"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/react-theming@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.2.0.tgz#77c300f9ff9d2ea866571246f69d9005607dd7db"
-  integrity sha512-t7GvHPFym4eksIXLjW/zZv1XTqdi88G8M8w1X9vQDggZh1XeIPxAezEGQT/rnS0Yk0o7xYCPWjsqPmutG1/gtw==
+"@zendeskgarden/react-theming@^8.4.0":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.4.1.tgz#8dd2a165a0146c31cc093e733c544895a0837f4c"
+  integrity sha512-KHTP09GpJQf+5+0ax6ONHwsXDxCsJy3PmWQ9nMv5poAsLzpocVp+E8P3rxwjuK1cnxD13cwtcrZ0MHSIA0E7Vg==
   dependencies:
     "@zendeskgarden/container-focusvisible" "^0.4.3"
     "@zendeskgarden/container-utilities" "^0.5.1"
     polished "^3.4.4"
 
-"@zendeskgarden/svg-icons@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.13.1.tgz#7e4e6844dae773bc0e1f59e6c01098cdf93a2b96"
-  integrity sha512-MWqWsjWOYm76Rtv/jgfKDv6Y4K6QeqVjLZh9KN19yH/j/P+1RVwERK8HzJUHxRqvj6DGAe+RZxor9N4B+/kXzA==
+"@zendeskgarden/svg-icons@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/svg-icons/-/svg-icons-6.15.0.tgz#cb7f890b86d3ffe83e7b6fae83db2f776594d4af"
+  integrity sha512-OMkA3pWbwY7fviZFC29ZEBJp/Ue73w+PhbB4bKQLTp6UyK97crHTZzyPhJU/GnhOp1ubOvJii3tlJgYzg4r9KA==
 
 compute-scroll-into-view@^1.0.9:
   version "1.0.13"