From a94e9f119f741ab675f5d801a6985597520c782a Mon Sep 17 00:00:00 2001
From: srmukher <120183316+srmukher@users.noreply.github.com>
Date: Mon, 23 Dec 2024 12:07:07 +0000
Subject: [PATCH] Adding and updating tests

---
 .../components/DonutChart/DonutChart.base.tsx |  28 +-
 .../DonutChart/DonutChartRTL.test.tsx         |  42 +-
 .../__snapshots__/DonutChart.test.tsx.snap    | 130 +++--
 .../__snapshots__/DonutChartRTL.test.tsx.snap | 496 +++++++++++++++++-
 4 files changed, 642 insertions(+), 54 deletions(-)

diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
index f02cd6f6270bff..0eda3dfe5293cb 100644
--- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -270,7 +270,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     event: React.MouseEvent<HTMLButtonElement>,
     currentLegend?: ILegend,
   ): void {
-    if (this.props.legendProps?.canSelectMultipleLegends) {
+    if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {
       this.setState({ selectedLegends });
     } else {
       this.setState({ selectedLegends: selectedLegends.slice(-1) });
@@ -280,14 +280,6 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     }
   }
 
-  private _isLegendHighlighted = (legend: string | undefined): boolean => {
-    return this._getHighlightedLegend().includes(legend!);
-  };
-
-  private _noLegendsHighlighted = (): boolean => {
-    return this._getHighlightedLegend().length === 0;
-  };
-
   private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {
     this._currentHoverElement = element;
     this.setState({
@@ -344,11 +336,11 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {
     const highlightedLegends = this._getHighlightedLegend();
     if (valueInsideDonut !== undefined && (highlightedLegends.length !== 0 || this.state.showHover)) {
-      const legendValue = data.find(point => point.legend === this.state.legend);
-      return legendValue
-        ? legendValue.yAxisCalloutData
-          ? legendValue.yAxisCalloutData
-          : legendValue.data!
+      const pointValue = data.find(point => point.legend === this.state.legend);
+      return pointValue
+        ? pointValue.yAxisCalloutData
+          ? pointValue.yAxisCalloutData
+          : pointValue.data!
         : valueInsideDonut;
     } else if (highlightedLegends.length > 0) {
       let totalValue = 0;
@@ -384,6 +376,14 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       : [];
   }
 
+  private _isLegendHighlighted = (legend: string | undefined): boolean => {
+    return this._getHighlightedLegend().includes(legend!);
+  };
+
+  private _noLegendsHighlighted = (): boolean => {
+    return this._getHighlightedLegend().length === 0;
+  };
+
   private _isChartEmpty(): boolean {
     return !(
       this.props.data &&
diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
index db7dcb00b7e582..cd362b95cc47bb 100644
--- a/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
+++ b/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
@@ -18,6 +18,9 @@ describe('Donut chart interactions', () => {
   beforeEach(() => {
     sharedBeforeEach();
     jest.spyOn(global.Math, 'random').mockReturnValue(0.1);
+    // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
+    // getComputedTextLength() which will otherwise lead to a crash if mounted
+    jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '20000');
   });
   afterEach(() => {
     jest.spyOn(global.Math, 'random').mockRestore();
@@ -70,7 +73,7 @@ describe('Donut chart interactions', () => {
 
   test('Should highlight the corresponding Pie on mouse over on legends', () => {
     // Arrange
-    const { container } = render(<DonutChart data={chartPointsDC} innerRadius={55} hideLegend={false} />);
+    const { container } = render(<DonutChart data={chartPointsDC} innerRadius={55} hideLabels={false} />);
 
     // Act
     const legend = screen.queryByText('first');
@@ -157,9 +160,6 @@ describe('Donut chart interactions', () => {
   });
 
   test('Should change value inside donut with the legend value on mouseOver legend ', () => {
-    // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
-    // getComputedTextLength() which will otherwise lead to a crash if mounted
-    jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000');
     // Arrange
     const { container } = render(
       <DonutChart data={chartPointsDC} innerRadius={55} hideLegend={false} valueInsideDonut={1000} />,
@@ -170,7 +170,7 @@ describe('Donut chart interactions', () => {
     fireEvent.mouseOver(screen.getByText('first'));
 
     // Assert
-    expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000');
+    expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('1,000');
   });
 
   test('Should reflect theme change', () => {
@@ -184,6 +184,38 @@ describe('Donut chart interactions', () => {
     // Assert
     expect(container).toMatchSnapshot();
   });
+
+  // add test for legend multi select
+  test('Should select multiple legends on click', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart
+        data={chartPointsDC}
+        innerRadius={55}
+        hideLegend={false}
+        legendProps={{
+          canSelectMultipleLegends: true,
+        }}
+      />,
+    );
+
+    // Act
+    const firstLegend = screen.queryByText('first')?.closest('button');
+    const secondLegend = screen.queryByText('second')?.closest('button');
+    expect(firstLegend).toBeDefined();
+    expect(secondLegend).toBeDefined();
+    fireEvent.click(firstLegend!);
+    fireEvent.click(secondLegend!);
+
+    // Assert
+    expect(firstLegend).toHaveAttribute('aria-selected', 'true');
+    expect(secondLegend).toHaveAttribute('aria-selected', 'true');
+
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?first/i)[0]).toHaveStyle('opacity: 1.0');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 1.0');
+    expect(getById(container, /Pie.*?third/i)[0]).toHaveStyle('opacity: 0.1');
+  });
 });
 
 describe('Donut Chart - axe-core', () => {
diff --git a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 376f2500053757..1daf5c828b2547 100644
--- a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -125,23 +125,6 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
               role="img"
             />
           </g>
-          <text
-            className=
-
-                {
-                  fill: #323130;
-                  font-size: 24px;
-                  font-weight: 600;
-                }
-                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                  fill: rgb(179, 179, 179);
-                }
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y={5}
-          >
-            20,000
-          </text>
         </g>
       </svg>
     </div>
@@ -831,23 +814,6 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
               role="img"
             />
           </g>
-          <text
-            className=
-
-                {
-                  fill: #323130;
-                  font-size: 24px;
-                  font-weight: 600;
-                }
-                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                  fill: rgb(179, 179, 179);
-                }
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y={5}
-          >
-            20,000
-          </text>
         </g>
       </svg>
     </div>
@@ -1911,6 +1877,22 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
               onMouseOver={[Function]}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="start"
+              x={35.43557344375781}
+              y={-50.87553571916512}
+            >
+              20.0k
+            </text>
           </g>
           <g>
             <path
@@ -1937,6 +1919,22 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
               onMouseOver={[Function]}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="hanging"
+              textAnchor="start"
+              x={42.16983494620299}
+              y={45.45002772947447}
+            >
+              39.0k
+            </text>
           </g>
           <g>
             <path
@@ -1963,6 +1961,22 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
               onMouseOver={[Function]}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="end"
+              x={-60.58001193073337}
+              y={-13.19326170710649}
+            >
+              45.0k
+            </text>
           </g>
         </g>
       </svg>
@@ -2429,6 +2443,22 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               onMouseOver={[Function]}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="start"
+              x={35.43557344375781}
+              y={-50.87553571916512}
+            >
+              19%
+            </text>
           </g>
           <g>
             <path
@@ -2455,6 +2485,22 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               onMouseOver={[Function]}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="hanging"
+              textAnchor="start"
+              x={42.16983494620299}
+              y={45.45002772947447}
+            >
+              38%
+            </text>
           </g>
           <g>
             <path
@@ -2481,6 +2527,22 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               onMouseOver={[Function]}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="end"
+              x={-60.58001193073337}
+              y={-13.19326170710649}
+            >
+              43%
+            </text>
           </g>
         </g>
       </svg>
diff --git a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index 64796dabf922a9..5dab0bf43a88d3 100644
--- a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -636,4 +636,498 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
 </div>
 `;
 
-exports[`Donut chart interactions Should reflect theme change 1`] = `<div />`;
+exports[`Donut chart interactions Should reflect theme change 1`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          background: #1b1a19;
+          color: #f3f2f1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+        }
+  >
+    <div
+      class=
+          ms-DonutChart
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 100%;
+            width: 100%;
+          }
+    >
+      <div
+        class=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone6"
+        data-tabster="{\\"uncontrolled\\": {}}"
+      >
+        <div>
+          <svg
+            aria-label="Donut chart example"
+            class=
+
+                {
+                  alignment-adjust: center;
+                  box-sizing: content-box;
+                  display: block;
+                  height: -40px;
+                  overflow: visible;
+                  width: 0px;
+                }
+            focusable="false"
+            viewBox="0 0 0 0"
+          >
+            <g
+              transform="translate(0, -20)"
+            >
+              <g>
+                <path
+                  aria-label="2020/04/30, 20000."
+                  class=
+
+                      {
+                        cursor: default;
+                        fill: #E5E5E5;
+                        opacity: 1;
+                        outline: transparent;
+                        stroke: #1b1a19;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+                  data-is-focusable="true"
+                  id="_Pie_4first20000"
+                  role="img"
+                  tabindex="0"
+                />
+              </g>
+              <g>
+                <path
+                  aria-label="2020/04/20, 39000."
+                  class=
+
+                      {
+                        cursor: default;
+                        fill: #0078D4;
+                        opacity: 1;
+                        outline: transparent;
+                        stroke: #1b1a19;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+                  data-is-focusable="true"
+                  id="_Pie_4second39000"
+                  role="img"
+                  tabindex="-1"
+                />
+              </g>
+              <g>
+                <path
+                  aria-label="2020/04/25, 45000."
+                  class=
+
+                      {
+                        cursor: default;
+                        fill: #DADADA;
+                        opacity: 1;
+                        outline: transparent;
+                        stroke: #1b1a19;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+                  data-is-focusable="true"
+                  id="_Pie_4third45000"
+                  role="img"
+                  tabindex="-1"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <span
+        class="ms-layer"
+      />
+      <div
+        class=
+
+            {
+              padding-top: 16px;
+              width: 0px;
+            }
+      >
+        <div
+          class=
+
+              {
+                align-items: center;
+                margin-bottom: 0;
+                margin-left: -8px;
+                margin-right: 0;
+                margin-top: -8px;
+                white-space: nowrap;
+                width: 100%;
+              }
+        >
+          <div>
+            <div
+              style="position: relative;"
+            >
+              <div
+                data-automation-id="visibleContent"
+                style="position: fixed; visibility: hidden;"
+              >
+                <div
+                  aria-label="Legends"
+                  aria-multiselectable="false"
+                  class=
+                      ms-FocusZone
+                      &:focus {
+                        outline: none;
+                      }
+                  data-focuszone-id="FocusZone10"
+                  data-tabster="{\\"uncontrolled\\": {}}"
+                  role="listbox"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet
+                        {
+                          display: flex;
+                          flex-wrap: wrap;
+                          justify-content: center;
+                          position: relative;
+                        }
+                    role="group"
+                  >
+                    <div
+                      class=
+                          ms-OverflowSet-item
+                          {
+                            display: inherit;
+                            flex-shrink: 0;
+                          }
+                      role="none"
+                    >
+                      <button
+                        aria-label="first"
+                        aria-posinset="1"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .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){.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"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #E5E5E5;
+                                border-color: #E5E5E5;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
+
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          first
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      class=
+                          ms-OverflowSet-item
+                          {
+                            display: inherit;
+                            flex-shrink: 0;
+                          }
+                      role="none"
+                    >
+                      <button
+                        aria-label="second"
+                        aria-posinset="2"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .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){.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"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #0078D4;
+                                border-color: #0078D4;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #0078D4, #0078D4);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
+
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          second
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      class=
+                          ms-OverflowSet-item
+                          {
+                            display: inherit;
+                            flex-shrink: 0;
+                          }
+                      role="none"
+                    >
+                      <button
+                        aria-label="third"
+                        aria-posinset="3"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .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){.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"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #DADADA;
+                                border-color: #DADADA;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #DADADA, #DADADA);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
+
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          third
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;