Merge pull request #3502 from frankieroberto/tag-changes

Tag design changes

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.

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`] = `
 <strong class="govuk-tag govuk-phase-banner__content__tag govuk-tag--grey">
- alpha
+ Alpha
 </strong>
 `;
 
 exports[`Phase banner with dependant components renders the tag component html 1`] = `
 <strong class="govuk-tag govuk-phase-banner__content__tag">
  <em>
- alpha
+ Alpha
  </em>
 </strong>
 `;
 
 exports[`Phase banner with dependant components renders the tag component text 1`] = `
 <strong class="govuk-tag govuk-phase-banner__content__tag">
- alpha
+ Alpha
 </strong>
 `;

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 {

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 <a href="#" class="govuk-link">feedback</a> 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: <em>alpha</em>
+ html: <em>Alpha</em>
  - 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

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%);
  }
 }

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: <span>alpha</span>
+ text: <span>Alpha</span>
  - name: html
  hidden: true
  data:
- html: <span>alpha</span>
+ html: <span>Alpha</span>

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('<span>alpha</span>')
+ expect($component.html()).toContain('<span>Alpha</span>')
  })
  })
 })