Merge pull request #269 from nhsuk/accessibility/care-cards

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

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

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>

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;

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>

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

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) {