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

fix: aria-current links and buttons

Browse source
This commit is contained in:
Lucas Larroche 2023-04-01 10:10:09 +07:00
parent 3644e4ccb5
commit e43ed98d29
13 changed files with 104 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

37
css/pico.fluid.classless.css
View file

@ -250,6 +250,10 @@ details[role=list] summary:not([role=button]) {
--pico-outline-width: 0.0625rem;
}
nav details[role=list] summary:focus-visible {
--pico-outline-width: 0.1875rem;
}
/**
* Color schemes
*/
@ -708,8 +712,8 @@ a,
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
}
a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) {
a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-underline-hover);
--pico-text-decoration: underline;
@ -970,12 +974,12 @@ input[type=file]::file-selector-button,
user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}
button:is([aria-current], :hover, :active, :focus),
[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) {
button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
[role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-primary-background-hover);
--pico-border-color: var(--pico-primary-border-hover);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -1003,8 +1007,8 @@ input[type=file]::file-selector-button {
--pico-color: var(--pico-secondary-inverse);
cursor: pointer;
}
input[type=reset]:is([aria-current], :hover, :active, :focus),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
--pico-background-color: var(--pico-secondary-hover);
--pico-border-color: var(--pico-secondary-hover);
}
@ -1931,10 +1935,17 @@ details[role=list] summary:not([role])[aria-invalid=true] {
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
}
nav details[role=list] {
display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
}
nav details[role=list] summary:not([role]) {
height: auto;
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}
nav details[role=list] summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
details[role=list] summary + ul {
display: flex;
@ -1983,7 +1994,7 @@ details[role=list] summary + ul li a {
text-decoration: none;
text-overflow: ellipsis;
}
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible {
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color);
}
details[role=list] summary + ul li label {
@ -2185,7 +2196,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
text-align: center;
text-decoration: none;
}
nav[aria-label=breadcrumb] a[aria-current] {
nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
background-color: transparent;
color: inherit;
text-decoration: none;