mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #166 from picocss/ll/feature/active-class

Browse source 
feat(accessibility): Add aria-current
This commit is contained in:
Lucas Larroche 2022-02-27 16:22:07 +07:00 • committed by GitHub
commit b2d0bc4782
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 137 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

12
css/pico.classless.css
View file

@ -659,7 +659,7 @@ a {
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}
a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
@ -947,16 +947,20 @@ input[type=reset],
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
button:hover, button:active, button:focus,
button[aria-current], button:hover, button:active, button:focus,
input[type=submit][aria-current],
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
@ -980,7 +984,7 @@ input[type=reset] {
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
@ -1987,7 +1991,7 @@ nav a {
border-radius: var(--border-radius);
text-decoration: none;
}
nav a:hover, nav a:active, nav a:focus {
nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
text-decoration: none;
}

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

46
css/pico.css
View file

@ -689,7 +689,7 @@ a {
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}
a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
@ -699,7 +699,7 @@ a:focus {
a.secondary {
--color: var(--secondary);
}
a.secondary:hover, a.secondary:active, a.secondary:focus {
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus {
--color: var(--secondary-hover);
}
a.secondary:focus {
@ -708,7 +708,7 @@ a.secondary:focus {
a.contrast {
--color: var(--contrast);
}
a.contrast:hover, a.contrast:active, a.contrast:focus {
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus {
--color: var(--contrast-hover);
}
a.contrast:focus {
@ -998,16 +998,20 @@ input[type=reset],
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
button:hover, button:active, button:focus,
button[aria-current], button:hover, button:active, button:focus,
input[type=submit][aria-current],
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
@ -1035,16 +1039,20 @@ input[type=reset],
--color: var(--secondary-inverse);
cursor: pointer;
}
button.secondary:hover, button.secondary:active, button.secondary:focus,
button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
input[type=submit].secondary[aria-current],
input[type=submit].secondary:hover,
input[type=submit].secondary:active,
input[type=submit].secondary:focus,
input[type=button].secondary[aria-current],
input[type=button].secondary:hover,
input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset][aria-current],
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button].secondary[aria-current],
[role=button].secondary:hover,
[role=button].secondary:active,
[role=button].secondary:focus {
@ -1070,16 +1078,20 @@ input[type=reset].contrast,
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
input[type=submit].contrast[aria-current],
input[type=submit].contrast:hover,
input[type=submit].contrast:active,
input[type=submit].contrast:focus,
input[type=button].contrast[aria-current],
input[type=button].contrast:hover,
input[type=button].contrast:active,
input[type=button].contrast:focus,
input[type=reset].contrast[aria-current],
input[type=reset].contrast:hover,
input[type=reset].contrast:active,
input[type=reset].contrast:focus,
[role=button].contrast[aria-current],
[role=button].contrast:hover,
[role=button].contrast:active,
[role=button].contrast:focus {
@ -1104,16 +1116,20 @@ input[type=reset].outline,
--background-color: transparent;
--color: var(--primary);
}
button.outline:hover, button.outline:active, button.outline:focus,
button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
input[type=submit].outline[aria-current],
input[type=submit].outline:hover,
input[type=submit].outline:active,
input[type=submit].outline:focus,
input[type=button].outline[aria-current],
input[type=button].outline:hover,
input[type=button].outline:active,
input[type=button].outline:focus,
input[type=reset].outline[aria-current],
input[type=reset].outline:hover,
input[type=reset].outline:active,
input[type=reset].outline:focus,
[role=button].outline[aria-current],
[role=button].outline:hover,
[role=button].outline:active,
[role=button].outline:focus {
@ -1128,16 +1144,20 @@ input[type=reset].outline.secondary,
[role=button].outline.secondary {
--color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
input[type=submit].outline.secondary[aria-current],
input[type=submit].outline.secondary:hover,
input[type=submit].outline.secondary:active,
input[type=submit].outline.secondary:focus,
input[type=button].outline.secondary[aria-current],
input[type=button].outline.secondary:hover,
input[type=button].outline.secondary:active,
input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary[aria-current],
input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus,
[role=button].outline.secondary[aria-current],
[role=button].outline.secondary:hover,
[role=button].outline.secondary:active,
[role=button].outline.secondary:focus {
@ -1151,16 +1171,20 @@ input[type=reset].outline.contrast,
[role=button].outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input[type=submit].outline.contrast[aria-current],
input[type=submit].outline.contrast:hover,
input[type=submit].outline.contrast:active,
input[type=submit].outline.contrast:focus,
input[type=button].outline.contrast[aria-current],
input[type=button].outline.contrast:hover,
input[type=button].outline.contrast:active,
input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast[aria-current],
input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus,
[role=button].outline.contrast[aria-current],
[role=button].outline.contrast:hover,
[role=button].outline.contrast:active,
[role=button].outline.contrast:focus {
@ -2137,7 +2161,7 @@ dialog article .close {
opacity: 0.5;
transition: opacity var(--transition);
}
dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
dialog article .close[aria-current], dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
opacity: 1;
}
dialog:not([open]), dialog[open=false] {
@ -2264,7 +2288,7 @@ nav a {
border-radius: var(--border-radius);
text-decoration: none;
}
nav a:hover, nav a:active, nav a:focus {
nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
text-decoration: none;
}

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -629,7 +629,7 @@ a {
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}
a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
@ -917,16 +917,20 @@ input[type=reset],
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
button:hover, button:active, button:focus,
button[aria-current], button:hover, button:active, button:focus,
input[type=submit][aria-current],
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
@ -950,7 +954,7 @@ input[type=reset] {
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
@ -1957,7 +1961,7 @@ nav a {
border-radius: var(--border-radius);
text-decoration: none;
}
nav a:hover, nav a:active, nav a:focus {
nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
text-decoration: none;
}

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

42
css/pico.slim.css
View file

@ -618,7 +618,7 @@ a {
-webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration);
}
a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
@ -628,7 +628,7 @@ a:focus {
a.secondary {
--color: var(--secondary);
}
a.secondary:hover, a.secondary:active, a.secondary:focus {
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus {
--color: var(--secondary-hover);
}
a.secondary:focus {
@ -637,7 +637,7 @@ a.secondary:focus {
a.contrast {
--color: var(--contrast);
}
a.contrast:hover, a.contrast:active, a.contrast:focus {
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus {
--color: var(--contrast-hover);
}
a.contrast:focus {
@ -926,16 +926,20 @@ input[type=reset],
text-align: center;
cursor: pointer;
}
button:hover, button:active, button:focus,
button[aria-current], button:hover, button:active, button:focus,
input[type=submit][aria-current],
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
@ -963,16 +967,20 @@ input[type=reset],
--color: var(--secondary-inverse);
cursor: pointer;
}
button.secondary:hover, button.secondary:active, button.secondary:focus,
button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
input[type=submit].secondary[aria-current],
input[type=submit].secondary:hover,
input[type=submit].secondary:active,
input[type=submit].secondary:focus,
input[type=button].secondary[aria-current],
input[type=button].secondary:hover,
input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset][aria-current],
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button].secondary[aria-current],
[role=button].secondary:hover,
[role=button].secondary:active,
[role=button].secondary:focus {
@ -998,16 +1006,20 @@ input[type=reset].contrast,
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
input[type=submit].contrast[aria-current],
input[type=submit].contrast:hover,
input[type=submit].contrast:active,
input[type=submit].contrast:focus,
input[type=button].contrast[aria-current],
input[type=button].contrast:hover,
input[type=button].contrast:active,
input[type=button].contrast:focus,
input[type=reset].contrast[aria-current],
input[type=reset].contrast:hover,
input[type=reset].contrast:active,
input[type=reset].contrast:focus,
[role=button].contrast[aria-current],
[role=button].contrast:hover,
[role=button].contrast:active,
[role=button].contrast:focus {
@ -1032,16 +1044,20 @@ input[type=reset].outline,
--background-color: transparent;
--color: var(--primary);
}
button.outline:hover, button.outline:active, button.outline:focus,
button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
input[type=submit].outline[aria-current],
input[type=submit].outline:hover,
input[type=submit].outline:active,
input[type=submit].outline:focus,
input[type=button].outline[aria-current],
input[type=button].outline:hover,
input[type=button].outline:active,
input[type=button].outline:focus,
input[type=reset].outline[aria-current],
input[type=reset].outline:hover,
input[type=reset].outline:active,
input[type=reset].outline:focus,
[role=button].outline[aria-current],
[role=button].outline:hover,
[role=button].outline:active,
[role=button].outline:focus {
@ -1056,16 +1072,20 @@ input[type=reset].outline.secondary,
[role=button].outline.secondary {
--color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
input[type=submit].outline.secondary[aria-current],
input[type=submit].outline.secondary:hover,
input[type=submit].outline.secondary:active,
input[type=submit].outline.secondary:focus,
input[type=button].outline.secondary[aria-current],
input[type=button].outline.secondary:hover,
input[type=button].outline.secondary:active,
input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary[aria-current],
input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus,
[role=button].outline.secondary[aria-current],
[role=button].outline.secondary:hover,
[role=button].outline.secondary:active,
[role=button].outline.secondary:focus {
@ -1079,16 +1099,20 @@ input[type=reset].outline.contrast,
[role=button].outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input[type=submit].outline.contrast[aria-current],
input[type=submit].outline.contrast:hover,
input[type=submit].outline.contrast:active,
input[type=submit].outline.contrast:focus,
input[type=button].outline.contrast[aria-current],
input[type=button].outline.contrast:hover,
input[type=button].outline.contrast:active,
input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast[aria-current],
input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus,
[role=button].outline.contrast[aria-current],
[role=button].outline.contrast:hover,
[role=button].outline.contrast:active,
[role=button].outline.contrast:focus {

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/accordions.html
View file

File diff suppressed because one or more lines are too long

2
docs/buttons.html
View file

File diff suppressed because one or more lines are too long

2
docs/cards.html
View file

File diff suppressed because one or more lines are too long

2
docs/classless.html
View file

File diff suppressed because one or more lines are too long

2
docs/containers.html
View file

File diff suppressed because one or more lines are too long

4
docs/css/pico.docs.css
View file

@ -155,8 +155,8 @@ main > aside a.secondary:focus {
background-color: transparent;
color: var(--primary-hover);
}
main > aside a.active,
main > aside a.active:hover {
main > aside a[aria-current],
main > aside a[aria-current]:hover {
color: var(--primary);
}
main > aside details {

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/customization.html
View file

File diff suppressed because one or more lines are too long

2
docs/dropdown.html
View file

File diff suppressed because one or more lines are too long

2
docs/forms.html
View file

File diff suppressed because one or more lines are too long

2
docs/grid.html
View file

File diff suppressed because one or more lines are too long

2
docs/index.html
View file

File diff suppressed because one or more lines are too long

2
docs/loading.html
View file

File diff suppressed because one or more lines are too long

2
docs/modal.html
View file

File diff suppressed because one or more lines are too long

2
docs/navs.html
View file

File diff suppressed because one or more lines are too long

2
docs/progress.html
View file

File diff suppressed because one or more lines are too long

2
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

2
docs/scroller.html
View file

File diff suppressed because one or more lines are too long

4
docs/scss/layout/_aside.scss
View file

@ -91,8 +91,8 @@ main > aside {
color: var(--primary-hover);
}
a.active,
a.active:hover {
a[aria-current],
a[aria-current]:hover {
color: var(--primary);
}

2
docs/src/_sidebar.html
View file

@ -68,7 +68,7 @@
<script>
const activeLink = document.querySelector(`aside a#${props.active}`);
const parentAccordion = activeLink.closest('details');
activeLink.classList.add('active');
activeLink.setAttribute('aria-current', 'page');
parentAccordion.setAttribute('open', 'true');
</script>
</aside>

2
docs/tables.html
View file

File diff suppressed because one or more lines are too long

2
docs/themes.html
View file

File diff suppressed because one or more lines are too long

2
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

2
docs/typography.html
View file

File diff suppressed because one or more lines are too long

2
docs/we-love-classes.html
View file

File diff suppressed because one or more lines are too long

1
scss/components/_modal.scss
View file

@ -92,6 +92,7 @@ dialog {
transition: opacity var(--transition);
}
&[aria-current],
&:hover,
&:active,
&:focus {

1
scss/components/_nav.scss
View file

@ -44,6 +44,7 @@ nav {
border-radius: var(--border-radius);
text-decoration: none;
&[aria-current],
&:hover,
&:active,
&:focus {

7
scss/content/_button.scss
View file

@ -77,6 +77,7 @@ input[type="reset"],
box-shadow var(--transition);
}
&[aria-current],
&:hover,
&:active,
&:focus {
@ -106,6 +107,7 @@ input[type="reset"],
--color: var(--secondary-inverse);
cursor: pointer;
&[aria-current],
&:hover,
&:active,
&:focus {
@ -130,6 +132,7 @@ input[type="reset"],
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -153,6 +156,7 @@ input[type="reset"],
--background-color: transparent;
--color: var(--primary);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -169,6 +173,7 @@ input[type="reset"],
[role="button"].outline.secondary {
--color: var(--secondary);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -184,6 +189,7 @@ input[type="reset"],
[role="button"].outline.contrast {
--color: var(--contrast);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -200,6 +206,7 @@ input[type="reset"],
--color: var(--secondary-inverse);
cursor: pointer;
&[aria-current],
&:hover,
&:active,
&:focus {

3
scss/content/_typography.scss
View file

@ -81,6 +81,7 @@ a {
text-decoration var(--transition), box-shadow var(--transition);
}
&[aria-current],
&:hover,
&:active,
&:focus {
@ -97,6 +98,7 @@ a {
&.secondary {
--color: var(--secondary);
&[aria-current],
&:hover,
&:active,
&:focus {
@ -112,6 +114,7 @@ a {
&.contrast {
--color: var(--contrast);
&[aria-current],
&:hover,
&:active,
&:focus {