diff --git a/packages/merge-styles/src/styleToClassName.ts b/packages/merge-styles/src/styleToClassName.ts index 107e650b41b088..785509310d0988 100644 --- a/packages/merge-styles/src/styleToClassName.ts +++ b/packages/merge-styles/src/styleToClassName.ts @@ -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) { diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index f3a1c25b5d5363..00ee3c4c09691c 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} @@ -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]} diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap index e8510a6b685ec8..974157357d2331 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -401,6 +401,20 @@ exports[`Area chart rendering Should render the area chart with date x-axis data @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" role="option" tabindex="0" @@ -487,6 +501,20 @@ exports[`Area chart rendering Should render the area chart with date x-axis data @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" role="option" tabindex="-1" @@ -1207,6 +1235,20 @@ exports[`Area chart rendering Should render the area chart with numeric x-axis d @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" role="option" tabindex="0" @@ -1293,6 +1335,20 @@ exports[`Area chart rendering Should render the area chart with numeric x-axis d @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" role="option" tabindex="-1" @@ -1379,6 +1435,20 @@ exports[`Area chart rendering Should render the area chart with numeric x-axis d @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" role="option" tabindex="-1" @@ -2099,6 +2169,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="0" @@ -2185,6 +2269,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -2271,6 +2369,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -2991,6 +3103,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="0" @@ -3077,6 +3203,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -3163,6 +3303,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -3896,6 +4050,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -3982,6 +4150,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -4068,6 +4250,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index c32f3c39fa3766..9da117ecbb24c4 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -401,6 +401,20 @@ exports[`DonutChart - mouse events Should render callout correctly 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]} @@ -492,6 +506,20 @@ exports[`DonutChart - mouse events Should render callout correctly 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]} @@ -583,6 +611,20 @@ exports[`DonutChart - mouse events Should render callout correctly 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]} @@ -955,6 +997,20 @@ exports[`DonutChart - 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]} @@ -1046,6 +1102,20 @@ exports[`DonutChart - 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]} @@ -1137,6 +1207,20 @@ exports[`DonutChart - 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]} @@ -1479,6 +1563,20 @@ exports[`DonutChart snapShot testing Should render arc labels 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]} @@ -1569,6 +1667,20 @@ exports[`DonutChart snapShot testing Should render arc labels 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]} @@ -1659,6 +1771,20 @@ exports[`DonutChart snapShot testing Should render arc labels 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]} @@ -2001,6 +2127,20 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form @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]} @@ -2091,6 +2231,20 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form @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]} @@ -2181,6 +2335,20 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form @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]} @@ -2475,6 +2643,20 @@ exports[`DonutChart snapShot testing renders DonutChart 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]} @@ -2565,6 +2747,20 @@ exports[`DonutChart snapShot testing renders DonutChart 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]} @@ -2655,6 +2851,20 @@ exports[`DonutChart snapShot testing renders DonutChart 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]} @@ -2949,6 +3159,20 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color @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]} @@ -3039,6 +3263,20 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color @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]} @@ -3129,6 +3367,20 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color @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]} @@ -3423,6 +3675,20 @@ exports[`DonutChart 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]} @@ -3513,6 +3779,20 @@ exports[`DonutChart 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]} @@ -3603,6 +3883,20 @@ exports[`DonutChart 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]} @@ -4031,6 +4325,20 @@ exports[`DonutChart 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]} @@ -4121,6 +4429,20 @@ exports[`DonutChart 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]} @@ -4211,6 +4533,20 @@ exports[`DonutChart 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]} @@ -4523,6 +4859,20 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 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]} @@ -4613,6 +4963,20 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 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]} @@ -4703,6 +5067,20 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 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]} diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap index 7eda54d6c6aaf5..6608eb93932919 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -361,6 +361,20 @@ exports[`Donut chart interactions Should hide callout on mouse leave 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" role="option" tabindex="0" @@ -447,6 +461,20 @@ exports[`Donut chart interactions Should hide callout on mouse leave 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" role="option" tabindex="-1" @@ -533,6 +561,20 @@ exports[`Donut chart interactions Should hide callout on mouse leave 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" role="option" tabindex="-1" @@ -812,6 +854,20 @@ exports[`Donut chart interactions Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -898,6 +954,20 @@ exports[`Donut chart interactions Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -984,6 +1054,20 @@ exports[`Donut chart interactions Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -1436,6 +1520,20 @@ exports[`DonutChart - mouse events Should render callout correctly 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]} @@ -1527,6 +1625,20 @@ exports[`DonutChart - mouse events Should render callout correctly 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]} @@ -1618,6 +1730,20 @@ exports[`DonutChart - mouse events Should render callout correctly 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]} @@ -1990,6 +2116,20 @@ exports[`DonutChart - 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]} @@ -2081,6 +2221,20 @@ exports[`DonutChart - 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]} @@ -2172,6 +2326,20 @@ exports[`DonutChart - 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]} @@ -2514,6 +2682,20 @@ exports[`DonutChart snapShot testing Should render arc labels 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]} @@ -2604,6 +2786,20 @@ exports[`DonutChart snapShot testing Should render arc labels 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]} @@ -2694,6 +2890,20 @@ exports[`DonutChart snapShot testing Should render arc labels 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]} @@ -3036,6 +3246,20 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form @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]} @@ -3126,6 +3350,20 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form @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]} @@ -3216,6 +3454,20 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form @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]} @@ -3510,6 +3762,20 @@ exports[`DonutChart snapShot testing renders DonutChart 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]} @@ -3600,6 +3866,20 @@ exports[`DonutChart snapShot testing renders DonutChart 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]} @@ -3690,6 +3970,20 @@ exports[`DonutChart snapShot testing renders DonutChart 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]} @@ -3984,6 +4278,20 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color @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]} @@ -4074,6 +4382,20 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color @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]} @@ -4164,6 +4486,20 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color @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]} @@ -4458,6 +4794,20 @@ exports[`DonutChart 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]} @@ -4548,6 +4898,20 @@ exports[`DonutChart 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]} @@ -4638,6 +5002,20 @@ exports[`DonutChart 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]} @@ -5066,6 +5444,20 @@ exports[`DonutChart 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]} @@ -5156,6 +5548,20 @@ exports[`DonutChart 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]} @@ -5246,6 +5652,20 @@ exports[`DonutChart 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]} @@ -5558,6 +5978,20 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 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]} @@ -5648,6 +6082,20 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 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]} @@ -5738,6 +6186,20 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 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]} diff --git a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap index e460dbf1020bc2..66b2650dab0ac7 100644 --- a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap +++ b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap @@ -263,6 +263,20 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou @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" role="option" tabindex="0" @@ -349,6 +363,20 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou @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" role="option" tabindex="-1" @@ -435,6 +463,20 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou @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" role="option" tabindex="-1" @@ -1043,6 +1085,20 @@ exports[`GaugeChart - snapshot testing should not render min and max values of t @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]} @@ -1134,6 +1190,20 @@ exports[`GaugeChart - snapshot testing should not render min and max values of t @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]} @@ -1225,6 +1295,20 @@ exports[`GaugeChart - snapshot testing should not render min and max values of t @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]} @@ -1769,6 +1853,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart 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]} @@ -1860,6 +1958,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart 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]} @@ -1951,6 +2063,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart 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]} @@ -2316,6 +2442,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart correctly in dar @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable={true} onBlur={[Function]} onClick={[Function]} @@ -2407,6 +2547,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart correctly in dar @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable={true} onBlur={[Function]} onClick={[Function]} @@ -2498,6 +2652,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart correctly in dar @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable={true} onBlur={[Function]} onClick={[Function]} @@ -2851,6 +3019,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart correctly when t @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]} @@ -2942,6 +3124,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart correctly when t @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]} @@ -3033,6 +3229,20 @@ exports[`GaugeChart - snapshot testing should render GaugeChart correctly when t @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]} @@ -3365,6 +3575,20 @@ exports[`GaugeChart - snapshot testing should render a color from DataVizPalette @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]} @@ -3456,6 +3680,20 @@ exports[`GaugeChart - snapshot testing should render a color from DataVizPalette @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]} @@ -3789,6 +4027,20 @@ exports[`GaugeChart - snapshot testing should render a placeholder segment when @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]} @@ -3880,6 +4132,20 @@ exports[`GaugeChart - snapshot testing should render a placeholder segment when @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]} @@ -4245,6 +4511,20 @@ exports[`GaugeChart - snapshot testing should render the chart title 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]} @@ -4336,6 +4616,20 @@ exports[`GaugeChart - snapshot testing should render the chart title 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]} @@ -4427,6 +4721,20 @@ exports[`GaugeChart - snapshot testing should render the chart title 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]} @@ -4779,6 +5087,20 @@ exports[`GaugeChart - snapshot testing should render the chart value in fraction @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]} @@ -4870,6 +5192,20 @@ exports[`GaugeChart - snapshot testing should render the chart value in fraction @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]} @@ -4961,6 +5297,20 @@ exports[`GaugeChart - snapshot testing should render the chart value in fraction @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]} @@ -5337,6 +5687,20 @@ exports[`GaugeChart - snapshot testing should render the sublabel 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]} @@ -5428,6 +5792,20 @@ exports[`GaugeChart - snapshot testing should render the sublabel 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]} @@ -5519,6 +5897,20 @@ exports[`GaugeChart - snapshot testing should render the sublabel 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]} diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap index 1bcd64fb8de8ac..c463a1772c648c 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap @@ -354,6 +354,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @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]} @@ -445,6 +459,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @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]} @@ -536,6 +564,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @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]} @@ -1117,6 +1159,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout @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]} @@ -1208,6 +1264,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout @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]} @@ -1299,6 +1369,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout @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]} @@ -1806,6 +1890,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar @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]} @@ -1897,6 +1995,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar @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]} @@ -1988,6 +2100,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar @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]} @@ -2384,6 +2510,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -2475,6 +2615,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -2566,6 +2720,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -3228,6 +3396,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly @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]} @@ -3319,6 +3501,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly @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]} @@ -3410,6 +3606,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly @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]} @@ -3823,6 +4033,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -3914,6 +4138,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -4005,6 +4243,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -4418,6 +4670,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -4509,6 +4775,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -4600,6 +4880,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -5013,6 +5307,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -5104,6 +5412,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -5195,6 +5517,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc @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]} diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap index 36735ef1b39e1e..2e20bb748a1575 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap @@ -324,6 +324,20 @@ exports[`Grouped Vertical Bar chart rendering Should re-render the Grouped Verti @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" role="option" tabindex="0" @@ -410,6 +424,20 @@ exports[`Grouped Vertical Bar chart rendering Should re-render the Grouped Verti @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" role="option" tabindex="-1" @@ -773,6 +801,20 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical @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" role="option" tabindex="0" @@ -859,6 +901,20 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical @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" role="option" tabindex="-1" @@ -1222,6 +1278,20 @@ exports[`Grouped Vertical bar chart rendering Should render the vertical bar cha @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" role="option" tabindex="0" @@ -1308,6 +1378,20 @@ exports[`Grouped Vertical bar chart rendering Should render the vertical bar cha @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" role="option" tabindex="-1" @@ -1671,6 +1755,20 @@ exports[`Grouped vertical bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="0" @@ -1757,6 +1855,20 @@ exports[`Grouped vertical bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -2120,6 +2232,20 @@ exports[`Grouped vertical bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="0" @@ -2206,6 +2332,20 @@ exports[`Grouped vertical bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -2610,6 +2750,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @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]} @@ -2701,6 +2855,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @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]} @@ -2792,6 +2960,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @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]} @@ -3373,6 +3555,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout @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]} @@ -3464,6 +3660,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout @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]} @@ -3555,6 +3765,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout @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]} @@ -4062,6 +4286,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar @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]} @@ -4153,6 +4391,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar @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]} @@ -4244,6 +4496,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar @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]} @@ -4640,6 +4906,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -4731,6 +5011,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -4822,6 +5116,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -5484,6 +5792,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly @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]} @@ -5575,6 +5897,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly @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]} @@ -5666,6 +6002,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly @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]} @@ -6079,6 +6429,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -6170,6 +6534,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -6261,6 +6639,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -6674,6 +7066,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -6765,6 +7171,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -6856,6 +7276,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -7269,6 +7703,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -7360,6 +7808,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -7451,6 +7913,20 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -7830,6 +8306,20 @@ exports[`Vertical stacked bar chart - Theme Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -7916,6 +8406,20 @@ exports[`Vertical stacked bar chart - Theme Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap index 46dcf3af5463a2..f689bcdac8fd29 100644 --- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap +++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap @@ -283,6 +283,20 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove @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]} @@ -857,6 +871,20 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart 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]} @@ -1199,6 +1227,20 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr @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]} @@ -1290,6 +1332,20 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr @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]} @@ -1813,6 +1869,20 @@ exports[`HeatMapChart 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]} @@ -2155,6 +2225,20 @@ exports[`HeatMapChart 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]} diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap index 838233d6fe8df3..ba23b2cb8297b3 100644 --- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap @@ -273,6 +273,20 @@ exports[`HeatMap chart rendering Should re-render the HeatMap chart with data 2` @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" role="option" tabindex="0" diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap index 367f7ee7a1c118..c652ef69578c5c 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap @@ -301,6 +301,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -392,6 +406,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -483,6 +511,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -574,6 +616,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -696,6 +752,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -787,6 +857,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -878,6 +962,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -969,6 +1067,20 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct @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]} @@ -1433,6 +1545,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders HorizontalBarChartW @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]} @@ -1523,6 +1649,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders HorizontalBarChartW @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]} @@ -1613,6 +1753,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders HorizontalBarChartW @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]} @@ -1703,6 +1857,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders HorizontalBarChartW @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]} @@ -2125,6 +2293,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showToolTipForYAxis @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]} @@ -2213,6 +2395,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showToolTipForYAxis @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]} @@ -2301,6 +2497,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showToolTipForYAxis @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]} @@ -2389,6 +2599,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showToolTipForYAxis @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]} @@ -2676,6 +2900,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showYAxisLables cor @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]} @@ -2764,6 +3002,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showYAxisLables cor @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]} @@ -2852,6 +3104,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showYAxisLables cor @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]} @@ -2940,6 +3206,20 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showYAxisLables cor @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]} diff --git a/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap b/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap index e6b2c1cc6eb834..e8995fffa3a654 100644 --- a/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap +++ b/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap @@ -103,6 +103,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -193,6 +207,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -283,6 +311,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -373,6 +415,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -463,6 +519,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -553,6 +623,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -643,6 +727,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -733,6 +831,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -823,6 +935,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -913,6 +1039,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1003,6 +1143,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1093,6 +1247,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1183,6 +1351,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1273,6 +1455,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1363,6 +1559,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1453,6 +1663,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1543,6 +1767,20 @@ exports[`Legends snapShot testing renders Legends 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]} @@ -1697,6 +1935,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -1787,6 +2039,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -1877,6 +2143,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -1967,6 +2247,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2057,10 +2351,24 @@ exports[`Legends snapShot testing renders allowFocusOnLegends correctly 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #605e5c; } - data-is-focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} + :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]} + onFocus={[Function]} onMouseOut={[Function]} onMouseOver={[Function]} role="option" @@ -2147,6 +2455,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2237,6 +2559,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2327,6 +2663,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2417,6 +2767,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2507,6 +2871,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2597,6 +2975,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2687,6 +3079,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2777,6 +3183,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2867,6 +3287,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -2957,6 +3391,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -3047,6 +3495,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -3137,6 +3599,20 @@ exports[`Legends snapShot testing renders allowFocusOnLegends 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]} @@ -3291,6 +3767,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3381,6 +3871,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3471,6 +3975,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3561,6 +4079,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3651,6 +4183,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3741,6 +4287,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3831,6 +4391,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -3921,6 +4495,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4011,6 +4599,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4101,6 +4703,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4191,6 +4807,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4281,6 +4911,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4357,7 +5001,21 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends correctly 1`] &::-moz-focus-inner { border: 0; } - .ms-Fabric--isFocusVisible &:focus:after { + .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){.ms-Fabric--isFocusVisible &:focus:after { + outline-color: #605e5c; + } + :host(.ms-Fabric--isFocusVisible) &:focus:after { border: 1px solid transparent; bottom: 1px; content: ""; @@ -4368,7 +5026,7 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends correctly 1`] top: 1px; z-index: 1; } - @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { + @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} @@ -4461,6 +5119,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4551,6 +5223,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4641,6 +5327,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4731,6 +5431,20 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends 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]} @@ -4885,6 +5599,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -4975,6 +5703,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5065,6 +5807,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5155,6 +5911,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5245,6 +6015,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5335,6 +6119,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5425,6 +6223,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5515,6 +6327,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5605,6 +6431,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5695,6 +6535,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5785,6 +6639,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5875,6 +6743,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -5965,6 +6847,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -6055,6 +6951,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -6145,6 +7055,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -6235,6 +7159,20 @@ exports[`Legends snapShot testing renders styles 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]} @@ -6325,6 +7263,20 @@ exports[`Legends snapShot testing renders styles 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]} diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap index 457ba365149a27..032a850c56046f 100644 --- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap @@ -3715,6 +3715,20 @@ exports[`LineChart 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]} diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap index 0a6b10b18d6f45..f318effab64add 100644 --- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap @@ -857,6 +857,20 @@ exports[`Line chart rendering Should render the Line chart with numeric x-axis d @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" role="option" tabindex="0" @@ -943,6 +957,20 @@ exports[`Line chart rendering Should render the Line chart with numeric x-axis d @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" role="option" tabindex="-1" @@ -1029,6 +1057,20 @@ exports[`Line chart rendering Should render the Line chart with numeric x-axis d @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" role="option" tabindex="-1" @@ -1452,6 +1494,20 @@ exports[`Line chart rendering Should render the Line chart with points in multip @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" role="option" tabindex="0" @@ -1540,6 +1596,20 @@ exports[`Line chart rendering Should render the Line chart with points in multip @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" role="option" tabindex="-1" @@ -1628,6 +1698,20 @@ exports[`Line chart rendering Should render the Line chart with points in multip @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" role="option" tabindex="-1" diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index 2cb7c9904ee3a3..ef16c65a236673 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -4051,6 +4051,20 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio 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]} @@ -4141,6 +4155,20 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio 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]} diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap index 8d20d30f1be0a5..56eec195551318 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap @@ -731,6 +731,20 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c @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" role="option" tabindex="0" @@ -817,6 +831,20 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c @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" role="option" tabindex="-1" @@ -903,6 +931,20 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c @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" role="option" tabindex="-1" @@ -989,6 +1031,20 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c @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" role="option" tabindex="-1" @@ -1075,6 +1131,20 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c @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" role="option" tabindex="-1" @@ -1859,6 +1929,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="0" @@ -1945,6 +2029,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -2031,6 +2129,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -2117,6 +2229,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -2203,6 +2329,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -2987,6 +3127,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="0" @@ -3073,6 +3227,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -3159,6 +3327,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -3245,6 +3427,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -3331,6 +3527,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -4128,6 +4338,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -4214,6 +4438,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -4300,6 +4538,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -4386,6 +4638,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -4472,6 +4738,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap index e85002303f7e4a..f97efdb17049a1 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap @@ -2144,6 +2144,20 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle 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]} @@ -2234,6 +2248,20 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle 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]} diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap index 204fd4efc7b33a..682031bc1de0e9 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap @@ -301,6 +301,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="0" @@ -387,6 +401,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -473,6 +501,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -559,6 +601,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -910,6 +966,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="0" @@ -996,6 +1066,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -1082,6 +1166,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -1168,6 +1266,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -1532,6 +1644,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -1618,6 +1744,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -1704,6 +1844,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -1790,6 +1944,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -2059,6 +2227,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em @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" role="option" tabindex="0" @@ -2145,6 +2327,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em @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" role="option" tabindex="-1" @@ -2231,6 +2427,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em @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" role="option" tabindex="-1" @@ -2317,6 +2527,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em @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" role="option" tabindex="-1" @@ -2668,6 +2892,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no @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" role="option" tabindex="0" @@ -2754,6 +2992,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no @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" role="option" tabindex="-1" @@ -2840,6 +3092,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no @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" role="option" tabindex="-1" @@ -2926,6 +3192,20 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no @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" role="option" tabindex="-1" diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap index 0be42b8885f681..512522511000e3 100644 --- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap @@ -318,6 +318,20 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous @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]} @@ -409,6 +423,20 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous @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]} @@ -500,6 +528,20 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous @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]} @@ -1039,6 +1081,20 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou @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]} @@ -1130,6 +1186,20 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou @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]} @@ -1221,6 +1291,20 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou @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]} @@ -1581,6 +1665,20 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 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]} @@ -1671,6 +1769,20 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 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]} @@ -1761,6 +1873,20 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 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]} @@ -2034,6 +2160,20 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart 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]} @@ -2124,6 +2264,20 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart 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]} @@ -2214,6 +2368,20 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart 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]} @@ -2470,6 +2638,20 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre @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]} @@ -2560,6 +2742,20 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre @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]} @@ -2650,6 +2846,20 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre @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]} @@ -3033,6 +3243,20 @@ exports[`VerticalBarChart 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]} @@ -3123,6 +3347,20 @@ exports[`VerticalBarChart 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]} @@ -3213,6 +3451,20 @@ exports[`VerticalBarChart 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]} @@ -3486,6 +3738,20 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc @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]} @@ -3576,6 +3842,20 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc @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]} @@ -3666,6 +3946,20 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc @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]} @@ -3939,6 +4233,20 @@ exports[`VerticalBarChart 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]} @@ -4029,6 +4337,20 @@ exports[`VerticalBarChart 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]} @@ -4119,6 +4441,20 @@ exports[`VerticalBarChart 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]} @@ -4392,6 +4728,20 @@ exports[`VerticalBarChart 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]} @@ -4482,6 +4832,20 @@ exports[`VerticalBarChart 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]} @@ -4572,6 +4936,20 @@ exports[`VerticalBarChart 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]} diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap index 3e9d220e3667c3..b843460af6354b 100644 --- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap @@ -202,6 +202,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="0" @@ -288,6 +302,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -374,6 +402,20 @@ exports[`Screen resolution Should remain unchanged on zoom in 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" role="option" tabindex="-1" @@ -626,6 +668,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="0" @@ -712,6 +768,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -798,6 +868,20 @@ exports[`Screen resolution Should remain unchanged on zoom out 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" role="option" tabindex="-1" @@ -1063,6 +1147,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -1149,6 +1247,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -1235,6 +1347,20 @@ exports[`Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -1499,6 +1625,20 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart @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" role="option" tabindex="0" @@ -1585,6 +1725,20 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart @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" role="option" tabindex="-1" @@ -1671,6 +1825,20 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart @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" role="option" tabindex="-1" @@ -1923,6 +2091,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="0" @@ -2009,6 +2191,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="-1" @@ -2095,6 +2291,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="-1" @@ -2348,6 +2558,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="0" @@ -2432,6 +2656,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="-1" @@ -2516,6 +2754,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="-1" @@ -2600,6 +2852,20 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with @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" role="option" tabindex="-1" @@ -2966,6 +3232,20 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous @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]} @@ -3057,6 +3337,20 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous @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]} @@ -3148,6 +3442,20 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous @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]} @@ -3687,6 +3995,20 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou @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]} @@ -3778,6 +4100,20 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou @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]} @@ -3855,7 +4191,21 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou &::-moz-focus-inner { border: 0; } - .ms-Fabric--isFocusVisible &:focus:after { + .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){.ms-Fabric--isFocusVisible &:focus:after { + outline-color: #605e5c; + } + :host(.ms-Fabric--isFocusVisible) &:focus:after { border: 1px solid transparent; bottom: 1px; content: ""; @@ -3866,7 +4216,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou top: 1px; z-index: 1; } - @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { + @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} @@ -4229,6 +4579,20 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 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]} @@ -4319,6 +4683,20 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 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]} @@ -4409,6 +4787,20 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 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]} @@ -4682,6 +5074,20 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart 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]} @@ -4772,6 +5178,20 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart 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]} @@ -4862,6 +5282,20 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart 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]} @@ -5118,6 +5552,20 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre @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]} @@ -5208,6 +5656,20 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre @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]} @@ -5298,6 +5760,20 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre @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]} @@ -5681,6 +6157,20 @@ exports[`VerticalBarChart 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]} @@ -5771,6 +6261,20 @@ exports[`VerticalBarChart 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]} @@ -5861,6 +6365,20 @@ exports[`VerticalBarChart 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]} @@ -6134,6 +6652,20 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc @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]} @@ -6224,6 +6756,20 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc @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]} @@ -6314,6 +6860,20 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc @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]} @@ -6587,6 +7147,20 @@ exports[`VerticalBarChart 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]} @@ -6677,6 +7251,20 @@ exports[`VerticalBarChart 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]} @@ -6767,6 +7355,20 @@ exports[`VerticalBarChart 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]} @@ -7040,6 +7642,20 @@ exports[`VerticalBarChart 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]} @@ -7130,6 +7746,20 @@ exports[`VerticalBarChart 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]} @@ -7220,6 +7850,20 @@ exports[`VerticalBarChart 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]} diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index 818d5c0175015e..e1937c3664f7f2 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -348,6 +348,20 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly @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]} @@ -439,6 +453,20 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly @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]} @@ -1008,6 +1036,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -1099,6 +1141,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -1605,6 +1661,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -1696,6 +1766,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -1787,6 +1871,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -2164,6 +2262,20 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 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]} @@ -2254,6 +2366,20 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 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]} @@ -2524,6 +2650,20 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar @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]} @@ -2614,6 +2754,20 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar @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]} @@ -2867,6 +3021,20 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -2957,6 +3125,20 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -3334,6 +3516,20 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly @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]} @@ -3424,6 +3620,20 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly @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]} @@ -3694,6 +3904,20 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr @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]} @@ -3784,6 +4008,20 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr @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]} @@ -4054,6 +4292,20 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -4144,6 +4396,20 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -4414,6 +4680,20 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -4504,6 +4784,20 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -4774,6 +5068,20 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -4864,6 +5172,20 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc @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]} diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap index 6e5000eb632179..ae1e165b16ad0a 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap @@ -252,6 +252,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="0" @@ -338,6 +352,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -424,6 +452,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -510,6 +552,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -812,6 +868,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="0" @@ -898,6 +968,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -984,6 +1068,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -1070,6 +1168,20 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged @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" role="option" tabindex="-1" @@ -1332,6 +1444,20 @@ exports[`Vertical stacked bar chart - Theme Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="0" @@ -1418,6 +1544,20 @@ exports[`Vertical stacked bar chart - Theme Should reflect theme change 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after { outline-color: #a19f9d; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #a19f9d; + 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: #a19f9d; + } data-is-focusable="true" role="option" tabindex="-1" @@ -1668,6 +1808,20 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked @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" role="option" tabindex="0" @@ -1754,6 +1908,20 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked @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" role="option" tabindex="-1" @@ -2152,6 +2320,20 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly @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]} @@ -2243,6 +2425,20 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly @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]} @@ -2812,6 +3008,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -2903,6 +3113,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -3409,6 +3633,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -3500,6 +3738,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -3591,6 +3843,20 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout @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]} @@ -3968,6 +4234,20 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 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]} @@ -4058,6 +4338,20 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 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]} @@ -4328,6 +4622,20 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar @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]} @@ -4418,6 +4726,20 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar @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]} @@ -4671,6 +4993,20 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -4761,6 +5097,20 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine @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]} @@ -5138,6 +5488,20 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly @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]} @@ -5228,6 +5592,20 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly @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]} @@ -5498,6 +5876,20 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr @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]} @@ -5588,6 +5980,20 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr @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]} @@ -5858,6 +6264,20 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -5948,6 +6368,20 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip @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]} @@ -6218,6 +6652,20 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -6308,6 +6756,20 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc @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]} @@ -6578,6 +7040,20 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc @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]} @@ -6668,6 +7144,20 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc @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]} diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx index bbfede52154b4a..e47cf461569d56 100644 --- a/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx +++ b/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MergeStylesRootProvider, MergeStylesShadowRootProvider } from '@fluentui/react'; +import { FocusRectsProvider, MergeStylesRootProvider, MergeStylesShadowRootProvider } from '@fluentui/react'; import root from 'react-shadow'; export type ShadowProps = { @@ -11,11 +11,23 @@ export const Shadow: React.FC = ({ window, children }) => { // a re-render. const [shadowRootEl, setShadowRootEl] = React.useState(null); + const ref = React.useRef(null); + + React.useEffect(() => { + if (ref.current) { + setShadowRootEl(ref.current); + } + }, []); + return ( - - {children} - + + + + {children} + + + ); }; diff --git a/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap b/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap index a29bed56bb80f8..0699e1c73ac531 100644 --- a/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap +++ b/packages/react-experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap @@ -87,6 +87,24 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -215,6 +233,24 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -383,6 +419,24 @@ exports[`MicroFeedback renders correctly with no props 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -511,6 +565,24 @@ exports[`MicroFeedback renders correctly with no props 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap index d826e2e933e6d3..247cb0a4ffa14f 100644 --- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -81,6 +81,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -242,6 +260,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -391,6 +427,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -498,6 +552,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -605,6 +677,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -712,6 +802,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -819,6 +927,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -935,6 +1061,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1095,6 +1239,24 @@ exports[`Pagination render buttons Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1263,6 +1425,24 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1392,6 +1572,24 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1740,6 +1938,24 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1889,6 +2105,24 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -2016,6 +2250,24 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap index 933beed0b96c6c..5d97a003c182f6 100644 --- a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap +++ b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap @@ -105,6 +105,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -424,6 +442,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -613,6 +649,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -932,6 +986,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1126,6 +1198,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1445,6 +1535,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1634,6 +1742,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1953,6 +2079,24 @@ Array [ right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react-experiments/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/react-experiments/src/components/Slider/__snapshots__/Slider.test.tsx.snap index 31fa3cb26666ba..b6baaf95a83fe1 100644 --- a/packages/react-experiments/src/components/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/react-experiments/src/components/Slider/__snapshots__/Slider.test.tsx.snap @@ -123,6 +123,17 @@ exports[`Slider renders correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:active .ms-Slider-active { background-color: #005a9e; } diff --git a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap index ce2f801874d658..d532e931dc49a4 100644 --- a/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap +++ b/packages/react-experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap @@ -331,6 +331,24 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -840,6 +858,24 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.styles.ts b/packages/react/src/components/Breadcrumb/Breadcrumb.styles.ts index d2b4bac1f1d33b..5e4c593078ef04 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.styles.ts +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.styles.ts @@ -203,7 +203,7 @@ export const getStyles = (props: IBreadcrumbStyleProps): IBreadcrumbStyles => { ':focus': { color: palette.neutralDark, }, - [`.${IsFocusVisibleClassName} &:focus`]: { + [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: { outline: `none`, }, ...itemStateSelectors, diff --git a/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 4ad916ae756789..ab6b7d11d2892d 100644 --- a/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -117,6 +117,24 @@ exports[`Breadcrumb rendering renders correctly with custom overflow icon 1`] = right: 1px; top: 1px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + 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 { + bottom: 1px; + left: 1px; + outline-color: ButtonText; + right: 1px; + top: 1px; + } &:active > span { left: 0px; position: relative; @@ -1350,6 +1368,24 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf right: 1px; top: 1px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + 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 { + bottom: 1px; + left: 1px; + outline-color: ButtonText; + right: 1px; + top: 1px; + } &:active > span { left: 0px; position: relative; @@ -1563,6 +1599,24 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf right: 1px; top: 1px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + 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 { + bottom: 1px; + left: 1px; + outline-color: ButtonText; + right: 1px; + top: 1px; + } &:active > span { left: 0px; position: relative; @@ -1776,6 +1830,24 @@ exports[`Breadcrumb rendering renders correctly with overflow 1`] = ` right: 1px; top: 1px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + 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 { + bottom: 1px; + left: 1px; + outline-color: ButtonText; + right: 1px; + top: 1px; + } &:active > span { left: 0px; position: relative; @@ -2277,6 +2349,24 @@ exports[`Breadcrumb rendering renders correctly with overflow and overflowIndex right: 1px; top: 1px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + 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 { + bottom: 1px; + left: 1px; + outline-color: ButtonText; + right: 1px; + top: 1px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/Button/ButtonThemes.ts b/packages/react/src/components/Button/ButtonThemes.ts index 92b0b138c197ca..d89d123d6aeaa9 100644 --- a/packages/react/src/components/Button/ButtonThemes.ts +++ b/packages/react/src/components/Button/ButtonThemes.ts @@ -166,7 +166,7 @@ export function primaryStyles(theme: ITheme): IButtonStyles { borderColor: 'WindowText', ...getHighContrastNoAdjustStyle(), }, - [`.${IsFocusVisibleClassName} &:focus`]: { + [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: { selectors: { ':after': { border: `none`, diff --git a/packages/react/src/components/Button/__snapshots__/Button.deprecated.test.tsx.snap b/packages/react/src/components/Button/__snapshots__/Button.deprecated.test.tsx.snap index f5db96e6937e9d..4aa0d24bcff06a 100644 --- a/packages/react/src/components/Button/__snapshots__/Button.deprecated.test.tsx.snap +++ b/packages/react/src/components/Button/__snapshots__/Button.deprecated.test.tsx.snap @@ -54,6 +54,24 @@ exports[`Button renders CompoundButton correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap index 94cf72d0851aa8..3ac81cfa54eaae 100644 --- a/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -52,6 +52,24 @@ exports[`Button renders ActionButton correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -174,6 +192,25 @@ exports[`Button renders CommandBarButton correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; @@ -374,6 +411,24 @@ exports[`Button renders CompoundButton correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -518,6 +573,24 @@ exports[`Button renders DefaultButton correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -633,6 +706,24 @@ exports[`Button renders IconButton correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -756,6 +847,24 @@ exports[`Button renders a DefaultButton with a keytip correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/Checkbox/Checkbox.styles.ts b/packages/react/src/components/Checkbox/Checkbox.styles.ts index 0ac199d2aac967..884294189414f4 100644 --- a/packages/react/src/components/Checkbox/Checkbox.styles.ts +++ b/packages/react/src/components/Checkbox/Checkbox.styles.ts @@ -150,13 +150,15 @@ export const getStyles = (props: ICheckboxStyleProps): ICheckboxStyles => { background: 'none', opacity: 0, - [`.${IsFocusVisibleClassName} &:focus + label::before`]: { - outline: '1px solid ' + theme.palette.neutralSecondary, - outlineOffset: '2px', - [HighContrastSelector]: { - outline: '1px solid WindowText', + // eslint-disable-next-line @fluentui/max-len + [`.${IsFocusVisibleClassName} &:focus + label::before, :host(.${IsFocusVisibleClassName}) &:focus + label::before`]: + { + outline: '1px solid ' + theme.palette.neutralSecondary, + outlineOffset: '2px', + [HighContrastSelector]: { + outline: '1px solid WindowText', + }, }, - }, }, label: [ classNames.label, diff --git a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index f3786acace9e41..4bb5daedb5fa73 100644 --- a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -64,6 +64,13 @@ exports[`Checkbox renders checked correctly 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } + :host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline-offset: 2px; + outline: 1px solid #605e5c; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline: 1px solid WindowText; + } data-ktp-execute-target="true" id="checkbox-0" type="checkbox" @@ -232,6 +239,13 @@ exports[`Checkbox renders indeterminate correctly 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } + :host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline-offset: 2px; + outline: 1px solid #605e5c; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline: 1px solid WindowText; + } data-ktp-execute-target="true" id="checkbox-0" type="checkbox" @@ -410,6 +424,13 @@ exports[`Checkbox renders unchecked correctly 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } + :host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline-offset: 2px; + outline: 1px solid #605e5c; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline: 1px solid WindowText; + } data-ktp-execute-target="true" id="checkbox-0" type="checkbox" diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts index c05f0db651de2b..fe78b449b5762a 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts @@ -29,7 +29,7 @@ function getChoiceGroupFocusStyle(focusBorderColor: string, hasIconOrImage?: boo 'is-inFocus', { selectors: { - [`.${IsFocusVisibleClassName} &`]: { + [`.${IsFocusVisibleClassName} &, :host(.${IsFocusVisibleClassName}) &`]: { position: 'relative', outline: 'transparent', selectors: { diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/__snapshots__/ChoiceGroupOption.test.tsx.snap b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/__snapshots__/ChoiceGroupOption.test.tsx.snap index 3b0a8065642cc6..111ecea1603324 100644 --- a/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/__snapshots__/ChoiceGroupOption.test.tsx.snap +++ b/packages/react/src/components/ChoiceGroup/ChoiceGroupOption/__snapshots__/ChoiceGroupOption.test.tsx.snap @@ -573,6 +573,27 @@ exports[`ChoiceGroupOption renders ChoiceGroup correctly 1`] = ` border-color: WindowText; border-width: 2px; } + :host(.ms-Fabric--isFocusVisible) & { + outline: transparent; + position: relative; + } + :host(.ms-Fabric--isFocusVisible) &::-moz-focus-inner { + border: 0px; + } + :host(.ms-Fabric--isFocusVisible) &:after { + border: 1px solid #605e5c; + bottom: -2px; + content: ""; + left: -2px; + pointer-events: none; + position: absolute; + right: -2px; + top: -2px; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:after { + border-color: WindowText; + border-width: 2px; + } > span { left: 0px; position: relative; @@ -584,6 +602,24 @@ exports[`ComboBox Renders correctly when open 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -854,6 +890,24 @@ exports[`ComboBox Renders correctly when open 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1009,6 +1063,24 @@ exports[`ComboBox Renders correctly when open 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1053,6 +1125,17 @@ exports[`ComboBox Renders correctly when open 1`] = ` top: 0px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:after { + border: 1px solid #ffffff; + bottom: 0px; + content: ""; + left: 0px; + outline: 1px solid #605e5c; + position: absolute; + right: 0px; + top: 0px; + z-index: 1; + } data-index="3" data-is-focusable="true" id="ComboBox0-list3" @@ -1351,6 +1434,24 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -1654,6 +1755,13 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } + :host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline-offset: 2px; + outline: 1px solid #605e5c; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline: 1px solid WindowText; + } data-index="1" data-is-focusable="true" data-ktp-execute-target="true" @@ -1871,6 +1979,13 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } + :host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline-offset: 2px; + outline: 1px solid #605e5c; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus + label::before { + outline: 1px solid WindowText; + } data-index="3" data-is-focusable="true" data-ktp-execute-target="true" @@ -2245,6 +2360,24 @@ exports[`ComboBox renders with a Keytip correctly 1`] = ` right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap b/packages/react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap index d9045fd487c686..94a2857280a96f 100644 --- a/packages/react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap +++ b/packages/react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap @@ -121,6 +121,25 @@ exports[`CommandBar renders commands correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; @@ -265,6 +284,25 @@ exports[`CommandBar renders commands correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap index e92b52e79a3373..88f77e5f2d8d6e 100644 --- a/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -110,6 +110,25 @@ exports[`CommandBar renders commands correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; @@ -248,6 +267,25 @@ exports[`CommandBar renders commands correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; @@ -441,6 +479,25 @@ exports[`CommandBar renders empty farItems correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; @@ -579,6 +636,25 @@ exports[`CommandBar renders empty farItems correctly 1`] = ` right: 4px; top: 4px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 3px; + content: ""; + left: 3px; + outline: 1px solid #605e5c; + position: absolute; + right: 3px; + top: 3px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + border: none; + bottom: 4px; + left: 4px; + outline-color: ButtonText; + right: 4px; + top: 4px; + } &:active > span { left: 0px; position: relative; diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts b/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts index b0ccbcccecf07a..5f7fc8247bebe6 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.classNames.ts @@ -132,8 +132,12 @@ export const getItemClassNames = memoizeFunction( selectors: { ':hover': styles.rootHovered, ':active': styles.rootPressed, - [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover`]: styles.rootFocused, - [`.${IsFocusVisibleClassName} &:hover`]: { background: 'inherit;' }, + // eslint-disable-next-line @fluentui/max-len + [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]: + styles.rootFocused, + [`.${IsFocusVisibleClassName} &:hover, :host(.${IsFocusVisibleClassName}) &:hover`]: { + background: 'inherit;', + }, }, }, ], @@ -154,8 +158,12 @@ export const getItemClassNames = memoizeFunction( // when hovering over the splitPrimary also affect the splitMenu [`:hover ~ .${classNames.splitMenu}`]: styles.rootHovered, ':active': styles.rootPressed, - [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover`]: styles.rootFocused, - [`.${IsFocusVisibleClassName} &:hover`]: { background: 'inherit;' }, + // eslint-disable-next-line @fluentui/max-len + [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]: + styles.rootFocused, + [`.${IsFocusVisibleClassName} &:hover, :host(.${IsFocusVisibleClassName}) &:hover`]: { + background: 'inherit;', + }, }, }, ], @@ -176,8 +184,12 @@ export const getItemClassNames = memoizeFunction( selectors: { ':hover': styles.rootHovered, ':active': styles.rootPressed, - [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover`]: styles.rootFocused, - [`.${IsFocusVisibleClassName} &:hover`]: { background: 'inherit;' }, + // eslint-disable-next-line @fluentui/max-len + [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]: + styles.rootFocused, + [`.${IsFocusVisibleClassName} &:hover, :host(.${IsFocusVisibleClassName}) &:hover`]: { + background: 'inherit;', + }, }, }, ], @@ -215,7 +227,9 @@ export const getItemClassNames = memoizeFunction( !checked && [ { selectors: { - [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover`]: styles.rootFocused, + // eslint-disable-next-line @fluentui/max-len + [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]: + styles.rootFocused, }, }, ], diff --git a/packages/react/src/components/ContextualMenu/__snapshots__/ContextualMenu.test.tsx.snap b/packages/react/src/components/ContextualMenu/__snapshots__/ContextualMenu.test.tsx.snap index a57209fce3cb63..a974302c03a50b 100644 --- a/packages/react/src/components/ContextualMenu/__snapshots__/ContextualMenu.test.tsx.snap +++ b/packages/react/src/components/ContextualMenu/__snapshots__/ContextualMenu.test.tsx.snap @@ -55,6 +55,24 @@ exports[`ContextualMenu ContextualMenu snapshot ContextualMenu should be present right: -2px; top: -2px; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid transparent; + bottom: 2px; + content: ""; + left: 2px; + outline: 1px solid #605e5c; + position: absolute; + right: 2px; + top: 2px; + z-index: 1; + } + @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after { + bottom: -2px; + left: -2px; + outline-color: ButtonText; + right: -2px; + top: -2px; + } &:active > span { left: 0px; position: relative; @@ -370,6 +388,17 @@ exports[`ContextualMenu ContextualMenu snapshot ContextualMenu should be present top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background-color: #f3f2f1; color: #201f1e; @@ -395,9 +424,18 @@ exports[`ContextualMenu ContextualMenu snapshot ContextualMenu should be present .ms-Fabric--isFocusVisible &:focus:hover { background-color: #ffffff; } + :host(.ms-Fabric--isFocusVisible) &:focus { + background-color: #ffffff; + } + :host(.ms-Fabric--isFocusVisible) &:focus:hover { + background-color: #ffffff; + } .ms-Fabric--isFocusVisible &:hover { background: inherit; } + :host(.ms-Fabric--isFocusVisible) &:hover { + background: inherit; + } onClick={[Function]} onKeyDown={[Function]} onMouseDown={[Function]} diff --git a/packages/react/src/components/DetailsList/DetailsHeader.styles.ts b/packages/react/src/components/DetailsList/DetailsHeader.styles.ts index 481d7dcf725efc..d313170c8f8a2f 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsHeader.styles.ts @@ -132,7 +132,7 @@ export const getDetailsHeaderStyles = (props: IDetailsHeaderStyleProps): IDetail }, { selectors: { - [`.${IsFocusVisibleClassName} &:focus`]: { + [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: { opacity: 1, }, }, diff --git a/packages/react/src/components/DetailsList/DetailsRow.styles.ts b/packages/react/src/components/DetailsList/DetailsRow.styles.ts index adc64487a1641e..8cf6e6712f81be 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.styles.ts @@ -330,9 +330,11 @@ export const getDetailsRowStyles = (props: IDetailsRowStyleProps): IDetailsRowSt opacity: 1, }, - [`.${IsFocusVisibleClassName} &:focus .${classNames.check}`]: { - opacity: 1, - }, + // eslint-disable-next-line @fluentui/max-len + [`.${IsFocusVisibleClassName} &:focus .${classNames.check}, :host(.${IsFocusVisibleClassName}) &:focus .${classNames.check}`]: + { + opacity: 1, + }, '.ms-GroupSpacer': { flexShrink: 0, diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap index 523eacc9380594..174ad4f8e0ce7f 100644 --- a/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap +++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap @@ -127,6 +127,17 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -146,6 +157,9 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -189,6 +203,17 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -374,6 +399,17 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -442,6 +478,17 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-is-focusable="true" id="header1-1" onClick={[Function]} diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap index 4f41dafb7defdf..af29faf2d0b72f 100644 --- a/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap +++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap @@ -85,6 +85,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -104,6 +115,9 @@ exports[`DetailsHeader can render 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -147,6 +161,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -333,6 +358,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -400,6 +436,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header0-a" onClick={[Function]} onContextMenu={[Function]} @@ -524,6 +571,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -591,6 +649,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header0-b" onClick={[Function]} onContextMenu={[Function]} @@ -745,6 +814,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -814,6 +894,17 @@ exports[`DetailsHeader can render 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header0-c" onClick={[Function]} onContextMenu={[Function]} @@ -1010,6 +1101,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } role="columnheader" > @@ -1121,6 +1237,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -1188,6 +1315,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header2-a" onClick={[Function]} onContextMenu={[Function]} @@ -1312,6 +1450,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -1379,6 +1528,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header2-b" onClick={[Function]} onContextMenu={[Function]} @@ -1533,6 +1693,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -1602,6 +1773,17 @@ exports[`DetailsHeader can render a hidden select all checkbox in single selecti top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header2-c" onClick={[Function]} onContextMenu={[Function]} @@ -1798,6 +1980,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -1818,6 +2011,9 @@ exports[`DetailsHeader renders accessible labels 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -1861,6 +2057,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -2071,6 +2278,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -2138,6 +2356,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header6-a" onClick={[Function]} onContextMenu={[Function]} @@ -2263,6 +2492,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -2330,6 +2570,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header6-b" onClick={[Function]} onContextMenu={[Function]} @@ -2510,6 +2761,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -2579,6 +2841,17 @@ exports[`DetailsHeader renders accessible labels 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header6-c" onClick={[Function]} onContextMenu={[Function]} diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap index 4f0cec9cad24d2..657e30d5a03c8b 100644 --- a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap +++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap @@ -1969,6 +1969,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -1988,6 +1999,9 @@ exports[`DetailsList renders List correctly 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2031,6 +2045,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -2217,6 +2242,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -2284,6 +2320,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-key" onClick={[Function]} onContextMenu={[Function]} @@ -2407,6 +2454,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -2474,6 +2532,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-name" onClick={[Function]} onContextMenu={[Function]} @@ -2597,6 +2666,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -2664,6 +2744,17 @@ exports[`DetailsList renders List correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-value" onClick={[Function]} onContextMenu={[Function]} @@ -2958,6 +3049,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -2977,6 +3079,9 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -3020,6 +3125,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -3206,6 +3322,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -3273,6 +3400,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_0" onClick={[Function]} onContextMenu={[Function]} @@ -3340,6 +3478,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -3407,6 +3556,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_1" onClick={[Function]} onContextMenu={[Function]} @@ -3474,6 +3634,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -3541,6 +3712,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_2" onClick={[Function]} onContextMenu={[Function]} @@ -3608,6 +3790,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -3675,6 +3868,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_3" onClick={[Function]} onContextMenu={[Function]} @@ -3742,6 +3946,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -3809,6 +4024,17 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_4" onClick={[Function]} onContextMenu={[Function]} @@ -4048,6 +4274,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -4067,6 +4304,9 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4110,6 +4350,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -4296,6 +4547,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -4363,6 +4625,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-key" onClick={[Function]} onContextMenu={[Function]} @@ -4486,6 +4759,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -4553,6 +4837,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-name" onClick={[Function]} onContextMenu={[Function]} @@ -4676,6 +4971,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -4743,6 +5049,17 @@ exports[`DetailsList renders List in compact mode correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-value" onClick={[Function]} onContextMenu={[Function]} @@ -5038,6 +5355,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -5057,6 +5385,9 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -5100,6 +5431,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -5286,6 +5628,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -5353,6 +5706,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-key" onClick={[Function]} onContextMenu={[Function]} @@ -5476,6 +5840,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -5543,6 +5918,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-name" onClick={[Function]} onContextMenu={[Function]} @@ -5666,6 +6052,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -5733,6 +6130,17 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-value" onClick={[Function]} onContextMenu={[Function]} @@ -6027,6 +6435,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } onClick={[Function]} role="columnheader" > @@ -6046,6 +6465,9 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` .ms-Fabric--isFocusVisible &:focus { opacity: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus { + opacity: 1; + } { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -6089,6 +6511,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } data-automationid="DetailsRowCheck" data-is-focusable={true} data-selection-toggle={true} @@ -6275,6 +6708,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -6342,6 +6786,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_0" onClick={[Function]} onContextMenu={[Function]} @@ -6412,6 +6867,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -6479,6 +6945,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_1" onClick={[Function]} onContextMenu={[Function]} @@ -6549,6 +7026,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -6616,6 +7104,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_2" onClick={[Function]} onContextMenu={[Function]} @@ -6686,6 +7185,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -6753,6 +7263,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_3" onClick={[Function]} onContextMenu={[Function]} @@ -6823,6 +7344,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -6890,6 +7422,17 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } id="header1-column_key_4" onClick={[Function]} onContextMenu={[Function]} @@ -7133,6 +7676,17 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background-color: #f3f2f1; } @@ -7240,6 +7794,17 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = ` top: 1px; z-index: 1; } + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } &:hover { background: #f3f2f1; color: #323130; @@ -7307,8 +7872,19 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = ` top: 1px; z-index: 1; } - id="header1-key" - onClick={[Function]} + :host(.ms-Fabric--isFocusVisible) &:focus:after { + border: 1px solid #ffffff; + bottom: 1px; + content: ""; + left: 1px; + outline: 1px solid #605e5c; + position: absolute; + right: 1px; + top: 1px; + z-index: 1; + } + id="header1-key" + onClick={[Function]} onContextMenu={[Function]} >