Skip to content

Commit 346126e

Browse files
pat270pat270
committed
fix(@clayui/css): LPD-45799 Cadmin c-prefers-focus should output correct selector
1 parent 21fa98d commit 346126e

20 files changed

+70
-391
lines changed

‎packages/clay-css/src/scss/atlas/variables/_globals.scss

+6
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ $focus-visible-selector: if(
2222
'&:focus'
2323
) !default;
2424

25+
$c-prefers-focus-selector: if(
26+
$enable-focus-visible,
27+
'.c-prefers-focus &:focus',
28+
''
29+
);
30+
2531
$enable-lexicon-flat-colors: true !default;
2632
$enable-scaling-components: true !default;
2733
$scaling-breakpoint-down: sm !default;

‎packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,8 @@
175175

176176
@at-root {
177177
&.focus,
178-
#{$focus-visible-selector} {
178+
#{$focus-visible-selector},
179+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
179180
box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
180181
}
181182
}
@@ -272,7 +273,8 @@
272273

273274
@at-root {
274275
&.focus,
275-
#{$focus-visible-selector} {
276+
#{$focus-visible-selector},
277+
#{if($c-prefers-focus-selector, $c-prefers-focus-selector, clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
276278
background-color: $cadmin-multi-step-icon-focus-bg;
277279
box-shadow: $cadmin-multi-step-icon-focus-box-shadow;
278280
color: $cadmin-multi-step-icon-focus-color;

‎packages/clay-css/src/scss/cadmin/variables/_globals.scss

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ $focus-visible-selector: if(
2222
'&:focus'
2323
) !default;
2424

25+
$c-prefers-focus-selector: null !default;
26+
2527
$cadmin-scaling-breakpoint-down: sm !default;
2628

2729
// This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to `false` if you want the Clay color function to return the CSS Custom Property without any modifications.

‎packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ $cadmin-multi-step-icon-hover-bg: $cadmin-multi-step-icon-bg !default;
2222
$cadmin-multi-step-icon-hover-color: $cadmin-multi-step-icon-color !default;
2323
$cadmin-multi-step-icon-hover-text-decoration: none !default;
2424

25-
$cadmin-multi-step-icon-focus-bg: $cadmin-multi-step-icon-hover-bg !default;
25+
$cadmin-multi-step-icon-focus-bg: null !default;
2626
$cadmin-multi-step-icon-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
27-
$cadmin-multi-step-icon-focus-color: $cadmin-multi-step-icon-hover-color !default;
27+
$cadmin-multi-step-icon-focus-color: null !default;
2828
$cadmin-multi-step-icon-focus-outline: 0 !default;
2929
$cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-text-decoration !default;
3030

‎packages/clay-css/src/scss/components/_multi-step-nav.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,8 @@
189189

190190
@at-root {
191191
&.focus,
192-
#{$focus-visible-selector} {
192+
#{$focus-visible-selector},
193+
.c-prefers-focus &:focus {
193194
box-shadow: $multi-step-icon-disabled-focus-box-shadow;
194195
}
195196
}
@@ -282,7 +283,8 @@
282283

283284
@at-root {
284285
&.focus,
285-
#{$focus-visible-selector} {
286+
#{$focus-visible-selector},
287+
.c-prefers-focus &:focus {
286288
background-color: $multi-step-icon-focus-bg;
287289
box-shadow: $multi-step-icon-focus-box-shadow;
288290
color: $multi-step-icon-focus-color;

‎packages/clay-css/src/scss/functions/_global-functions.scss

+8-2
Original file line numberDiff line numberDiff line change
@@ -170,11 +170,17 @@
170170
/// @param {String} $selector - The full selector
171171

172172
@function clay-insert-before($location, $insert, $selector: &) {
173-
@return clay-str-replace(
174-
'#{$selector}',
173+
$newSelector: clay-str-replace(
174+
'#{&}',
175175
'#{$location}',
176176
'#{$insert}#{$location}'
177177
);
178+
179+
@if ($selector == '&:focus') {
180+
@return '#{$newSelector}:focus';
181+
}
182+
183+
@return $newSelector;
178184
}
179185

180186
/// A helper function for displaying warning messages for required variables.

‎packages/clay-css/src/scss/mixins/_buttons.scss

+4-29
Original file line numberDiff line numberDiff line change
@@ -250,31 +250,6 @@
250250

251251
$breakpoint-down: map-get($map, breakpoint-down);
252252

253-
$_enable-focus-visible: if(
254-
variable-exists(enable-focus-visible),
255-
$enable-focus-visible,
256-
if(
257-
variable-exists(cadmin-enable-focus-visible),
258-
$cadmin-enable-focus-visible,
259-
true
260-
)
261-
);
262-
263-
$_c-prefers-focus-selector: if(
264-
$_enable-focus-visible,
265-
'.c-prefers-focus &:focus',
266-
''
267-
);
268-
269-
@if (variable-exists(cadmin-enable-focus-visible)) and
270-
($_enable-focus-visible)
271-
{
272-
$_c-prefers-focus-selector: clay-insert-before(
273-
'.cadmin',
274-
'.c-prefers-focus '
275-
);
276-
}
277-
278253
$base: map-merge(
279254
$map,
280255
(
@@ -732,7 +707,7 @@
732707
@at-root {
733708
&.focus,
734709
#{$focus-visible-selector},
735-
#{$_c-prefers-focus-selector} {
710+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
736711
@include clay-css($focus);
737712

738713
&::before {
@@ -790,7 +765,7 @@
790765

791766
@at-root {
792767
#{$focus-visible-selector},
793-
#{$_c-prefers-focus-selector} {
768+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
794769
@include clay-css($active-focus);
795770

796771
&::before {
@@ -837,7 +812,7 @@
837812

838813
@at-root {
839814
#{$focus-visible-selector},
840-
#{$_c-prefers-focus-selector} {
815+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
841816
@include clay-css(
842817
map-deep-get($map, active-class, focus)
843818
);
@@ -881,7 +856,7 @@
881856

882857
@at-root {
883858
#{$focus-visible-selector},
884-
#{$_c-prefers-focus-selector} {
859+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
885860
@include clay-css(map-get($disabled, focus));
886861

887862
&::before {

‎packages/clay-css/src/scss/mixins/_cards.scss

+1-26
Original file line numberDiff line numberDiff line change
@@ -297,31 +297,6 @@
297297
@if (type-of($map) == 'map') {
298298
$enabled: setter(map-get($map, enabled), true);
299299

300-
$_enable-focus-visible: if(
301-
variable-exists(enable-focus-visible),
302-
$enable-focus-visible,
303-
if(
304-
variable-exists(cadmin-enable-focus-visible),
305-
$cadmin-enable-focus-visible,
306-
true
307-
)
308-
);
309-
310-
$_c-prefers-focus-selector: if(
311-
$_enable-focus-visible,
312-
'.c-prefers-focus &:focus',
313-
''
314-
);
315-
316-
@if (variable-exists(cadmin-enable-focus-visible)) and
317-
($_enable-focus-visible)
318-
{
319-
$_c-prefers-focus-selector: clay-insert-before(
320-
'.cadmin',
321-
'.c-prefers-focus '
322-
);
323-
}
324-
325300
$base: map-merge(
326301
$map,
327302
(
@@ -736,7 +711,7 @@
736711
@at-root {
737712
&.focus,
738713
#{$focus-visible-selector},
739-
#{$_c-prefers-focus-selector} {
714+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
740715
@include clay-css($focus);
741716

742717
&::after {

‎packages/clay-css/src/scss/mixins/_close.scss

+2-27
Original file line numberDiff line numberDiff line change
@@ -67,31 +67,6 @@
6767
@if (type-of($map) == 'map') {
6868
$enabled: setter(map-get($map, enabled), true);
6969

70-
$_enable-focus-visible: if(
71-
variable-exists(enable-focus-visible),
72-
$enable-focus-visible,
73-
if(
74-
variable-exists(cadmin-enable-focus-visible),
75-
$cadmin-enable-focus-visible,
76-
true
77-
)
78-
);
79-
80-
$_c-prefers-focus-selector: if(
81-
$_enable-focus-visible,
82-
'.c-prefers-focus &:focus',
83-
''
84-
);
85-
86-
@if (variable-exists(cadmin-enable-focus-visible)) and
87-
($_enable-focus-visible)
88-
{
89-
$_c-prefers-focus-selector: clay-insert-before(
90-
'.cadmin',
91-
'.c-prefers-focus '
92-
);
93-
}
94-
9570
$base: map-merge(
9671
$map,
9772
(
@@ -382,7 +357,7 @@
382357
@at-root {
383358
button#{&} {
384359
#{$focus-visible-selector},
385-
#{$_c-prefers-focus-selector} {
360+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
386361
@include clay-css($btn-focus);
387362
}
388363
}
@@ -391,7 +366,7 @@
391366
@at-root {
392367
&.focus,
393368
#{$focus-visible-selector},
394-
#{$_c-prefers-focus-selector} {
369+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
395370
@include clay-css($focus);
396371
}
397372
}

‎packages/clay-css/src/scss/mixins/_custom-forms.scss

+3-28
Original file line numberDiff line numberDiff line change
@@ -103,31 +103,6 @@
103103
@if (type-of($map) == 'map') {
104104
$enabled: setter(map-get($map, enabled), true);
105105

106-
$_enable-focus-visible: if(
107-
variable-exists(enable-focus-visible),
108-
$enable-focus-visible,
109-
if(
110-
variable-exists(cadmin-enable-focus-visible),
111-
$cadmin-enable-focus-visible,
112-
true
113-
)
114-
);
115-
116-
$_c-prefers-focus-selector: if(
117-
$_enable-focus-visible,
118-
'.c-prefers-focus &:focus',
119-
''
120-
);
121-
122-
@if (variable-exists(cadmin-enable-focus-visible)) and
123-
($_enable-focus-visible)
124-
{
125-
$_c-prefers-focus-selector: clay-insert-before(
126-
'.cadmin',
127-
'.c-prefers-focus '
128-
);
129-
}
130-
131106
@if ($enabled) {
132107
@include clay-css($map);
133108

@@ -167,7 +142,7 @@
167142

168143
@at-root {
169144
#{$focus-visible-selector},
170-
#{$_c-prefers-focus-selector} {
145+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
171146
~ .custom-control-label::before {
172147
@include clay-css(
173148
map-deep-get(
@@ -427,7 +402,7 @@
427402
@at-root {
428403
&:checked {
429404
#{$focus-visible-selector},
430-
#{$_c-prefers-focus-selector} {
405+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
431406
~ .custom-control-label::before {
432407
@include clay-css(
433408
map-deep-get(
@@ -657,7 +632,7 @@
657632
@at-root {
658633
&:indeterminate {
659634
#{$focus-visible-selector},
660-
#{$_c-prefers-focus-selector} {
635+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
661636
~ .custom-control-label::before {
662637
@include clay-css(
663638
map-deep-get(

‎packages/clay-css/src/scss/mixins/_dropdown-menu.scss

+4-24
Original file line numberDiff line numberDiff line change
@@ -364,26 +364,6 @@
364364
setter(map-get($map, hover-c-kbd-inline), ())
365365
);
366366

367-
$_enable-focus-visible: if(
368-
variable-exists(enable-focus-visible),
369-
$enable-focus-visible,
370-
if(
371-
variable-exists(cadmin-enable-focus-visible),
372-
$cadmin-enable-focus-visible,
373-
true
374-
)
375-
);
376-
$_focus-selector: if(
377-
$_enable-focus-visible,
378-
'&:focus-visible',
379-
'&:focus'
380-
);
381-
$_prefers-focus-selector: if(
382-
$_enable-focus-visible,
383-
'.c-prefers-focus &:focus',
384-
''
385-
);
386-
387367
$focus: setter(map-get($map, focus), ());
388368
$focus: map-deep-merge(
389369
$focus,
@@ -656,8 +636,8 @@
656636

657637
@at-root {
658638
&.focus,
659-
#{$_focus-selector},
660-
#{$_prefers-focus-selector} {
639+
#{$focus-visible-selector},
640+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
661641
@include clay-css($focus);
662642

663643
&::before {
@@ -738,8 +718,8 @@
738718
@at-root {
739719
&.btn:not([disabled]):not(.disabled):active,
740720
&.btn:not([disabled]):not(.disabled).active {
741-
#{$_focus-selector},
742-
#{$_prefers-focus-selector} {
721+
#{$focus-visible-selector},
722+
#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
743723
box-shadow: map-get($focus, box-shadow);
744724
}
745725
}

0 commit comments

Comments
 (0)