Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +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">
<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>