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

fix: aria-current and focus buttons

Browse source 
Fix for #416
This commit is contained in:
Lucas Larroche 2024-01-04 21:32:34 +07:00
parent 9a18b46e12
commit 75f7ca32dd
11 changed files with 87 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

32
css/pico.classless.css
View file

@ -736,7 +736,7 @@ figure figcaption {
/** /**
* Link * Link
*/ */
a, a:not([role=button]),
[role=link] { [role=link] {
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-background-color: transparent; --pico-background-color: transparent;
@ -752,13 +752,13 @@ 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);
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); 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]:not([aria-current=false]), :hover, :active, :focus), a:not([role=button]):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-hover-underline); --pico-underline: var(--pico-primary-hover-underline);
--pico-text-decoration: underline; --pico-text-decoration: underline;
} }
a:focus-visible, a:not([role=button]):focus-visible,
[role=link]:focus-visible { [role=link]:focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
@ -1003,23 +1003,33 @@ button,
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=submit]:is([aria-current]:not([aria-current=false])),
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=submit]:is(:hover, :active, :focus),
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [type=button]:is([aria-current]:not([aria-current=false])),
[type=button]:is(:hover, :active, :focus),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false])),
[role=button]:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover-background); --pico-background-color: var(--pico-primary-hover-background);
--pico-border-color: var(--pico-primary-hover-border); --pico-border-color: var(--pico-primary-hover-border);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
button:focus, button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit]:focus, [type=submit]:focus,
[type=submit]:is([aria-current]:not([aria-current=false])):focus,
[type=reset]:focus, [type=reset]:focus,
[type=reset]:is([aria-current]:not([aria-current=false])):focus,
[type=button]:focus, [type=button]:focus,
[type=button]:is([aria-current]:not([aria-current=false])):focus,
[type=file]::file-selector-button:focus, [type=file]::file-selector-button:focus,
[role=button]:focus { [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
[role=button]:focus,
[role=button]:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }

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

48
css/pico.css
View file

@ -821,7 +821,7 @@ figure figcaption {
/** /**
* Link * Link
*/ */
a, a:not([role=button]),
[role=link] { [role=link] {
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-background-color: transparent; --pico-background-color: transparent;
@ -837,32 +837,32 @@ 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);
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); 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]:not([aria-current=false]), :hover, :active, :focus), a:not([role=button]):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-hover-underline); --pico-underline: var(--pico-primary-hover-underline);
--pico-text-decoration: underline; --pico-text-decoration: underline;
} }
a:focus-visible, a:not([role=button]):focus-visible,
[role=link]:focus-visible { [role=link]:focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
a.secondary, a:not([role=button]).secondary,
[role=link].secondary { [role=link].secondary {
--pico-color: var(--pico-secondary); --pico-color: var(--pico-secondary);
--pico-underline: var(--pico-secondary-underline); --pico-underline: var(--pico-secondary-underline);
} }
a.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), a:not([role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover); --pico-color: var(--pico-secondary-hover);
--pico-underline: var(--pico-secondary-hover-underline); --pico-underline: var(--pico-secondary-hover-underline);
} }
a.contrast, a:not([role=button]).contrast,
[role=link].contrast { [role=link].contrast {
--pico-color: var(--pico-contrast); --pico-color: var(--pico-contrast);
--pico-underline: var(--pico-contrast-underline); --pico-underline: var(--pico-contrast-underline);
} }
a.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), a:not([role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover); --pico-color: var(--pico-contrast-hover);
--pico-underline: var(--pico-contrast-hover-underline); --pico-underline: var(--pico-contrast-hover-underline);
@ -1108,23 +1108,33 @@ button,
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=submit]:is([aria-current]:not([aria-current=false])),
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=submit]:is(:hover, :active, :focus),
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [type=button]:is([aria-current]:not([aria-current=false])),
[type=button]:is(:hover, :active, :focus),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false])),
[role=button]:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover-background); --pico-background-color: var(--pico-primary-hover-background);
--pico-border-color: var(--pico-primary-hover-border); --pico-border-color: var(--pico-primary-hover-border);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
button:focus, button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit]:focus, [type=submit]:focus,
[type=submit]:is([aria-current]:not([aria-current=false])):focus,
[type=reset]:focus, [type=reset]:focus,
[type=reset]:is([aria-current]:not([aria-current=false])):focus,
[type=button]:focus, [type=button]:focus,
[type=button]:is([aria-current]:not([aria-current=false])):focus,
[type=file]::file-selector-button:focus, [type=file]::file-selector-button:focus,
[role=button]:focus { [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
[role=button]:focus,
[role=button]:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
@ -1149,9 +1159,11 @@ button:focus,
--pico-border-color: var(--pico-secondary-hover-border); --pico-border-color: var(--pico-secondary-hover-border);
--pico-color: var(--pico-secondary-inverse); --pico-color: var(--pico-secondary-inverse);
} }
:is(button, [type=submit], [type=button], [role=button]).secondary:focus, :is(button, [type=submit], [type=button], [role=button]).secondary:focus, :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,
[type=reset]:focus, [type=reset]:focus,
[type=file]::file-selector-button:focus { [type=reset]:is([aria-current]:not([aria-current=false])):focus,
[type=file]::file-selector-button:focus,
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
} }
@ -1165,7 +1177,7 @@ button:focus,
--pico-border-color: var(--pico-contrast-hover-border); --pico-border-color: var(--pico-contrast-hover-border);
--pico-color: var(--pico-contrast-inverse); --pico-color: var(--pico-contrast-inverse);
} }
:is(button, [type=submit], [type=button], [role=button]).contrast:focus { :is(button, [type=submit], [type=button], [role=button]).contrast:focus, :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
} }

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -699,7 +699,7 @@ figure figcaption {
/** /**
* Link * Link
*/ */
a, a:not([role=button]),
[role=link] { [role=link] {
--pico-color: var(--pico-primary); --pico-color: var(--pico-primary);
--pico-background-color: transparent; --pico-background-color: transparent;
@ -715,13 +715,13 @@ 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);
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); 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]:not([aria-current=false]), :hover, :active, :focus), a:not([role=button]):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover); --pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-hover-underline); --pico-underline: var(--pico-primary-hover-underline);
--pico-text-decoration: underline; --pico-text-decoration: underline;
} }
a:focus-visible, a:not([role=button]):focus-visible,
[role=link]:focus-visible { [role=link]:focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
@ -966,23 +966,33 @@ button,
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=submit]:is([aria-current]:not([aria-current=false])),
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=submit]:is(:hover, :active, :focus),
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), [type=reset]:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { [type=button]:is([aria-current]:not([aria-current=false])),
[type=button]:is(:hover, :active, :focus),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false])),
[role=button]:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover-background); --pico-background-color: var(--pico-primary-hover-background);
--pico-border-color: var(--pico-primary-hover-border); --pico-border-color: var(--pico-primary-hover-border);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse); --pico-color: var(--pico-primary-inverse);
} }
button:focus, button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit]:focus, [type=submit]:focus,
[type=submit]:is([aria-current]:not([aria-current=false])):focus,
[type=reset]:focus, [type=reset]:focus,
[type=reset]:is([aria-current]:not([aria-current=false])):focus,
[type=button]:focus, [type=button]:focus,
[type=button]:is([aria-current]:not([aria-current=false])):focus,
[type=file]::file-selector-button:focus, [type=file]::file-selector-button:focus,
[role=button]:focus { [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
[role=button]:focus,
[role=button]:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }

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.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
scss/content/_button.scss
View file

@ -66,7 +66,8 @@
box-shadow var(#{$css-var-prefix}transition); box-shadow var(#{$css-var-prefix}transition);
} }
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"])),
&:is(:hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background); #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border); #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
#{$css-var-prefix}box-shadow: var( #{$css-var-prefix}box-shadow: var(
@ -76,7 +77,8 @@
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
} }
&:focus { &:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
@ -106,7 +108,8 @@
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
} }
&:focus { &:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
@ -125,7 +128,8 @@
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse); #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
} }
&:focus { &:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow: #{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus); 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);

2
scss/content/_link.scss
View file

@ -6,7 +6,7 @@
* Link * Link
*/ */
a, a:not([role="button"]),
[role="link"] { [role="link"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary); #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}background-color: transparent; #{$css-var-prefix}background-color: transparent;