Set xlink:href on crown PNG fallback

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('')
+ })
+ })
+ })
 })