Skip to content

Commit

Permalink
Improve shadow DOM focus rects (microsoft#29750)
Browse files Browse the repository at this point in the history 
* fix: improve focus rects support in shadow DOM

Moves the FocusRectsProvider to be outside of the shadow DOM, removing
a <div> inside the shadow root. Now the FocusRects class name is applied
to the shadow root host element and the focus visibility styles are applied
by using the `:host()` selector on the shadow root.

* update snapshots

* link: supports focus rects in shadow dom

* checkbox: supports focus rects in shadow dom

* update styles to support focus rects in shadow dom

* update snapshots

* update snapshots

* Updating snapshots.

---------

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>
  • Loading branch information
@spmonahan @khmakoto
spmonahan and khmakoto committed Nov 16, 2023
1 parent d0376d0 commit 9675a27
Show file tree
Hide file tree
Showing 89 changed files with 13,485 additions and 87 deletions.
2 changes: 2 additions & 0 deletions packages/merge-styles/src/styleToClassName.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ function expandCommaSeparatedGlobals(selectorWithGlobals: string): string {
function expandSelector(newSelector: string, currentSelector: string): string {
if (newSelector.indexOf(':global(') >= 0) {
return newSelector.replace(globalSelectorRegExp, '$1');
} else if (newSelector.indexOf(':host(') === 0) {
return newSelector;
} else if (newSelector.indexOf(':') === 0) {
return currentSelector + newSelector;
} else if (newSelector.indexOf('&') < 0) {
Expand Down
168 changes: 168 additions & 0 deletions packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,20 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -853,6 +867,20 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -1303,6 +1331,20 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -1719,6 +1761,20 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -2078,6 +2134,20 @@ exports[`AreaChart snapShot testing Should render with default colors when line
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -2437,6 +2507,20 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -2782,6 +2866,20 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -3124,6 +3222,20 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -3678,6 +3790,20 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -4037,6 +4163,20 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -4396,6 +4536,20 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -4755,6 +4909,20 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
outline-color: #605e5c;
}
:host(.ms-Fabric--isFocusVisible) &:focus:after {
border: 1px solid transparent;
bottom: 1px;
content: "";
left: 1px;
outline: 1px solid #605e5c;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
outline-color: #605e5c;
}
data-is-focusable={true}
onBlur={[Function]}
onClick={[Function]}
Expand Down
Loading

0 comments on commit 9675a27

Please sign in to comment.