Bug fixes - BUG 9834258, BUG 9843426, BUG 9819030

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

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

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

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

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

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

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>) => {

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

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

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

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

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}

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

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

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