fix: use inline SVGs

Rather than embedding SVGs as background images, use them inline. This allows them to keep their parents' fill colour, so they can always adapt to match the text. This is an accessibility enhancement as it means that users who use tools like high-contrast mode to force changes in background and foreground colours will continue to be able to see iconography. Without it, icons are invisible if they're the same colour as the forced background colour. Fixes #162
ministryofjustice · May 17, 2022 · df8feb7 · df8feb7
1 parent 88668d3
commit df8feb7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 21 deletions.
diff --git a/docs/examples/timeline/index.njk b/docs/examples/timeline/index.njk
@@ -34,10 +34,12 @@ arguments: timeline
 {%- set documentsHtml %}
   <ul class="moj-timeline__documents">
     <li class="moj-timeline__document-item">
-      <a class="moj-timeline__document-link" href="#">Document 1</a>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16" fill="currentColor"><path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/></svg>
+      <a class="govuk-link" href="#">Document 1</a>
     </li>
     <li class="moj-timeline__document-item">
-      <a class="moj-timeline__document-link" href="#">Document 1</a>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16" fill="currentColor"><path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/></svg>
+      <a class="govuk-link" href="#">Document 2</a>
     </li>
   </ul>
 {% endset -%}

diff --git a/src/moj/components/search-toggle/search-toggle.js b/src/moj/components/search-toggle/search-toggle.js
@@ -7,7 +7,9 @@ MOJFrontend.SearchToggle = function(options) {
 
   this.options.search.container.data('moj-search-toggle-initialised', true);
 
-  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
+  const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+
+  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
 	this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
   this.options.toggleButton.container.append(this.toggleButton);
 };

diff --git a/src/moj/components/search-toggle/search-toggle.scss b/src/moj/components/search-toggle/search-toggle.scss
@@ -12,15 +12,13 @@
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
 
-  &:after {
-    background-repeat: no-repeat;
-    background-image: url(#{$moj-images-path}icon-search-blue.svg);
-    content: '';
+  &__icon {
     display: inline-block;
     height: 20px;
     margin-left: govuk-spacing(2);
     vertical-align: middle;
     width: 20px;
+    fill: currentColor;
   }
 
   &:focus {
@@ -30,43 +28,30 @@
     outline: none;
     position: relative;
     z-index: 1;
-
-    &:after {
-      background-image: url(#{$moj-images-path}icon-search-black.svg);
-    }
   }
-
 }
 
-
 .moj-search--toggle {
-
   padding: govuk-spacing(3);
 
   @include govuk-media-query($until: desktop) {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
-
 }
 
-
 // JS enabled
 .js-enabled .moj-search--toggle {
-
   @include govuk-media-query($until: desktop) {
     padding-top: 0 !important;
   }
-
 }
 
 .js-enabled .moj-search-toggle {
   position: relative;
 }
 
-
 .js-enabled .moj-search-toggle__search {
-
   background-color: govuk-colour("light-grey");
 
   @include govuk-media-query($from: desktop) {
@@ -77,5 +62,4 @@
     width: 450px;
     z-index: 10;
   }
-
 }