diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d0312218e..f5e7aedda2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ ### New features +#### Tag design changes + +The design of the tag component has changed to improve accessibility and readability. + +Text within the tag is no longer bold and uppercase with extra letter spacing, and is +instead regular 19px text. Due to this, there may be changes to the width of existing tags. + +The colours have also changed to make them more distinguishable from buttons. + +This change was made in [pull request #3502: Tag design changes](https://github.com/alphagov/govuk-frontend/pull/3502). + #### Added inverse modifier for buttons on dark backgrounds You can now style buttons on dark backgrounds to have a white background colour by adding the `govuk-button--inverse` class. diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/__snapshots__/template.test.js.snap b/packages/govuk-frontend/src/govuk/components/phase-banner/__snapshots__/template.test.js.snap index 49ab72849f..c68a19afe0 100644 --- a/packages/govuk-frontend/src/govuk/components/phase-banner/__snapshots__/template.test.js.snap +++ b/packages/govuk-frontend/src/govuk/components/phase-banner/__snapshots__/template.test.js.snap @@ -2,20 +2,20 @@ exports[`Phase banner with dependant components renders the tag component classes 1`] = ` - alpha + Alpha `; exports[`Phase banner with dependant components renders the tag component html 1`] = ` - alpha + Alpha `; exports[`Phase banner with dependant components renders the tag component text 1`] = ` - alpha + Alpha `; diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss index de1366f949..ea4b330496 100644 --- a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss @@ -17,7 +17,16 @@ } .govuk-phase-banner__content__tag { + @include govuk-font($size: 16); margin-right: govuk-spacing(2); + + // When forced colour mode is active, for example to provide high contrast, + // the background colour of the tag is the same as the rest of the page. To ensure + // that the tag is perceived as separate to the rest of the text in the phase banner, + // it is made bold. + @media screen and (forced-colors: active) { + font-weight: bold; + } } .govuk-phase-banner__text { diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/phase-banner.yaml b/packages/govuk-frontend/src/govuk/components/phase-banner/phase-banner.yaml index e1783a90d6..315b2f5b4e 100644 --- a/packages/govuk-frontend/src/govuk/components/phase-banner/phase-banner.yaml +++ b/packages/govuk-frontend/src/govuk/components/phase-banner/phase-banner.yaml @@ -25,7 +25,7 @@ examples: - name: default data: tag: - text: alpha + text: Alpha html: This is a new service - your feedback will help us to improve it. # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures @@ -54,11 +54,11 @@ examples: data: text: This is a new service – your feedback will help us to improve it tag: - html: alpha + html: Alpha - name: tag classes hidden: true data: text: This is a new service – your feedback will help us to improve it tag: classes: govuk-tag--grey - text: alpha + text: Alpha diff --git a/packages/govuk-frontend/src/govuk/components/tag/_index.scss b/packages/govuk-frontend/src/govuk/components/tag/_index.scss index 081ee2fc55..db51c762c5 100644 --- a/packages/govuk-frontend/src/govuk/components/tag/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/tag/_index.scss @@ -1,70 +1,94 @@ @include govuk-exports("govuk/component/tag") { .govuk-tag { - @include govuk-font($size: 16, $weight: bold, $line-height: 1); + @include govuk-font($size: 19); display: inline-block; - padding-top: 5px; + // These negative margins make sure that the tag component doesn’t increase the + // size of its container. Otherwise, for example, a table row containing a tag + // will be taller than one containing plain text. + // + // The negative margin added to the top and bottom matches the extra padding added. + margin-top: -2px; + margin-bottom: -3px; + + padding-top: 2px; padding-right: 8px; - padding-bottom: 4px; + padding-bottom: 3px; padding-left: 8px; - // When a user customises their colours often the background is removed, - // by adding a outline we ensure that the tag component still keeps it's meaning. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: 2px solid transparent; - outline-offset: -2px; - - color: govuk-colour("white"); - background-color: govuk-colour("blue"); - letter-spacing: 1px; + color: govuk-shade(govuk-colour("blue"), 60%); + background-color: govuk-tint(govuk-colour("blue"), 70%); text-decoration: none; - text-transform: uppercase; + + // When forced colour mode is active, for example to provide high contrast, + // the background colour of the tag is the same as the rest of the page. To ensure + // that the tag is perceived as separate from any surround text, it is made bold. + // + // Transparent outlines are no longer added, as they make the Tag look indistinguishable + // from a button – but the tag is not interactive in the same way. + @media screen and (forced-colors: active) { + font-weight: bold; + } + } + + // Previously the whole tag was transformed to UPPERCASE. We’ve since decided to switch + // to title case to improve readability. The first letter is uppercased to ease the transition, + // as the text may be all lowercase within the HTML itself. + // + // 'capitalize' is used instead of 'uppercase' as a workaround for a spacing bug in Firefox. + .govuk-tag::first-letter { + text-transform: capitalize; } .govuk-tag--grey { - color: govuk-shade(govuk-colour("dark-grey"), 30%); - background: govuk-tint(govuk-colour("dark-grey"), 90%); + color: govuk-shade(govuk-colour("dark-grey"), 50%); + background-color: govuk-tint(govuk-colour("dark-grey"), 85%); } .govuk-tag--purple { - color: govuk-shade(govuk-colour("purple"), 20%); - background: govuk-tint(govuk-colour("purple"), 80%); + color: govuk-shade(govuk-colour("bright-purple"), 50%); + background-color: govuk-tint(govuk-colour("bright-purple"), 85%); } .govuk-tag--turquoise { color: govuk-shade(govuk-colour("turquoise"), 60%); - background: govuk-tint(govuk-colour("turquoise"), 70%); + background-color: govuk-tint(govuk-colour("turquoise"), 80%); } .govuk-tag--blue { - color: govuk-shade(govuk-colour("blue"), 30%); - background: govuk-tint(govuk-colour("blue"), 80%); + color: govuk-shade(govuk-colour("blue"), 60%); + background-color: govuk-tint(govuk-colour("blue"), 70%); + } + + .govuk-tag--light-blue { + color: govuk-shade(govuk-colour("blue"), 60%); + background-color: govuk-tint(govuk-colour("blue"), 90%); } .govuk-tag--yellow { color: govuk-shade(govuk-colour("yellow"), 65%); - background: govuk-tint(govuk-colour("yellow"), 75%); + background-color: govuk-tint(govuk-colour("yellow"), 75%); } .govuk-tag--orange { color: govuk-shade(govuk-colour("orange"), 55%); - background: govuk-tint(govuk-colour("orange"), 70%); + background-color: govuk-tint(govuk-colour("orange"), 70%); } .govuk-tag--red { - color: govuk-shade(govuk-colour("red"), 30%); - background: govuk-tint(govuk-colour("red"), 80%); + color: govuk-shade(govuk-colour("red"), 80%); + background-color: govuk-tint(govuk-colour("red"), 75%); } .govuk-tag--pink { - color: govuk-shade(govuk-colour("pink"), 40%); - background: govuk-tint(govuk-colour("pink"), 80%); + color: govuk-shade(govuk-colour("pink"), 50%); + background-color: govuk-tint(govuk-colour("pink"), 85%); } .govuk-tag--green { color: govuk-shade(govuk-colour("green"), 20%); - background: govuk-tint(govuk-colour("green"), 80%); + background-color: govuk-tint(govuk-colour("green"), 80%); } } diff --git a/packages/govuk-frontend/src/govuk/components/tag/tag.yaml b/packages/govuk-frontend/src/govuk/components/tag/tag.yaml index 50372c8cbc..bdfe6bc960 100644 --- a/packages/govuk-frontend/src/govuk/components/tag/tag.yaml +++ b/packages/govuk-frontend/src/govuk/components/tag/tag.yaml @@ -19,11 +19,7 @@ params: examples: - name: default data: - text: alpha - - name: inactive - data: - text: alpha - classes: govuk-tag--grey + text: Alpha - name: grey data: text: Grey @@ -32,6 +28,10 @@ examples: data: text: Blue classes: govuk-tag--blue + - name: light blue + data: + text: Light blue + classes: govuk-tag--light-blue - name: turquoise data: text: Turquoise @@ -72,8 +72,8 @@ examples: - name: html as text hidden: true data: - text: alpha + text: Alpha - name: html hidden: true data: - html: alpha + html: Alpha diff --git a/packages/govuk-frontend/src/govuk/components/tag/template.test.js b/packages/govuk-frontend/src/govuk/components/tag/template.test.js index 90d5709ec2..750ff798de 100644 --- a/packages/govuk-frontend/src/govuk/components/tag/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/tag/template.test.js @@ -14,11 +14,11 @@ describe('Tag', () => { const $component = $('.govuk-tag') expect($component.get(0).tagName).toEqual('strong') - expect($component.text()).toContain('alpha') + expect($component.text()).toContain('Alpha') }) it('renders classes', () => { - const $ = render('tag', examples.inactive) + const $ = render('tag', examples.grey) const $component = $('.govuk-tag') expect($component.hasClass('govuk-tag--grey')).toBeTruthy() @@ -47,14 +47,14 @@ describe('Tag', () => { const $ = render('tag', examples['html as text']) const $component = $('.govuk-tag') - expect($component.html()).toContain('<span>alpha</span>') + expect($component.html()).toContain('<span>Alpha</span>') }) it('renders html', () => { const $ = render('tag', examples.html) const $component = $('.govuk-tag') - expect($component.html()).toContain('alpha') + expect($component.html()).toContain('Alpha') }) }) })