small improvements to breadcrumbs (#1207)

visual-framework · Oct 30, 2020 · 214848e · 214848e
1 parent 4e7cada
commit 214848e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/components/vf-breadcrumbs/CHANGELOG.md b/components/vf-breadcrumbs/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 2.0.0
+
+* adds `aria-current="location"` to be used for the last item in `vf-breadcrumbs`
+* replaces CSS to style `aria-current="location"` and not `:last-of-type`.
+* adds text-shadow to `aria-current="location"` to show text a little bolder.
+
 ### 1.0.5
 
 * removes the bottom margin

diff --git a/components/vf-breadcrumbs/vf-breadcrumbs--with-related.njk b/components/vf-breadcrumbs/vf-breadcrumbs--with-related.njk
@@ -2,21 +2,29 @@
 
   <ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
     {% for breadcrumb in breadcrumbs %}
-    <li class="vf-breadcrumbs__item">
+    <li class="vf-breadcrumbs__item"
+    {% if breadcrumb.currentPage %} aria-current="location"{%- endif -%}
+    >
       {% if breadcrumb.breadcrumb_href %}
-      <a href="{{ breadcrumb.breadcrumb_href }}" class="vf-breadcrumbs__link">{{ breadcrumb.text }}</a>
+      <a href="{{ breadcrumb.breadcrumb_href }}" class="vf-breadcrumbs__link">
+      {{- breadcrumb.text -}}
+      </a>
+
       {% else %}
       {{ breadcrumb.text }}
       {% endif %}
+
     </li>
+
     {% endfor %}
+
   </ul>
 
   {% if related %}
   <span class="vf-breadcrumbs__heading">Related:</span>
   <ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
     {% for item in related %}
-    <li class="vf-breadcrumbs__item">
+    <li class="vf-breadcrumbs__item"{%- if item.breadcrumb_last %} aria-current="location"{%- endif -%}>
       <a href="{{ item.breadcrumb_href }}" class="vf-breadcrumbs__link">{{ item.text }}</a>
     </li>
     {% endfor %}

diff --git a/components/vf-breadcrumbs/vf-breadcrumbs.config.yml b/components/vf-breadcrumbs/vf-breadcrumbs.config.yml
@@ -9,6 +9,7 @@ context:
     - text: Topics
       breadcrumb_href: JavaScript:Void(0);
     - text: Centre
+      currentPage: true
   related:
     - text: Biscuits
       breadcrumb_href: JavaScript:Void(0);

diff --git a/components/vf-breadcrumbs/vf-breadcrumbs.njk b/components/vf-breadcrumbs/vf-breadcrumbs.njk
@@ -1,7 +1,9 @@
 <nav class="vf-breadcrumbs" aria-label="Breadcrumb">
   <ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
     {% for breadcrumb in breadcrumbs %}
-    <li class="vf-breadcrumbs__item">
+    <li class="vf-breadcrumbs__item"
+    {% if breadcrumb.currentPage %} aria-current="location"{%- endif -%}
+    >
       {% if breadcrumb.breadcrumb_href %}
       <a href="{{ breadcrumb.breadcrumb_href }}" class="vf-breadcrumbs__link">{{ breadcrumb.text }}</a>
       {% else %}

diff --git a/components/vf-breadcrumbs/vf-breadcrumbs.scss b/components/vf-breadcrumbs/vf-breadcrumbs.scss
@@ -37,14 +37,17 @@
   position: relative;
 
 
-  &:not(:last-of-type) {
+  &:not([aria-current]) {
     &::after {
       color: $vf-breadcrumbs__item-chevron--color;
       content: '>';
       display: inline-block;
       margin-left: 3px;
     }
   }
+  &[aria-current] {
+    text-shadow: 1px 0 0;
+  }
 }
 
 .vf-breadcrumbs__heading {