diff --git a/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.Basic.Example.tsx
index 8fca0a04b362b..ce8a91cb8a764 100644
--- a/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.Basic.Example.tsx
@@ -34,9 +34,27 @@ export class GaugeChartBasicExample extends React.Component<{}, IGCBasicExampleS
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): React.ReactNode {
     return (
-      <>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 20 }}>
           <StackItem>
             <label htmlFor="width-slider">Width:</label>
@@ -143,7 +161,7 @@ export class GaugeChartBasicExample extends React.Component<{}, IGCBasicExampleS
             canSelectMultipleLegends: this.state.legendMultiSelect,
           }}
         />
-      </>
+      </div>
     );
   }
 
diff --git a/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.SingleSegment.Example.tsx b/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.SingleSegment.Example.tsx
index 1448d8d70fa22..25917c4a03a4c 100644
--- a/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.SingleSegment.Example.tsx
+++ b/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.SingleSegment.Example.tsx
@@ -33,7 +33,7 @@ export class GaugeChartSingleSegmentExample extends React.Component<{}, IGCSingl
 
   public render(): React.ReactNode {
     return (
-      <>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 20 }}>
           <StackItem>
             <label htmlFor="width-slider">Width:</label>
@@ -113,7 +113,7 @@ export class GaugeChartSingleSegmentExample extends React.Component<{}, IGCSingl
           enableGradient={this.state.enableGradient}
           roundCorners={this.state.roundedCorners}
         />
-      </>
+      </div>
     );
   }
 
diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx
index be8a4d5999a24..519e87fd740e0 100644
--- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx
@@ -8,6 +8,7 @@ import {
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import { Toggle } from '@fluentui/react/lib/Toggle';
+
 interface IGroupedBarChartState {
   width: number;
   height: number;
@@ -18,7 +19,6 @@ interface IGroupedBarChartState {
   roundCorners: boolean;
   selectMultipleLegends: boolean;
 }
-
 export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGroupedBarChartState> {
   constructor(props: IGroupedVerticalBarChartProps) {
     super(props);
@@ -34,6 +34,24 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._basicExample()}</div>;
   }
@@ -274,12 +292,12 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
 
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
     return (
-      <>
-        <p>
+      <div className="containerDiv">
+        <div>
           In this example the <code>xAxisCalloutData</code> property overrides the x value that is shown on the callout.
           So instead of a numeric value, the callout will show the date that is passed in the{' '}
           <code>xAxisCalloutData</code> property.
-        </p>
+        </div>
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -354,7 +372,7 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
             }}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx
index e175a1b64a3de..e9cb66be9552f 100644
--- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx
@@ -182,7 +182,7 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com
       { key: 'StackCallout', text: 'Stack callout' },
     ];
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Custom">Change Width:</label>
         <input
           type="range"
@@ -229,7 +229,7 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com
             roundCorners={this.state.roundCorners}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx
index eb49c471582b9..4aa1c0710d0dd 100644
--- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx
@@ -115,7 +115,7 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
 
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Styled">Change Width:</label>
         <input
           type="range"
@@ -148,7 +148,7 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
             enableReflow={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx
index 548365aacf938..2e752a246a52a 100644
--- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx
+++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx
@@ -117,7 +117,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{},
 
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
     return (
-      <>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 30 }}>
           <Stack horizontal verticalAlign="center">
             <Label htmlFor="input-width" style={{ fontWeight: 400 }}>
@@ -239,7 +239,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{},
             xAxisOuterPadding={this.state.xAxisOuterPaddingEnabled ? this.state.xAxisOuterPadding : undefined}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx
index 0799a9ee62d9f..94906fb0eec47 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx
@@ -78,6 +78,25 @@ export class HeatMapChartCustomAccessibilityExample extends React.Component<{},
       height: 350,
     };
   }
+
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): React.ReactNode {
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
     const HeatMapData: IHeatMapChartProps['data'] = [
@@ -98,7 +117,7 @@ export class HeatMapChartCustomAccessibilityExample extends React.Component<{},
       },
     ];
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="ChangeWidth_Custom">Change Width:</label>
         <input
           type="range"
@@ -136,7 +155,7 @@ export class HeatMapChartCustomAccessibilityExample extends React.Component<{},
             enableReflow={true}
           />
         </div>
-      </>
+      </div>
     );
   }
   private _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
index eb1cfa0ebaca5..6d203c8b42f09 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
@@ -298,7 +298,7 @@ export const HeatMapChartBasicExample: React.FunctionComponent<{}> = () => {
   };
 
   return (
-    <>
+    <div className="containerDiv">
       <label htmlFor="changeWidth_Example">Change Width:</label>
       <input
         type="range"
@@ -341,6 +341,6 @@ export const HeatMapChartBasicExample: React.FunctionComponent<{}> = () => {
           enableReflow={true}
         />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index 7b0f3584fe1d6..f81705ea33446 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -28,6 +28,24 @@ export class HorizontalBarChartBasicExample extends React.Component<
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._basicExample()}</div>;
   }
@@ -147,7 +165,7 @@ export class HorizontalBarChartBasicExample extends React.Component<
     ];
 
     return (
-      <>
+      <div className="containerDiv">
         <div style={{ display: 'flex' }}>
           <Toggle
             label="Show labels as percentage"
@@ -171,7 +189,7 @@ export class HorizontalBarChartBasicExample extends React.Component<
             roundCorners={this.state.roundCorners}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx
index 970656b8a1c13..dbecb7fdfa83b 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx
@@ -41,7 +41,7 @@ export const HorizontalBarChartBenchmarkExample: React.FunctionComponent<{}> = (
   ];
 
   return (
-    <div style={{ maxWidth: 600 }}>
+    <div className="containerDiv" style={{ maxWidth: 600 }}>
       <HorizontalBarChart data={data} hideRatio={hideRatio} chartDataMode="fraction" />
     </div>
   );
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
index c19e86cf73e7b..0d326ac656783 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
@@ -131,7 +131,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
   };
 
   return (
-    <div style={{ maxWidth: 600 }}>
+    <div className="containerDiv" style={{ maxWidth: 600 }}>
       <HorizontalBarChart data={getData(theme?.isInverted ?? false)} />
     </div>
   );
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
index a6ac743afcffa..7d7a99ae651c6 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
@@ -117,7 +117,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
   };
 
   return (
-    <div style={{ maxWidth: 600 }}>
+    <div className="containerDiv" style={{ maxWidth: 600 }}>
       <HorizontalBarChart
         data={getData(theme?.isInverted ?? false)}
         hideRatio={hideRatio}
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
index 9c5a96858b59e..37b7e2cff15cb 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
@@ -103,7 +103,7 @@ export const HorizontalBarChartVariantExample: React.FunctionComponent<{}> = ()
   }
 
   return (
-    <>
+    <div className="containerDiv">
       <Checkbox
         label="Hide labels"
         checked={hideLabels}
@@ -118,6 +118,6 @@ export const HorizontalBarChartVariantExample: React.FunctionComponent<{}> = ()
           hideLabels={hideLabels}
         />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx
index f89fb87dfc8de..31f9b09aa787b 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx
@@ -48,7 +48,7 @@ export class HorizontalBarChartWithAxisTooltipExample extends React.Component<{}
 
     const rootStyle = { width: '650px', height: '350px' };
     return (
-      <>
+      <div className="containerDiv">
         <div style={rootStyle}>
           <HorizontalBarChartWithAxis
             chartTitle="Horizontal bar chart axis tooltip example "
@@ -60,7 +60,7 @@ export class HorizontalBarChartWithAxisTooltipExample extends React.Component<{}
             enableReflow={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx
index 47db675033e17..362da4162a6bb 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx
@@ -43,6 +43,24 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._basicExample()}</div>;
   }
@@ -122,7 +140,7 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth">Change Width:</label>
         <input
           type="range"
@@ -186,7 +204,7 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
             }}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx
index 155f2c572ac46..93567edc74c2e 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx
@@ -71,7 +71,7 @@ export class HorizontalBarChartWithAxisStringAxisTooltipExample extends React.Co
 
     const rootStyle = { width: '650px', height: '350px' };
     return (
-      <>
+      <div className="containerDiv">
         <div>
           <ChoiceGroup
             options={options}
@@ -102,7 +102,7 @@ export class HorizontalBarChartWithAxisStringAxisTooltipExample extends React.Co
             roundCorners={this.state.roundCorners}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx
index 1b7d0afeb06fe..642f91e98fe91 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx
@@ -156,7 +156,7 @@ export class LineChartAllNegativeExample extends React.Component<{}, ILineChartB
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_basic">Change Width:</label>
         <input
           type="range"
@@ -218,7 +218,7 @@ export class LineChartAllNegativeExample extends React.Component<{}, ILineChartB
             supportNegativeData={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
index 5453ee568a47a..f57252d559b0c 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
@@ -23,6 +23,24 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._basicExample()}</div>;
   }
@@ -156,7 +174,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_basic">Change Width:</label>
         <input
           type="range"
@@ -217,7 +235,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             useUTC={this.state.useUTC}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
index 8078281e2a1c4..e67626ceec014 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
@@ -30,7 +30,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
 
   public render(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Custom">Change Width:</label>
         <input
           type="range"
@@ -59,7 +59,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
           checked={this.state.allowMultipleShapes}
         />
         <div>{this._styledExample()}</div>
-      </>
+      </div>
     );
   }
 
@@ -83,7 +83,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
             xAxisCalloutData: '2018/01/01',
             yAxisCalloutData: '10%',
             xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/01' },
-            callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 10%' },
+            callOutAccessibilityData: { ariaLabel: '1 Jan 2018, Line series 1 of 5 Point 1 First 10%' },
           },
           {
             x: new Date('2018/02/01'),
@@ -91,7 +91,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
             xAxisCalloutData: '2018/01/15',
             yAxisCalloutData: '18%',
             xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/15' },
-            callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 18%' },
+            callOutAccessibilityData: { ariaLabel: '15 Jan 2018, Line series 2 of 5 Point 1 First 18%' },
           },
           {
             x: new Date('2018/03/01'),
@@ -99,7 +99,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
             xAxisCalloutData: '2018/01/28',
             yAxisCalloutData: '24%',
             xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/28' },
-            callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 24%' },
+            callOutAccessibilityData: { ariaLabel: '28 Jan 2018, Line series 3 of 5 Point 1 First 24%' },
           },
           {
             x: new Date('2018/04/01'),
@@ -107,7 +107,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
             xAxisCalloutData: '2018/02/01',
             yAxisCalloutData: '25%',
             xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/02/01' },
-            callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 25%' },
+            callOutAccessibilityData: { ariaLabel: '1 Feb 2018, Line series 4 of 5 Point 1 First 25%' },
           },
           {
             x: new Date('2018/05/01'),
@@ -115,7 +115,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
             xAxisCalloutData: '2018/03/01',
             yAxisCalloutData: '15%',
             xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/03/01' },
-            callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 15%' },
+            callOutAccessibilityData: { ariaLabel: '1 Mar 2018, Line series 5 of 5 Point 1 First 15%' },
           },
         ],
         legend: 'First',
@@ -130,27 +130,27 @@ export class LineChartCustomAccessibilityExample extends React.Component<
           {
             x: new Date('2018/01/01'),
             y: 30,
-            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
+            callOutAccessibilityData: { ariaLabel: '1 Jan 2018, 00:00, Point 2 Second 30' },
           },
           {
             x: new Date('2018/02/01'),
             y: 50,
-            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 50' },
+            callOutAccessibilityData: { ariaLabel: '1 Feb 2018, 00:00, Point 2 Second 50' },
           },
           {
             x: new Date('2018/03/01'),
             y: 30,
-            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
+            callOutAccessibilityData: { ariaLabel: '1 Mar 2018, 00:00, Point 2 Second 30' },
           },
           {
             x: new Date('2018/04/01'),
             y: 50,
-            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 50' },
+            callOutAccessibilityData: { ariaLabel: '1 Apr 2018, 00:00, Point 2 Second 50' },
           },
           {
             x: new Date('2018/05/01'),
             y: 30,
-            callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
+            callOutAccessibilityData: { ariaLabel: '1 May 2018, 00:00, Point 2 Second 30' },
           },
         ],
         legend: 'Second',
@@ -162,11 +162,31 @@ export class LineChartCustomAccessibilityExample extends React.Component<
       },
       {
         data: [
-          { x: new Date('2018/01/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
-          { x: new Date('2018/02/01'), y: 70, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 70' } },
-          { x: new Date('2018/03/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
-          { x: new Date('2018/04/01'), y: 70, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 70' } },
-          { x: new Date('2018/05/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
+          {
+            x: new Date('2018/01/01'),
+            y: 50,
+            callOutAccessibilityData: { ariaLabel: '1 Jan 2018, 00:00, Point 3 Third 50' },
+          },
+          {
+            x: new Date('2018/02/01'),
+            y: 70,
+            callOutAccessibilityData: { ariaLabel: '1 Feb 2018, 00:00, Point 3 Third 70' },
+          },
+          {
+            x: new Date('2018/03/01'),
+            y: 50,
+            callOutAccessibilityData: { ariaLabel: '1 Mar 2018, 00:00, Point 3 Third 50' },
+          },
+          {
+            x: new Date('2018/04/01'),
+            y: 70,
+            callOutAccessibilityData: { ariaLabel: '1 Apr 2018, 00:00, Point 3 Third 70' },
+          },
+          {
+            x: new Date('2018/05/01'),
+            y: 50,
+            callOutAccessibilityData: { ariaLabel: '1 May 2018, 00:00, Point 3 Third 50' },
+          },
         ],
         legend: 'Third',
         color: DataVizPalette.color6,
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
index 7b260b398603a..d4d3c8ae41602 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
@@ -146,7 +146,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL
     const margins = { left: 35, top: 20, bottom: 35, right: 20 };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_basic">Change Width:</label>
         <input
           type="range"
@@ -191,7 +191,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL
             enablePerfOptimization={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx
index 7d2eb4eb1d4b5..7ce2130e9a131 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx
@@ -31,7 +31,7 @@ export class LineChartEventsExample extends React.Component<{}, ILineChartEvents
 
   public render(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Events">Change Width:</label>
         <input
           type="range"
@@ -71,7 +71,7 @@ export class LineChartEventsExample extends React.Component<{}, ILineChartEvents
           />
         )}
         <div>{this._basicExample()}</div>
-      </>
+      </div>
     );
   }
 
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
index 4aab32443e830..b8c7ed7cf8b42 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
@@ -241,7 +241,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat
     const margins = { left: 35, top: 20, bottom: 35, right: 20 };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Gaps">Change Width:</label>
         <input
           type="range"
@@ -278,7 +278,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat
             enablePerfOptimization={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx
index fad6ebbff204f..1cca3338bc172 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx
@@ -114,7 +114,7 @@ export class LineChartLargeDataExample extends React.Component<{}, ILineChartBas
     const margins = { left: 35, top: 20, bottom: 35, right: 20 };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_basic">Change Width:</label>
         <input
           type="range"
@@ -157,7 +157,7 @@ export class LineChartLargeDataExample extends React.Component<{}, ILineChartBas
             enablePerfOptimization={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
index 092e55a19a3ab..aa769a33fa5c7 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
@@ -20,7 +20,7 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult
 
   public render(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Multiple">Change Width:</label>
         <input
           type="range"
@@ -49,7 +49,7 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult
           checked={this.state.allowMultipleShapes}
         />
         <div>{this._styledExample()}</div>
-      </>
+      </div>
     );
   }
 
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx
index baf1ee6c463bf..37d59d3bc7b6c 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx
@@ -156,7 +156,7 @@ export class LineChartNegativeExample extends React.Component<{}, ILineChartBasi
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_basic">Change Width:</label>
         <input
           type="range"
@@ -218,7 +218,7 @@ export class LineChartNegativeExample extends React.Component<{}, ILineChartBasi
             supportNegativeData={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx
index 40ea014d47fbc..9b33d1f2b7953 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx
@@ -62,7 +62,7 @@ export class LineChartStyledExample extends React.Component<{}, IStyledLineChart
       height: `${this.state.height}px`,
     };
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Styled">Change Width:</label>
         <input
           type="range"
@@ -115,7 +115,7 @@ export class LineChartStyledExample extends React.Component<{}, IStyledLineChart
             useUTC={false}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx
index 0499be1fc2b45..6f7ae6ee48c8d 100644
--- a/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx
@@ -11,6 +11,24 @@ export class PieChartBasicExample extends React.Component<IPieChartProps, { widt
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     const points = [
       { y: 50, x: 'ABCD' },
@@ -18,7 +36,7 @@ export class PieChartBasicExample extends React.Component<IPieChartProps, { widt
       { y: 25, x: 'IJKL' },
     ];
     return (
-      <React.Fragment>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 20 }}>
           <StackItem>
             <label htmlFor="width-slider">Width:</label>
@@ -52,7 +70,7 @@ export class PieChartBasicExample extends React.Component<IPieChartProps, { widt
           data={points}
           chartTitle="Pie Chart basic example"
         />
-      </React.Fragment>
+      </div>
     );
   }
 
diff --git a/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx
index 121e79716acb5..6a403a45d0d9e 100644
--- a/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx
+++ b/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx
@@ -54,7 +54,7 @@ export class PieChartDynamicExample extends React.Component<IPieChartProps, IExa
 
   public render(): JSX.Element {
     return (
-      <div>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 20 }}>
           <StackItem>
             <label htmlFor="width-slider">Width:</label>
diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx
index 601b1ebc2dde0..51f5cea0226b4 100644
--- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx
@@ -21,6 +21,24 @@ export class SankeyChartBasicExample extends React.Component<{}, ISankeyChartBas
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._basicExample()}</div>;
   }
@@ -122,7 +140,7 @@ export class SankeyChartBasicExample extends React.Component<{}, ISankeyChartBas
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -151,7 +169,7 @@ export class SankeyChartBasicExample extends React.Component<{}, ISankeyChartBas
             shouldResize={this.state.width + this.state.height}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx
index 8b4c7ef8787b1..b8453723c2b82 100644
--- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx
+++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx
@@ -180,7 +180,7 @@ export class SankeyChartInboxExample extends React.Component<{}, ISankeyChartBas
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label>change Width:</label>
         <input type="range" value={this.state.width} min={400} max={1600} onChange={this._onWidthChange} />
         <label>change Height:</label>
@@ -201,7 +201,7 @@ export class SankeyChartInboxExample extends React.Component<{}, ISankeyChartBas
             }}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Rebalance.Example.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Rebalance.Example.tsx
index 3fef0e97191ac..19c1d95ad7a09 100644
--- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Rebalance.Example.tsx
+++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Rebalance.Example.tsx
@@ -384,7 +384,7 @@ export class SankeyChartRebalanceExample extends React.Component<{}, ISankeyChar
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <Toggle
           label="Data Source"
           onText="simple"
@@ -412,7 +412,7 @@ export class SankeyChartRebalanceExample extends React.Component<{}, ISankeyChar
             }}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx
index b38aa9070b74c..d3431717a6898 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx
@@ -92,6 +92,25 @@ export class TreeChartThreeLayerExample extends React.Component<{}, ITreeState>
   constructor(props: ITreeProps) {
     super(props);
   }
+
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._createTreeChart()}</div>;
   }
@@ -102,7 +121,7 @@ export class TreeChartThreeLayerExample extends React.Component<{}, ITreeState>
 
   private _createTreeChart(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -114,7 +133,7 @@ export class TreeChartThreeLayerExample extends React.Component<{}, ITreeState>
           aria-valuetext={`ChangeWidthSlider${this.state?._layoutWidth}`}
         />
         <TreeChart treeData={threeLayerChart} layoutWidth={this.state?._layoutWidth} />
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompact.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompact.Example.tsx
index fe4b3b498e9b1..7ead85071437a 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompact.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompact.Example.tsx
@@ -100,7 +100,7 @@ export class TreeChartThreeLayerCompactExample extends React.Component<{}, ITree
 
   private _createTreeChart(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -117,7 +117,7 @@ export class TreeChartThreeLayerCompactExample extends React.Component<{}, ITree
           treeTraversal={TreeTraverse.levelOrder}
           layoutWidth={this.state?._layoutWidth}
         />
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx
index 1a75a58478a2a..87a5281dc5510 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx
@@ -79,7 +79,7 @@ export class TreeChartThreeLayerCompactDocSiteExample extends React.Component<{}
 
   private _createTreeChart(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -99,7 +99,7 @@ export class TreeChartThreeLayerCompactDocSiteExample extends React.Component<{}
           height={this.state._height}
           margins={{ top: 30, right: 130, bottom: 30, left: 50 }}
         />
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx
index 31f43fecbb1b2..378dffb78bfe9 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx
@@ -72,7 +72,7 @@ export class TreeChartThreeLayerDocSiteExample extends React.Component<{}, ITree
 
   private _createTreeChart(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -90,7 +90,7 @@ export class TreeChartThreeLayerDocSiteExample extends React.Component<{}, ITree
           height={this.state._height}
           margins={{ top: 30, right: 130, bottom: 30, left: 50 }}
         />
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerLong.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerLong.Example.tsx
index f3cfb62c5f066..4a64908f99338 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerLong.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerLong.Example.tsx
@@ -98,7 +98,7 @@ export class TreeChartThreeLayerLongExample extends React.Component<{}, ITreeSta
   };
   private _createTreeChart(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -115,7 +115,7 @@ export class TreeChartThreeLayerLongExample extends React.Component<{}, ITreeSta
           treeTraversal={TreeTraverse.preOrder}
           layoutWidth={this.state?._layoutWidth}
         />
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.TwoLayer.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.TwoLayer.Example.tsx
index 40d5a654885ee..2c8003c0347fe 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.TwoLayer.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.TwoLayer.Example.tsx
@@ -26,7 +26,7 @@ export class TreeChartTwoLayerExample extends React.Component<{}, ITreeState> {
 
   private _createTreeChart(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -38,7 +38,7 @@ export class TreeChartTwoLayerExample extends React.Component<{}, ITreeState> {
           aria-valuetext={`ChangeWidthSlider${this.state?._layoutWidth}`}
         />
         <TreeChart treeData={twoLayerChart} layoutWidth={this.state?._layoutWidth} />
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AllNegative.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AllNegative.Example.tsx
index eefe82e093b07..568f939057b98 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AllNegative.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AllNegative.Example.tsx
@@ -183,7 +183,7 @@ export class VerticalBarChartAllNegativeExample extends React.Component<IVertica
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <Label>
           In this example the supportNegativeData property is enabled and all negative y points are passed to the data.
           As a result chart with negative y axis data is rendered.
@@ -288,7 +288,7 @@ export class VerticalBarChartAllNegativeExample extends React.Component<IVertica
             />
           </div>
         )}
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTooltip.Example.tsx
index e51850a82b662..327546ba90a24 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTooltip.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTooltip.Example.tsx
@@ -114,7 +114,7 @@ export class VerticalBarChartTooltipExample extends React.Component<{}, IVertica
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 30 }}>
           <Stack horizontal verticalAlign="center">
             <Label htmlFor="input-width" style={{ fontWeight: 400 }}>
@@ -241,7 +241,7 @@ export class VerticalBarChartTooltipExample extends React.Component<{}, IVertica
             roundCorners={this.state.roundCorners}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
index f371275c090b2..1857036d11124 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
@@ -46,6 +46,24 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div>{this._basicExample()}</div>;
   }
@@ -189,7 +207,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <Label>
           In this example the xAxisCalloutData property overrides the x value that is shown on the callout. So instead
           of a numeric value, the callout will show the date that is passed in the xAxisCalloutData property.
@@ -305,7 +323,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
             />
           </div>
         )}
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx
index 88bf85c6bbe49..a2500bfdefd92 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx
@@ -104,7 +104,7 @@ export class VerticalBarChartDynamicExample extends React.Component<IVerticalBar
 
   public render(): JSX.Element {
     return (
-      <>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: '15 30' }}>
           <Stack horizontal verticalAlign="center">
             <Label htmlFor="input-width" style={{ fontWeight: 400 }}>
@@ -251,7 +251,7 @@ export class VerticalBarChartDynamicExample extends React.Component<IVerticalBar
             </p>
           </div>
         </div>
-      </>
+      </div>
     );
   }
 
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Negative.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Negative.Example.tsx
index 818e638767da0..7d9a9c87d3e08 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Negative.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Negative.Example.tsx
@@ -183,7 +183,7 @@ export class VerticalBarChartNegativeExample extends React.Component<IVerticalBa
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <Label>
           In this example the supportNegativeData property is enabled and some positive and some negative y points are
           passed to the data. As a result chart with negative y axis data is rendered.
@@ -288,7 +288,7 @@ export class VerticalBarChartNegativeExample extends React.Component<IVerticalBa
             />
           </div>
         )}
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx
index 6827aa0427bbd..c4f698f81b2df 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx
@@ -115,7 +115,7 @@ export class VerticalStackedBarChartTooltipExample extends React.Component<{}, I
 
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
     return (
-      <>
+      <div className="containerDiv">
         <Stack horizontal wrap tokens={{ childrenGap: 30 }}>
           <Stack horizontal verticalAlign="center">
             <Label htmlFor="input-width" style={{ fontWeight: 400 }}>
@@ -241,7 +241,7 @@ export class VerticalStackedBarChartTooltipExample extends React.Component<{}, I
             roundCorners={this.state.roundCorners}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
index 191b134eb7137..fc47b5eb8bf9c 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
@@ -45,6 +45,24 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
     };
   }
 
+  public componentDidMount(): void {
+    const style = document.createElement('style');
+    const focusStylingCSS = `
+    .containerDiv [contentEditable=true]:focus,
+    .containerDiv [tabindex]:focus,
+    .containerDiv area[href]:focus,
+    .containerDiv button:focus,
+    .containerDiv iframe:focus,
+    .containerDiv input:focus,
+    .containerDiv select:focus,
+    .containerDiv textarea:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+    }
+    `;
+    style.appendChild(document.createTextNode(focusStylingCSS));
+    document.head.appendChild(style);
+  }
+
   public render(): JSX.Element {
     return <div key={'id_VBC'}>{this._basicExample()}</div>;
   }
@@ -306,7 +324,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Basic">Change Width:</label>
         <input
           type="range"
@@ -417,7 +435,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
             />
           </div>
         )}
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx
index 801e94a261d94..45eb49f55e6a7 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx
@@ -198,7 +198,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Callout">Change Width:</label>
         <input
           type="range"
@@ -295,7 +295,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
             enableReflow={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx
index 2b8da4d5fd509..599efdabcf144 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx
@@ -173,7 +173,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
 
     return (
-      <>
+      <div className="containerDiv">
         <label htmlFor="changeWidth_Custom">Change Width:</label>
         <input
           type="range"
@@ -224,7 +224,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
             enableReflow={true}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example.tsx
index ed0e96abf09d0..919dedf7f395b 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example.tsx
@@ -139,7 +139,7 @@ export class VerticalStackedBarChartDateAxisExample extends React.Component<{},
     };
 
     return (
-      <>
+      <div className="containerDiv">
         <div>
           <label htmlFor="ChangeWidth_Styled">Width:</label>
           <input
@@ -257,7 +257,7 @@ export class VerticalStackedBarChartDateAxisExample extends React.Component<{},
             useUTC={false}
           />
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Reflow.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Reflow.Example.tsx
index 9149ddf07148c..b3d7cf5e2c5f7 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Reflow.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Reflow.Example.tsx
@@ -9,7 +9,11 @@ import {
 
 export class VerticalStackedBarChartReflowExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
-    return <div key={'id_VBC'}>{this._reflowExample()}</div>;
+    return (
+      <div className="containerDiv" key={'id_VBC'}>
+        {this._reflowExample()}
+      </div>
+    );
   }
 
   private _reflowExample(): JSX.Element {
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
index 1c6fcce2cfb2f..f48d112c477d0 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
@@ -114,7 +114,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
     };
 
     return (
-      <>
+      <div className="containerDiv">
         <div>
           <label htmlFor="ChangeWidth_Styled">Width:</label>
           <input
@@ -236,7 +236,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
             roundCorners={this.state.roundCorners}
           />
         </div>
-      </>
+      </div>
     );
   }
 }