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

feat(accessibility): Add aria-current

Browse source
This commit is contained in:
Lucas Larroche 2022-02-27 16:12:53 +07:00
parent b0255697d7
commit df298eb4aa
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);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration 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); --color: var(--primary-hover);
--text-decoration: underline; --text-decoration: underline;
} }
@ -947,16 +947,20 @@ input[type=reset],
cursor: pointer; cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); 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]:hover,
input[type=submit]:active, input[type=submit]:active,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover, input[type=button]:hover,
input[type=button]:active, input[type=button]:active,
input[type=button]:focus, input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover, [role=button]:hover,
[role=button]:active, [role=button]:active,
[role=button]:focus { [role=button]:focus {
@ -980,7 +984,7 @@ input[type=reset] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
cursor: pointer; 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); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }
@ -1987,7 +1991,7 @@ nav a {
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; 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; 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);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration 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); --color: var(--primary-hover);
--text-decoration: underline; --text-decoration: underline;
} }
@ -699,7 +699,7 @@ a:focus {
a.secondary { a.secondary {
--color: var(--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); --color: var(--secondary-hover);
} }
a.secondary:focus { a.secondary:focus {
@ -708,7 +708,7 @@ a.secondary:focus {
a.contrast { a.contrast {
--color: var(--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); --color: var(--contrast-hover);
} }
a.contrast:focus { a.contrast:focus {
@ -998,16 +998,20 @@ input[type=reset],
cursor: pointer; cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); 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]:hover,
input[type=submit]:active, input[type=submit]:active,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover, input[type=button]:hover,
input[type=button]:active, input[type=button]:active,
input[type=button]:focus, input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover, [role=button]:hover,
[role=button]:active, [role=button]:active,
[role=button]:focus { [role=button]:focus {
@ -1035,16 +1039,20 @@ input[type=reset],
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
cursor: pointer; 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:hover,
input[type=submit].secondary:active, input[type=submit].secondary:active,
input[type=submit].secondary:focus, input[type=submit].secondary:focus,
input[type=button].secondary[aria-current],
input[type=button].secondary:hover, input[type=button].secondary:hover,
input[type=button].secondary:active, input[type=button].secondary:active,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset][aria-current],
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
[role=button].secondary[aria-current],
[role=button].secondary:hover, [role=button].secondary:hover,
[role=button].secondary:active, [role=button].secondary:active,
[role=button].secondary:focus { [role=button].secondary:focus {
@ -1070,16 +1078,20 @@ input[type=reset].contrast,
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --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:hover,
input[type=submit].contrast:active, input[type=submit].contrast:active,
input[type=submit].contrast:focus, input[type=submit].contrast:focus,
input[type=button].contrast[aria-current],
input[type=button].contrast:hover, input[type=button].contrast:hover,
input[type=button].contrast:active, input[type=button].contrast:active,
input[type=button].contrast:focus, input[type=button].contrast:focus,
input[type=reset].contrast[aria-current],
input[type=reset].contrast:hover, input[type=reset].contrast:hover,
input[type=reset].contrast:active, input[type=reset].contrast:active,
input[type=reset].contrast:focus, input[type=reset].contrast:focus,
[role=button].contrast[aria-current],
[role=button].contrast:hover, [role=button].contrast:hover,
[role=button].contrast:active, [role=button].contrast:active,
[role=button].contrast:focus { [role=button].contrast:focus {
@ -1104,16 +1116,20 @@ input[type=reset].outline,
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --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:hover,
input[type=submit].outline:active, input[type=submit].outline:active,
input[type=submit].outline:focus, input[type=submit].outline:focus,
input[type=button].outline[aria-current],
input[type=button].outline:hover, input[type=button].outline:hover,
input[type=button].outline:active, input[type=button].outline:active,
input[type=button].outline:focus, input[type=button].outline:focus,
input[type=reset].outline[aria-current],
input[type=reset].outline:hover, input[type=reset].outline:hover,
input[type=reset].outline:active, input[type=reset].outline:active,
input[type=reset].outline:focus, input[type=reset].outline:focus,
[role=button].outline[aria-current],
[role=button].outline:hover, [role=button].outline:hover,
[role=button].outline:active, [role=button].outline:active,
[role=button].outline:focus { [role=button].outline:focus {
@ -1128,16 +1144,20 @@ input[type=reset].outline.secondary,
[role=button].outline.secondary { [role=button].outline.secondary {
--color: var(--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:hover,
input[type=submit].outline.secondary:active, input[type=submit].outline.secondary:active,
input[type=submit].outline.secondary:focus, input[type=submit].outline.secondary:focus,
input[type=button].outline.secondary[aria-current],
input[type=button].outline.secondary:hover, input[type=button].outline.secondary:hover,
input[type=button].outline.secondary:active, input[type=button].outline.secondary:active,
input[type=button].outline.secondary:focus, input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary[aria-current],
input[type=reset].outline.secondary:hover, input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active, input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus, input[type=reset].outline.secondary:focus,
[role=button].outline.secondary[aria-current],
[role=button].outline.secondary:hover, [role=button].outline.secondary:hover,
[role=button].outline.secondary:active, [role=button].outline.secondary:active,
[role=button].outline.secondary:focus { [role=button].outline.secondary:focus {
@ -1151,16 +1171,20 @@ input[type=reset].outline.contrast,
[role=button].outline.contrast { [role=button].outline.contrast {
--color: var(--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:hover,
input[type=submit].outline.contrast:active, input[type=submit].outline.contrast:active,
input[type=submit].outline.contrast:focus, input[type=submit].outline.contrast:focus,
input[type=button].outline.contrast[aria-current],
input[type=button].outline.contrast:hover, input[type=button].outline.contrast:hover,
input[type=button].outline.contrast:active, input[type=button].outline.contrast:active,
input[type=button].outline.contrast:focus, input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast[aria-current],
input[type=reset].outline.contrast:hover, input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active, input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus, input[type=reset].outline.contrast:focus,
[role=button].outline.contrast[aria-current],
[role=button].outline.contrast:hover, [role=button].outline.contrast:hover,
[role=button].outline.contrast:active, [role=button].outline.contrast:active,
[role=button].outline.contrast:focus { [role=button].outline.contrast:focus {
@ -2137,7 +2161,7 @@ dialog article .close {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--transition); 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; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
@ -2264,7 +2288,7 @@ nav a {
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; 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; 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);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration 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); --color: var(--primary-hover);
--text-decoration: underline; --text-decoration: underline;
} }
@ -917,16 +917,20 @@ input[type=reset],
cursor: pointer; cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); 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]:hover,
input[type=submit]:active, input[type=submit]:active,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover, input[type=button]:hover,
input[type=button]:active, input[type=button]:active,
input[type=button]:focus, input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover, [role=button]:hover,
[role=button]:active, [role=button]:active,
[role=button]:focus { [role=button]:focus {
@ -950,7 +954,7 @@ input[type=reset] {
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
cursor: pointer; 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); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
} }
@ -1957,7 +1961,7 @@ nav a {
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; 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; 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); -webkit-text-decoration: var(--text-decoration);
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); --color: var(--primary-hover);
--text-decoration: underline; --text-decoration: underline;
} }
@ -628,7 +628,7 @@ a:focus {
a.secondary { a.secondary {
--color: var(--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); --color: var(--secondary-hover);
} }
a.secondary:focus { a.secondary:focus {
@ -637,7 +637,7 @@ a.secondary:focus {
a.contrast { a.contrast {
--color: var(--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); --color: var(--contrast-hover);
} }
a.contrast:focus { a.contrast:focus {
@ -926,16 +926,20 @@ input[type=reset],
text-align: center; text-align: center;
cursor: pointer; 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]:hover,
input[type=submit]:active, input[type=submit]:active,
input[type=submit]:focus, input[type=submit]:focus,
input[type=button][aria-current],
input[type=button]:hover, input[type=button]:hover,
input[type=button]:active, input[type=button]:active,
input[type=button]:focus, input[type=button]:focus,
input[type=reset][aria-current],
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
[role=button][aria-current],
[role=button]:hover, [role=button]:hover,
[role=button]:active, [role=button]:active,
[role=button]:focus { [role=button]:focus {
@ -963,16 +967,20 @@ input[type=reset],
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
cursor: pointer; 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:hover,
input[type=submit].secondary:active, input[type=submit].secondary:active,
input[type=submit].secondary:focus, input[type=submit].secondary:focus,
input[type=button].secondary[aria-current],
input[type=button].secondary:hover, input[type=button].secondary:hover,
input[type=button].secondary:active, input[type=button].secondary:active,
input[type=button].secondary:focus, input[type=button].secondary:focus,
input[type=reset][aria-current],
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus, input[type=reset]:focus,
[role=button].secondary[aria-current],
[role=button].secondary:hover, [role=button].secondary:hover,
[role=button].secondary:active, [role=button].secondary:active,
[role=button].secondary:focus { [role=button].secondary:focus {
@ -998,16 +1006,20 @@ input[type=reset].contrast,
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --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:hover,
input[type=submit].contrast:active, input[type=submit].contrast:active,
input[type=submit].contrast:focus, input[type=submit].contrast:focus,
input[type=button].contrast[aria-current],
input[type=button].contrast:hover, input[type=button].contrast:hover,
input[type=button].contrast:active, input[type=button].contrast:active,
input[type=button].contrast:focus, input[type=button].contrast:focus,
input[type=reset].contrast[aria-current],
input[type=reset].contrast:hover, input[type=reset].contrast:hover,
input[type=reset].contrast:active, input[type=reset].contrast:active,
input[type=reset].contrast:focus, input[type=reset].contrast:focus,
[role=button].contrast[aria-current],
[role=button].contrast:hover, [role=button].contrast:hover,
[role=button].contrast:active, [role=button].contrast:active,
[role=button].contrast:focus { [role=button].contrast:focus {
@ -1032,16 +1044,20 @@ input[type=reset].outline,
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --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:hover,
input[type=submit].outline:active, input[type=submit].outline:active,
input[type=submit].outline:focus, input[type=submit].outline:focus,
input[type=button].outline[aria-current],
input[type=button].outline:hover, input[type=button].outline:hover,
input[type=button].outline:active, input[type=button].outline:active,
input[type=button].outline:focus, input[type=button].outline:focus,
input[type=reset].outline[aria-current],
input[type=reset].outline:hover, input[type=reset].outline:hover,
input[type=reset].outline:active, input[type=reset].outline:active,
input[type=reset].outline:focus, input[type=reset].outline:focus,
[role=button].outline[aria-current],
[role=button].outline:hover, [role=button].outline:hover,
[role=button].outline:active, [role=button].outline:active,
[role=button].outline:focus { [role=button].outline:focus {
@ -1056,16 +1072,20 @@ input[type=reset].outline.secondary,
[role=button].outline.secondary { [role=button].outline.secondary {
--color: var(--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:hover,
input[type=submit].outline.secondary:active, input[type=submit].outline.secondary:active,
input[type=submit].outline.secondary:focus, input[type=submit].outline.secondary:focus,
input[type=button].outline.secondary[aria-current],
input[type=button].outline.secondary:hover, input[type=button].outline.secondary:hover,
input[type=button].outline.secondary:active, input[type=button].outline.secondary:active,
input[type=button].outline.secondary:focus, input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary[aria-current],
input[type=reset].outline.secondary:hover, input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active, input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus, input[type=reset].outline.secondary:focus,
[role=button].outline.secondary[aria-current],
[role=button].outline.secondary:hover, [role=button].outline.secondary:hover,
[role=button].outline.secondary:active, [role=button].outline.secondary:active,
[role=button].outline.secondary:focus { [role=button].outline.secondary:focus {
@ -1079,16 +1099,20 @@ input[type=reset].outline.contrast,
[role=button].outline.contrast { [role=button].outline.contrast {
--color: var(--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:hover,
input[type=submit].outline.contrast:active, input[type=submit].outline.contrast:active,
input[type=submit].outline.contrast:focus, input[type=submit].outline.contrast:focus,
input[type=button].outline.contrast[aria-current],
input[type=button].outline.contrast:hover, input[type=button].outline.contrast:hover,
input[type=button].outline.contrast:active, input[type=button].outline.contrast:active,
input[type=button].outline.contrast:focus, input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast[aria-current],
input[type=reset].outline.contrast:hover, input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active, input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus, input[type=reset].outline.contrast:focus,
[role=button].outline.contrast[aria-current],
[role=button].outline.contrast:hover, [role=button].outline.contrast:hover,
[role=button].outline.contrast:active, [role=button].outline.contrast:active,
[role=button].outline.contrast:focus { [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; background-color: transparent;
color: var(--primary-hover); color: var(--primary-hover);
} }
main > aside a.active, main > aside a[aria-current],
main > aside a.active:hover { main > aside a[aria-current]:hover {
color: var(--primary); color: var(--primary);
} }
main > aside details { 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); color: var(--primary-hover);
} }
a.active, a[aria-current],
a.active:hover { a[aria-current]:hover {
color: var(--primary); color: var(--primary);
} }

2
docs/src/_sidebar.html
View file

@ -68,7 +68,7 @@
<script> <script>
const activeLink = document.querySelector(`aside a#${props.active}`); const activeLink = document.querySelector(`aside a#${props.active}`);
const parentAccordion = activeLink.closest('details'); const parentAccordion = activeLink.closest('details');
activeLink.classList.add('active'); activeLink.setAttribute('aria-current', 'page');
parentAccordion.setAttribute('open', 'true'); parentAccordion.setAttribute('open', 'true');
</script> </script>
</aside> </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); transition: opacity var(--transition);
} }
&[aria-current],
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {

1
scss/components/_nav.scss
View file

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

7
scss/content/_button.scss
View file

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

3
scss/content/_typography.scss
View file

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