From 8fffc986c60757f2541829b550be081ec90a0f94 Mon Sep 17 00:00:00 2001
From: Jelmer Veen <j.p.veen@rug.nl>
Date: Tue, 8 Feb 2022 11:07:18 +0100
Subject: [PATCH] fix: updated breadcrumb according to feedback and kept to
 aria specification

---
 docs/src/navs.html            | 30 +++++++++++++++++++++---------
 scss/components/_nav.scss     | 27 +++++++++++++++------------
 scss/content/_typography.scss |  2 +-
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/docs/src/navs.html b/docs/src/navs.html
index b4619e85..841b5f2b 100644
--- a/docs/src/navs.html
+++ b/docs/src/navs.html
@@ -117,21 +117,33 @@
           </footer>
         </article>
 
-        <p>With <code><b>role="breadcrumb"</b></code>, you can turn a nav into a breadcrumb.</p>
+        <p>With <code><b>aria-label="Breadcrumb"</b></code>, you can turn a nav into a breadcrumb, specifying the current page with: <code><b>aria-current="page"</b></code>.</p>
 
         <article aria-label="Breadcrumb nav example">
-          <nav role="breadcrumb">
-            <a href="#">First link</a>
-            <a href="#">Second link</a>
-            Last link
+          <nav aria-label="Breadcrumb">
+            <ul>
+              <li>
+                <a href="#">First link</a>
+              </li>
+              <li>
+                <a href="#">Second link</a>
+              </li>
+              <li>
+                <a aria-current="page">
+                  Last link
+                </a>
+              </li>
+            </ul>
           </nav>
 
           <footer class="code">
 
-            <pre><code>&lt;<b>nav</b> <i>role</i>=<u>"breadcrumb"</u>&gt;
-  &lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;
-  &lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;
-  Last link
+            <pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"Breadcrumb"</u>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>aria-current</i>=<u>"page"</u>&gt;Last link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
+  &lt;<b>/ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
           </footer>
         </article>
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index 50488b57..cffb18de 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -52,22 +52,25 @@ nav {
     }
   }
 
-  &[role="breadcrumb"] {
+  &[aria-label="Breadcrumb"] {
     align-items: center;
     justify-content: left;
-
-    font-size: calc(var(--font-size) * 1.1);
-
-    & a {
-      padding-right: 1rem;
-      text-decoration: none;
-
-      &::after {
-        content: " / ";
-        color: var(--color);
-        font-size: calc(var(--font-size) * 1.4);
+    
+    & ul li {
+      padding-left:0;
+  
+      &:not(:last-child) {
+        a::after {
+          padding-left: 0.5rem;
+          content: "/";
+          color: var(--muted-color) !important;
+        }
       }
     }
+
+    & a[aria-current="page"] {
+      color: inherit !important;
+    }
   }
 }
 
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
index bd58466d..9fc5883b 100644
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@@ -68,7 +68,7 @@ ul {
 
 // Links
 // 1. Remove the gray background on active links in IE 10
-a:not(::after) {
+a {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;