Tag design changes

Design changes: * no longer uppercase * no longer bold * remove 1px extra letter spacing * increase font size to 19px * change colours to use lighter background colours These changes are to improve the accessibility and readability of the tag text, and to make the tags look less like clickable buttons.
alphagov · May 23, 2023 · 976535e · 976535e
1 parent 839adc0
commit 976535e
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 44 deletions.
diff --git a/...ages/govuk-frontend/src/govuk/components/phase-banner/__snapshots__/template.test.js.snap b/...ages/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>
 `;
diff --git 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
@@ -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
diff --git 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
@@ -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>
diff --git 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('&lt;span&gt;alpha&lt;/span&gt;')
+      expect($component.html()).toContain('&lt;span&gt;Alpha&lt;/span&gt;')
     })
 
     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>')
     })
   })
 })