Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 19:41:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): improve breadcrumb to be more accessible when using with voiceover

Browse Source 
Move seperator from CSS :before to HTML span element. Hide seperator on voiceover. Update style for
that seperator.
This commit is contained in:
satnaing
2022-11-25 22:22:24 +06:30
parent 9d3c89753d
commit cabf30bc8e
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Breadcrumbs.astro
+10 -6
View File
@@ -14,7 +14,10 @@ breadcrumbList[0] === "posts" &&
<nav class="breadcrumb" aria-label="breadcrumb"> <nav class="breadcrumb" aria-label="breadcrumb">
<ul> <ul>
<li><a href="/">Home</a></li> <li>
<a href="/">Home</a>
<span aria-hidden="true">&#62;</span>
</li>
{ {
breadcrumbList.map((breadcrumb, index) => ( breadcrumbList.map((breadcrumb, index) => (
<li> <li>
@@ -36,12 +39,13 @@ breadcrumbList[0] === "posts" &&
@apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1; @apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1;
} }
.breadcrumb ul li { .breadcrumb ul li {
@apply inline opacity-70 capitalize; @apply inline;
} }
.breadcrumb ul li + li { .breadcrumb ul li a,
@apply text-skin-base before:content-[">"]; .breadcrumb ul li span {
@apply opacity-70 capitalize;
} }
.breadcrumb ul li:not(:last-child) { .breadcrumb ul li:not(:last-child) a {
@apply hover:opacity-100 hover:before:opacity-70; @apply hover:opacity-100;
} }
</style> </style>