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 989af877ef
10 changed files with 73 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/pico.classless.css
View file

@ -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

34
css/pico.css
View file

@ -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

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

@ -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);