mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 17:16:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: updated breadcrumb according to feedback and kept to aria specification

Browse source
This commit is contained in:
Jelmer Veen 2022-02-08 11:07:18 +01:00
parent 885d413673
commit 8fffc986c6
3 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/src/navs.html
View file

@ -117,21 +117,33 @@
</footer> </footer>
</article> </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"> <article aria-label="Breadcrumb nav example">
<nav role="breadcrumb"> <nav aria-label="Breadcrumb">
<ul>
<li>
<a href="#">First link</a> <a href="#">First link</a>
</li>
<li>
<a href="#">Second link</a> <a href="#">Second link</a>
</li>
<li>
<a aria-current="page">
Last link Last link
</a>
</li>
</ul>
</nav> </nav>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>nav</b> <i>role</i>=<u>"breadcrumb"</u>&gt; <pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"Breadcrumb"</u>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt; &lt;<b>ul</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>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
Last link &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> &lt;/<b>nav</b>&gt;</code></pre>
</footer> </footer>
</article> </article>

23
scss/components/_nav.scss
View file

@ -52,23 +52,26 @@ nav {
} }
} }
&[role="breadcrumb"] { &[aria-label="Breadcrumb"] {
align-items: center; align-items: center;
justify-content: left; justify-content: left;
font-size: calc(var(--font-size) * 1.1); & ul li {
padding-left:0;
& a { &:not(:last-child) {
padding-right: 1rem; a::after {
text-decoration: none; padding-left: 0.5rem;
content: "/";
&::after { color: var(--muted-color) !important;
content: " / ";
color: var(--color);
font-size: calc(var(--font-size) * 1.4);
} }
} }
} }
& a[aria-current="page"] {
color: inherit !important;
}
}
} }
// Vertical Nav // Vertical Nav

2
scss/content/_typography.scss
View file

@ -68,7 +68,7 @@ ul {
// Links // Links
// 1. Remove the gray background on active links in IE 10 // 1. Remove the gray background on active links in IE 10
a:not(::after) { a {
--color: var(--primary); --color: var(--primary);
--background-color: transparent; --background-color: transparent;
outline: none; outline: none;