From cabf30bc8e030015daee065c401dcf83814a6e8b Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Fri, 25 Nov 2022 22:22:24 +0630
Subject: [PATCH] fix(a11y): improve breadcrumb to be more accessible when
 using with voiceover

Move seperator from CSS :before to HTML span element. Hide seperator on voiceover. Update style for
that seperator.
---
 src/components/Breadcrumbs.astro | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
index b8349e9..520939b 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -14,7 +14,10 @@ breadcrumbList[0] === "posts" &&
 
 <nav class="breadcrumb" aria-label="breadcrumb">
   <ul>
-    <li><a href="/">Home</a></li>
+    <li>
+      <a href="/">Home</a>
+      <span aria-hidden="true">&#62;</span>
+    </li>
     {
       breadcrumbList.map((breadcrumb, index) => (
         <li>
@@ -36,12 +39,13 @@ breadcrumbList[0] === "posts" &&
     @apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1;
   }
   .breadcrumb ul li {
-    @apply inline opacity-70 capitalize;
+    @apply inline;
   }
-  .breadcrumb ul li + li {
-    @apply text-skin-base before:content-[">"];
+  .breadcrumb ul li a,
+  .breadcrumb ul li span {
+    @apply opacity-70 capitalize;
   }
-  .breadcrumb ul li:not(:last-child) {
-    @apply hover:opacity-100 hover:before:opacity-70;
+  .breadcrumb ul li:not(:last-child) a {
+    @apply hover:opacity-100;
   }
 </style>