docs(nav): Add role=button example

This commit is contained in:
Lucas Larroche 2022-03-06 16:44:29 +07:00
parent 6cbc258a0d
commit 43cacb0b93
15 changed files with 36 additions and 13 deletions

View file

@ -1887,6 +1887,11 @@ nav :where(a, [role="link"]) {
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
nav [role=button] {
margin-right: inherit;
margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
aside nav,
aside ol,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -2085,6 +2085,11 @@ nav :where(a, [role="link"]) {
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
nav [role=button] {
margin-right: inherit;
margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
aside nav,
aside ol,

File diff suppressed because one or more lines are too long

View file

@ -1857,6 +1857,11 @@ nav :where(a, [role="link"]) {
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
nav [role=button] {
margin-right: inherit;
margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
aside nav,
aside ol,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -28,7 +28,7 @@
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
</ul>
</nav>
<footer class="code">
@ -40,7 +40,7 @@
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;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;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;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> <i>role</i>=<u>"button"</u>&gt;Button&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>

View file

@ -62,6 +62,14 @@ nav {
text-decoration: none;
}
}
// Minimal support for role="button"
[role="button"] {
margin-right: inherit;
margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
}
// Vertical Nav