[refs #160] Change the way triangle is generated in care cards

Using the clip path method for generating the care card triangles makes it not show up in High Contrast Mode in Windows. This was picked up in a DAC report. Despite looking at a gov.uk blog post on this (https://accessibility.blog.gov.uk/2018/08/01/supporting-users-who-change-colours-on-gov-uk/) it still didn't seem to work in High Contrast Mode, so it has been changed to borders and transforms, inspired from https://codepen.io/mpeace/pres/eBOVGe
nhsuk · Dec 3, 2018 · 77dfdcf · 77dfdcf
1 parent acaab35
commit 77dfdcf
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@
 
   Use the latest [Breadcrumb nunjucks macro arguments](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/breadcrumb#nunjucks-macro) and [Breadcrumb HTML markup](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/breadcrumb#html-markup) in your app.
 
+- Care card - Change the way triangle is generated in care cards for accessiblity purposes ([PR 269](https://github.com/nhsuk/nhsuk-frontend/pull/269))
+
+  Use the latest [Care card HTML markup](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/care-card#quick-start-examples) in your app.
+
 :wrench: **Fixes**
 
 - Header - Removed icon includes from nunjucks macro and added the SVG's inline ([PR 276](https://github.com/nhsuk/nhsuk-frontend/pull/276))

diff --git a/packages/components/care-card/README.md b/packages/components/care-card/README.md
@@ -16,6 +16,7 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 <div class="nhsuk-care-card">
   <div class="nhsuk-care-card__heading-container">
     <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -74,6 +75,7 @@ The non-urgent care card Nunjucks macro takes the following arguments:
 <div class="nhsuk-care-card nhsuk-care-card--urgent">
   <div class="nhsuk-care-card__heading-container">
     <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -132,6 +134,7 @@ The urgent care card Nunjucks macro takes the following arguments:
 <div class="nhsuk-care-card nhsuk-care-card--immediate">
   <div class="nhsuk-care-card__heading-container">
     <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>

diff --git a/packages/components/care-card/_care-card.scss b/packages/components/care-card/_care-card.scss
@@ -9,39 +9,47 @@
  *    using the @mixin care-card tools/_mixins.scss.
  *    The same mixin is used for each care card, setting the background
  *    colour,text colour and print border width with the variables.
- * 2. By adding ‘clip-path’ we can draw a polygon that matches the original
- *    triangle to ensure the rectangle does not appear.
- * 3. Care card heading triangle.
- * 4. Care card heading triangle positioning.
- * 5. 'Random number' used for spacing to compensate for the triangle.
- * 6. This shows as a solid border in high contrast mode in Windows, so helps
+ * 2. This shows as a solid border in high contrast mode in Windows, so helps
  *    differentiates care cards from the rest of the content.
+ * 3. 'Random number' for the heading triangle.
+ * 4. 'Random number' for the heading triangle positioning.
+ * 5. 'Random number' used for spacing to compensate for the triangle.
+ * 6. Needed to enable the triangle to show correctly in high contrast mode.
  */
 
 .nhsuk-care-card {
   @include nhsuk-responsive-margin(7, 'bottom');
   @include nhsuk-responsive-margin(7, 'top');
   @include care-card($color_nhsuk-blue, $color_nhsuk-white, 4px); /* [1] */
-  border: 1px solid transparent; /* [6] */
+  border: 1px solid transparent; /* [2] */
 }
 
 .nhsuk-care-card__heading-container {
   padding: nhsuk-spacing(3) nhsuk-spacing(4);
   position: relative;
+}
 
+.nhsuk-care-card__arrow {
+  bottom: -10px; /* [3] */
+  display: block;
+  height: 20px; /* [3] */
+  left: 30px; /* [4] */
+  overflow: hidden;
+  position: absolute;
+  transform: rotate(45deg);
+  width: 20px; /* [3] */
+  @include print-hide();
+
+  &:before,
   &:after {
-    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); /* [2] */ // sass-lint:disable-line property-sort-order
-    clip-path: polygon(0 0, 50% 100%, 100% 0); /* [2] */ // sass-lint:disable-line property-sort-order
-    border-left: $nhsuk-care-card-triangle-border solid transparent; /* [3] */ // sass-lint:disable-line property-sort-order
-    border-right: $nhsuk-care-card-triangle-border solid transparent; /* [3] */ // sass-lint:disable-line property-sort-order
-    bottom: -$nhsuk-care-card-triangle-border + 1;  /* [4] */ // sass-lint:disable-line property-sort-order
+    border: solid 32px $color_nhsuk-blue; /* [3] */
     content: '';
     display: block;
     height: 0;
     position: absolute;
+    top: 0;
+    transform: rotate(45deg); /* [6] */
     width: 0;
-
-    @include print-hide();
   }
 
 }
@@ -76,11 +84,26 @@
 
 .nhsuk-care-card--urgent {
   @include care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
+
+  .nhsuk-care-card__arrow {
+    &:before,
+    &:after {
+      border-color: $color_nhsuk-red;
+    }
+  }
+
 }
 
 .nhsuk-care-card--immediate {
   @include care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
 
+  .nhsuk-care-card__arrow {
+    &:before,
+    &:after {
+      border-color: $color_nhsuk-red;
+    }
+  }
+
   .nhsuk-care-card__content {
     background-color: $color_nhsuk-black;
     color: $color_nhsuk-white;

diff --git a/packages/components/care-card/template.html b/packages/components/care-card/template.html
@@ -1,6 +1,7 @@
 <div class="nhsuk-care-card">
   <div class="nhsuk-care-card__heading-container">
     <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
@@ -10,6 +11,7 @@ <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visu
 <div class="nhsuk-care-card nhsuk-care-card--urgent">
   <div class="nhsuk-care-card__heading-container">
     <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
@@ -19,6 +21,7 @@ <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visu
 <div class="nhsuk-care-card nhsuk-care-card--immediate">
   <div class="nhsuk-care-card__heading-container">
     <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>

diff --git a/packages/components/care-card/template.njk b/packages/components/care-card/template.njk
@@ -2,6 +2,7 @@
 <div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="nhsuk-care-card__heading-container">
     <h{{ headingLevel }} class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">{% if params.type === 'non-urgent' %}Non-urgent advice: {% elseif params.type === 'urgent' %}Urgent advice: {% elseif params.type === 'immediate' %}Immediate action required: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</span></h{{ headingLevel }}>
+    <span class="nhsuk-care-card__arrow" aria-hidden="true"></span>
   </div>
   <div class="nhsuk-care-card__content">
   {{ params.HTML | safe }}

diff --git a/packages/core/tools/_mixins.scss b/packages/core/tools/_mixins.scss
@@ -161,10 +161,6 @@
   .nhsuk-care-card__heading-container {
     background-color: $heading-background-color;
     color: $heading-text-color;
-
-    &:after {
-      border-top: $nhsuk-care-card-triangle-border solid $heading-background-color;
-    }
   }
 
   @include mq($media-type: print) {