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