Merge pull request #1337 from alphagov/xlink-href-svg

Set xlink:href on crown PNG fallback

CHANGELOG.md

@@ -42,6 +42,11 @@
 
   ([PR #1319](https://github.com/alphagov/govuk-frontend/pull/1319))
 
+- Prevent the fallback PNG image for the crown in the header from being
+  downloaded unnecessarily in Internet Explorer and Edge.
+
+  ([PR #1337](https://github.com/alphagov/govuk-frontend/pull/1337))
+
 ## 2.11.0 (Feature release)
 
 🆕 New features:

src/components/header/template.njk

@@ -40,7 +40,7 @@
 
             In other browsers <image> is synonymous for the <img> tag and will be
             interpreted as such, displaying the fallback image. #}
-            <image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
+            <image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image"></image>
           </svg>
           <span class="govuk-header__logotype-text">
             GOV.UK

src/components/header/template.test.js

@@ -135,4 +135,30 @@ describe('header', () => {
       })
     })
   })
+
+  describe('SVG logo', () => {
+    const $ = render('header', {})
+    const $svg = $('.govuk-header__logotype-crown')
+
+    it('sets focusable="false" so that IE does not treat it as an interactive element', () => {
+      expect($svg.attr('focusable')).toEqual('false')
+    })
+
+    it('sets role="presentation" so that it is ignored by assistive technologies', () => {
+      expect($svg.attr('focusable')).toEqual('false')
+    })
+
+    describe('fallback PNG', () => {
+      const $fallbackImage = $('.govuk-header__logotype-crown-fallback-image')
+
+      it('uses the <image> tag which is a valid SVG element', () => {
+        expect($fallbackImage[0].tagName).toEqual('image')
+      })
+
+      it('sets a blank xlink:href to prevent IE from downloading both the SVG and the PNG', () => {
+        // Cheerio converts xhref to href - https://github.com/cheeriojs/cheerio/issues/1101
+        expect($fallbackImage.attr('href')).toEqual('')
+      })
+    })
+  })
 })