From 84485f589523be4101fd1912b1e2e91af7f9a3bf Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 13 May 2019 15:35:14 +0100 Subject: [PATCH 1/2] Set xlink:href on crown PNG fallback When the header component was originally created in the Design System, we included the xlink:href attribute [1] to ensure that Internet Explorer did not download both the SVG and the PNG: > "In most browsers, therefore, it is sufficient to include an tag with a src attribute (pointing to your fallback image) inside your inline SVG: the old browsers will download the fallback, the new browsers won't. Except for Internet Explorer, which downloads the fallback image even when it doesn't display it. The solution is to put a null xlink:href attribute on the element. The IE developer tools still show it requesting the fallback, but it aborts almost immediately (<1ms in IE11 or IE10/IE9 emulation mode), before downloading anything." [2] When the component was moved to GOV.UK Frontend, this attribute was omitted[3]. This adds it back again. Fixes #1299 [1]: https://github.com/alphagov/govuk-design-system/blob/ffdb3e7bdd5ce2c42dfe95979f9faa308d75a0d9/views/partials/_header.njk#L31 [2]: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-inline-svg-imgtag [3]: https://github.com/alphagov/govuk-frontend/commit/8da2cb3d2487401ece2ad84bedf7254e1951c2d9 --- src/components/header/template.njk | 2 +- src/components/header/template.test.js | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/header/template.njk b/src/components/header/template.njk index 45286d655a..97ed5886bc 100644 --- a/src/components/header/template.njk +++ b/src/components/header/template.njk @@ -40,7 +40,7 @@ In other browsers is synonymous for the tag and will be interpreted as such, displaying the fallback image. #} - + GOV.UK diff --git a/src/components/header/template.test.js b/src/components/header/template.test.js index ce0854ea67..20ded9e69a 100644 --- a/src/components/header/template.test.js +++ b/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 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('') + }) + }) + }) }) From c08495ce5203b754f047a38e4d7ad79bf5c29eec Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 13 May 2019 16:38:15 +0100 Subject: [PATCH 2/2] Document in CHANGELOG --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b36df3614..40e3577787 100644 --- a/CHANGELOG.md +++ b/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: