From c7effe53b0e21b55dab203039ab2282b54611c09 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Thu, 24 Mar 2022 17:17:47 -0700
Subject: [PATCH 1/2] convert to testing-library

---
 .../ChoiceGroup/ChoiceGroup.test.tsx          |  165 +-
 .../__snapshots__/ChoiceGroup.test.tsx.snap   | 1666 +++++++++--------
 2 files changed, 913 insertions(+), 918 deletions(-)

diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
index e879074607c67..40f6279aa5b0d 100644
--- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
+++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
@@ -1,48 +1,34 @@
 import * as React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import * as ReactTestUtils from 'react-dom/test-utils';
-import * as renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { ChoiceGroup } from './ChoiceGroup';
 import { merge, resetIds } from '../../Utilities';
-import { safeMount } from '@fluentui/test-utilities';
 import { isConformant } from '../../common/isConformant';
-import type { IChoiceGroupOption, IChoiceGroup, IChoiceGroupProps } from './ChoiceGroup.types';
+import type { IChoiceGroupOption, IChoiceGroup } from './ChoiceGroup.types';
 
 const TEST_OPTIONS: IChoiceGroupOption[] = [
   { key: '1', text: '1', 'data-automation-id': 'auto1', autoFocus: true } as IChoiceGroupOption,
   { key: '2', text: '2' },
   { key: '3', text: '3' },
 ];
-const CHOICE_QUERY_SELECTOR = '.ms-ChoiceField-input';
 
 describe('ChoiceGroup', () => {
-  let choiceGroup: ReactWrapper<IChoiceGroupProps> | undefined;
-
   beforeEach(() => {
     // Resetting ids to create predictability in generated ids.
     resetIds();
   });
 
-  afterEach(() => {
-    if (choiceGroup) {
-      choiceGroup.unmount();
-      choiceGroup = undefined;
-    }
-  });
-
   it('renders ChoiceGroup correctly', () => {
-    const component = renderer.create(<ChoiceGroup className="testClassName" options={TEST_OPTIONS} required />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(<ChoiceGroup className="testClassName" options={TEST_OPTIONS} required />);
+    expect(container).toMatchSnapshot();
   });
 
   it('renders ChoiceGroup with label correctly', () => {
-    const component = renderer.create(
+    const { container } = render(
       <ChoiceGroup className="testClassName" label="test label" options={TEST_OPTIONS} required />,
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   isConformant({
@@ -51,19 +37,19 @@ describe('ChoiceGroup', () => {
   });
 
   it('does not use className prop from parent on label', () => {
-    choiceGroup = mount(<ChoiceGroup className="testClassName" label="test label" options={TEST_OPTIONS} required />);
-    const label = choiceGroup.getDOMNode().querySelector('label');
+    const { container } = render(
+      <ChoiceGroup className="testClassName" label="test label" options={TEST_OPTIONS} required />,
+    );
+    const label = container.querySelector('label');
     expect(label).toBeTruthy();
     expect(label!.textContent).toBe('test label');
     expect(label!.className).not.toContain('testClassName');
   });
 
   it('can change options', () => {
-    choiceGroup = mount(<ChoiceGroup label="testgroup" options={TEST_OPTIONS} required={true} />);
+    const { getAllByRole } = render(<ChoiceGroup label="testgroup" options={TEST_OPTIONS} required={true} />);
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceOptions.length).toBe(3);
 
@@ -71,19 +57,19 @@ describe('ChoiceGroup', () => {
     expect(choiceOptions[1].checked).toEqual(false);
     expect(choiceOptions[2].checked).toEqual(false);
 
-    ReactTestUtils.Simulate.change(choiceOptions[0]);
+    userEvent.click(choiceOptions[0]);
 
     expect(choiceOptions[0].checked).toEqual(true);
     expect(choiceOptions[1].checked).toEqual(false);
     expect(choiceOptions[2].checked).toEqual(false);
 
-    ReactTestUtils.Simulate.change(choiceOptions[1]);
+    userEvent.click(choiceOptions[1]);
 
     expect(choiceOptions[0].checked).toEqual(false);
     expect(choiceOptions[1].checked).toEqual(true);
     expect(choiceOptions[2].checked).toEqual(false);
 
-    ReactTestUtils.Simulate.change(choiceOptions[0]);
+    userEvent.click(choiceOptions[0]);
 
     expect(choiceOptions[0].checked).toEqual(true);
     expect(choiceOptions[1].checked).toEqual(false);
@@ -94,11 +80,9 @@ describe('ChoiceGroup', () => {
     const options: IChoiceGroupOption[] = merge([], TEST_OPTIONS);
     options[0].disabled = true;
 
-    choiceGroup = mount(<ChoiceGroup label="testgroup" options={options} required={true} />);
+    const { getAllByRole } = render(<ChoiceGroup label="testgroup" options={options} required={true} />);
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceOptions[0].disabled).toEqual(true);
     expect(choiceOptions[1].disabled).toEqual(false);
@@ -106,27 +90,26 @@ describe('ChoiceGroup', () => {
   });
 
   it('renders all choice options as disabled when disabled', () => {
-    choiceGroup = mount(<ChoiceGroup label="testgroup" options={TEST_OPTIONS} required={true} disabled={true} />);
+    const { getAllByRole } = render(
+      <ChoiceGroup label="testgroup" options={TEST_OPTIONS} required={true} disabled={true} />,
+    );
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceOptions[0].disabled).toEqual(true);
     expect(choiceOptions[1].disabled).toEqual(true);
     expect(choiceOptions[2].disabled).toEqual(true);
   });
 
+  /* Testing that the defaultSelectedKey is working correctly. */
   it('can act as an uncontrolled component', () => {
-    choiceGroup = mount(<ChoiceGroup defaultSelectedKey="1" options={TEST_OPTIONS} />);
+    const { getAllByRole } = render(<ChoiceGroup defaultSelectedKey="1" options={TEST_OPTIONS} />);
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceOptions[0].checked).toEqual(true);
 
-    ReactTestUtils.Simulate.change(choiceOptions[1]);
+    userEvent.click(choiceOptions[1]);
 
     expect(choiceOptions[1].checked).toEqual(true);
   });
@@ -140,15 +123,13 @@ describe('ChoiceGroup', () => {
       _selectedItem = item;
     };
 
-    choiceGroup = mount(<ChoiceGroup selectedKey="1" options={TEST_OPTIONS} onChange={onChange} />);
+    const { getAllByRole } = render(<ChoiceGroup selectedKey="1" options={TEST_OPTIONS} onChange={onChange} />);
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceOptions[0].checked).toEqual(true);
 
-    ReactTestUtils.Simulate.change(choiceOptions[1]);
+    userEvent.click(choiceOptions[1]);
 
     expect(choiceOptions[0].checked).toEqual(true);
     expect(choiceOptions[1].checked).toEqual(false);
@@ -162,11 +143,9 @@ describe('ChoiceGroup', () => {
       item: IChoiceGroupOption | undefined,
     ): void => undefined;
 
-    choiceGroup = mount(<ChoiceGroup options={TEST_OPTIONS} onChange={onChange} />);
+    const { getAllByRole } = render(<ChoiceGroup options={TEST_OPTIONS} onChange={onChange} />);
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     const extraAttributeGetter: (index: number) => string | null = (index: number): string | null => {
       const input: HTMLInputElement = choiceOptions[index];
@@ -178,24 +157,24 @@ describe('ChoiceGroup', () => {
   });
 
   it('can set role attribute to empty string', () => {
-    choiceGroup = mount(<ChoiceGroup options={TEST_OPTIONS} role="" />);
-    const role = choiceGroup.getDOMNode().getAttribute('role');
+    const { container } = render(<ChoiceGroup options={TEST_OPTIONS} role="" />);
+    const role = container.querySelector('.ms-ChoiceFieldGroup')!.getAttribute('role');
     expect(role).toEqual('');
   });
 
   it('can set role attribute on the containing element', () => {
-    choiceGroup = mount(<ChoiceGroup options={TEST_OPTIONS} role="Test" />);
-    const role = choiceGroup.getDOMNode().getAttribute('role');
+    const { container } = render(<ChoiceGroup options={TEST_OPTIONS} role="Test" />);
+    const role = container.querySelector('.ms-ChoiceFieldGroup')!.getAttribute('role');
     expect(role).toEqual('Test');
   });
 
   it('can assign a custom aria label', () => {
     const option4: IChoiceGroupOption[] = [{ key: '4', text: '4', ariaLabel: 'Custom aria label' }];
-    choiceGroup = mount(<ChoiceGroup label="testgroup" options={TEST_OPTIONS.concat(option4)} required={true} />);
+    const { getAllByRole } = render(
+      <ChoiceGroup label="testgroup" options={TEST_OPTIONS.concat(option4)} required={true} />,
+    );
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceOptions.length).toBe(4);
 
@@ -207,80 +186,74 @@ describe('ChoiceGroup', () => {
 
   it('returns the current checked option with user interaction', () => {
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    choiceGroup = mount(<ChoiceGroup options={TEST_OPTIONS} componentRef={choiceGroupRef} />);
+    const { getAllByRole } = render(<ChoiceGroup options={TEST_OPTIONS} componentRef={choiceGroupRef} />);
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceGroupRef.current!.checkedOption).toBeUndefined();
-    ReactTestUtils.Simulate.change(choiceOptions[0]);
+    userEvent.click(choiceOptions[0]);
     expect(choiceGroupRef.current!.checkedOption).toEqual(TEST_OPTIONS[0]);
   });
 
   it('returns the current checked option with defaultSelectedKey', () => {
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    choiceGroup = mount(<ChoiceGroup options={TEST_OPTIONS} defaultSelectedKey="1" componentRef={choiceGroupRef} />);
+    const { getAllByRole } = render(
+      <ChoiceGroup options={TEST_OPTIONS} defaultSelectedKey="1" componentRef={choiceGroupRef} />,
+    );
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceGroupRef.current!.checkedOption).toEqual(TEST_OPTIONS[0]);
-    ReactTestUtils.Simulate.change(choiceOptions[1]);
+    userEvent.click(choiceOptions[1]);
     expect(choiceGroupRef.current!.checkedOption).toEqual(TEST_OPTIONS[1]);
   });
 
   it('returns the current checked option with selectedKey', () => {
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    choiceGroup = mount(<ChoiceGroup options={TEST_OPTIONS} selectedKey="1" componentRef={choiceGroupRef} />);
+    const { getAllByRole } = render(
+      <ChoiceGroup options={TEST_OPTIONS} selectedKey="1" componentRef={choiceGroupRef} />,
+    );
 
-    const choiceOptions = choiceGroup
-      .getDOMNode()
-      .querySelectorAll(CHOICE_QUERY_SELECTOR) as NodeListOf<HTMLInputElement>;
+    const choiceOptions = getAllByRole('radio') as HTMLInputElement[];
 
     expect(choiceGroupRef.current!.checkedOption).toEqual(TEST_OPTIONS[0]);
-    ReactTestUtils.Simulate.change(choiceOptions[1]);
+    userEvent.click(choiceOptions[1]);
     // selectedKey is still used even though it didn't get updated for latest user click
     expect(choiceGroupRef.current!.checkedOption).toEqual(TEST_OPTIONS[0]);
   });
 
   it('can render element id', () => {
-    choiceGroup = mount(<ChoiceGroup defaultSelectedKey="1" id="foo" options={TEST_OPTIONS} />);
-    expect(choiceGroup.getDOMNode().getAttribute('id')).toBe('foo');
+    const { container } = render(<ChoiceGroup defaultSelectedKey="1" id="foo" options={TEST_OPTIONS} />);
+    const root = container.querySelector('.ms-ChoiceFieldGroup');
+    expect(root!.getAttribute('id')).toBe('foo');
   });
 
   it('can focus the checked option', () => {
-    // This test has to mount the element to the document since ChoiceGroup.focus() uses document.getElementById()
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    safeMount(
+    const { getAllByRole } = render(
       <ChoiceGroup options={TEST_OPTIONS} defaultSelectedKey="1" componentRef={choiceGroupRef} />,
-      choiceGroup2 => {
-        const option = choiceGroup2.getDOMNode().querySelector(CHOICE_QUERY_SELECTOR) as HTMLInputElement;
-        const focusSpy = jest.spyOn(option, 'focus');
-
-        choiceGroupRef.current!.focus();
-        expect(focusSpy).toHaveBeenCalled();
-      },
-      true /* attach */,
     );
+
+    const option = getAllByRole('radio')[0] as HTMLInputElement;
+    const focusSpy = jest.spyOn(option, 'focus');
+
+    choiceGroupRef.current!.focus();
+    expect(focusSpy).toHaveBeenCalled();
   });
 
   it('can focus the first enabled option', () => {
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    safeMount(
+    const { getAllByRole } = render(
       <ChoiceGroup
         options={[{ key: '0', text: 'disabled', disabled: true }, ...TEST_OPTIONS]}
         componentRef={choiceGroupRef}
       />,
-      choiceGroup2 => {
-        const option = choiceGroup2.getDOMNode().querySelectorAll(CHOICE_QUERY_SELECTOR)![1] as HTMLInputElement;
-        const focusSpy = jest.spyOn(option, 'focus');
-
-        choiceGroupRef.current!.focus();
-        expect(focusSpy).toHaveBeenCalled();
-      },
-      true /* attach */,
     );
+
+    const option = getAllByRole('radio')[1] as HTMLInputElement;
+    const focusSpy = jest.spyOn(option, 'focus');
+
+    choiceGroupRef.current!.focus();
+    expect(focusSpy).toHaveBeenCalled();
   });
 });
diff --git a/packages/react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap b/packages/react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap
index 4b1f090baf874..f7498915d1b76 100644
--- a/packages/react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap
+++ b/packages/react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap
@@ -1,431 +1,442 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
-<div
-  className=
-      testClassName
-      ms-ChoiceFieldGroup
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        display: block;
-        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>
   <div
-    onFocus={[Function]}
-    role="radiogroup"
+    class=
+        testClassName
+        ms-ChoiceFieldGroup
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: block;
+          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
-      className="ms-ChoiceFieldGroup-flexContainer"
+      role="radiogroup"
     >
       <div
-        className=
-            ms-ChoiceField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              border: none;
-              box-sizing: border-box;
-              color: #323130;
-              display: flex;
-              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;
-              margin-top: 8px;
-              min-height: 26px;
-              position: relative;
-            }
-            & .ms-ChoiceFieldLabel {
-              display: inline-block;
-              padding-left: 26px;
-            }
+        class="ms-ChoiceFieldGroup-flexContainer"
       >
         <div
-          className="ms-ChoiceField-wrapper"
+          class=
+              ms-ChoiceField
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-items: center;
+                border: none;
+                box-sizing: border-box;
+                color: #323130;
+                display: flex;
+                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;
+                margin-top: 8px;
+                min-height: 26px;
+                position: relative;
+              }
+              & .ms-ChoiceFieldLabel {
+                display: inline-block;
+                padding-left: 26px;
+              }
         >
-          <input
-            autoFocus={true}
-            checked={false}
-            className=
-                ms-ChoiceField-input
-                {
-                  height: 100%;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  opacity: 0;
-                  position: absolute;
-                  right: 0px;
-                  top: 0px;
-                  width: 100%;
-                }
-            data-automation-id="auto1"
-            id="ChoiceGroup0-1"
-            name="ChoiceGroup0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={true}
-            type="radio"
-          />
-          <label
-            className=
-                ms-ChoiceField-field
-                {
-                  cursor: pointer;
-                  display: inline-block;
-                  margin-top: 0px;
-                  min-height: 20px;
+          <div
+            class=
+                ms-ChoiceField-wrapper
+                is-inFocus
+                .ms-Fabric--isFocusVisible & {
+                  outline: transparent;
                   position: relative;
-                  user-select: none;
-                  vertical-align: top;
-                }
-                &:hover .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:hover:before {
-                  border-color: #323130;
-                }
-                &:hover:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
                 }
-                &:focus .ms-ChoiceFieldLabel {
-                  color: #201f1e;
+                .ms-Fabric--isFocusVisible &::-moz-focus-inner {
+                  border: 0px;
                 }
-                &:focus:before {
-                  border-color: #323130;
-                }
-                &:focus:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:before {
-                  background-color: #ffffff;
-                  border-color: #323130;
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
+                .ms-Fabric--isFocusVisible &:after {
+                  border: 1px solid #605e5c;
+                  bottom: -2px;
                   content: "";
-                  display: inline-block;
-                  font-weight: normal;
-                  height: 20px;
-                  left: 0px;
+                  left: -2px;
+                  pointer-events: none;
                   position: absolute;
-                  top: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-color;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 20px;
+                  right: -2px;
+                  top: -2px;
                 }
-                &:after {
-                  border-radius: 50%;
-                  box-sizing: border-box;
-                  content: "";
-                  height: 0px;
-                  left: 10px;
-                  position: absolute;
-                  right: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-width;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 0px;
+                @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:after {
+                  border-color: WindowText;
+                  border-width: 2px;
                 }
-            htmlFor="ChoiceGroup0-1"
           >
-            <span
-              className="ms-ChoiceFieldLabel"
-              id="ChoiceGroupLabel1-1"
+            <input
+              class=
+                  ms-ChoiceField-input
+                  {
+                    height: 100%;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    width: 100%;
+                  }
+              data-automation-id="auto1"
+              id="ChoiceGroup0-1"
+              name="ChoiceGroup0"
+              required=""
+              type="radio"
+            />
+            <label
+              class=
+                  ms-ChoiceField-field
+                  {
+                    cursor: pointer;
+                    display: inline-block;
+                    margin-top: 0px;
+                    min-height: 20px;
+                    position: relative;
+                    user-select: none;
+                    vertical-align: top;
+                  }
+                  &:hover .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:hover:before {
+                    border-color: #323130;
+                  }
+                  &:hover:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:focus .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:focus:before {
+                    border-color: #323130;
+                  }
+                  &:focus:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:before {
+                    background-color: #ffffff;
+                    border-color: #323130;
+                    border-radius: 50%;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    content: "";
+                    display: inline-block;
+                    font-weight: normal;
+                    height: 20px;
+                    left: 0px;
+                    position: absolute;
+                    top: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  &:after {
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    content: "";
+                    height: 0px;
+                    left: 10px;
+                    position: absolute;
+                    right: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-width;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 0px;
+                  }
+              for="ChoiceGroup0-1"
             >
-              1
-            </span>
-          </label>
+              <span
+                class="ms-ChoiceFieldLabel"
+                id="ChoiceGroupLabel1-1"
+              >
+                1
+              </span>
+            </label>
+          </div>
         </div>
-      </div>
-      <div
-        className=
-            ms-ChoiceField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              border: none;
-              box-sizing: border-box;
-              color: #323130;
-              display: flex;
-              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;
-              margin-top: 8px;
-              min-height: 26px;
-              position: relative;
-            }
-            & .ms-ChoiceFieldLabel {
-              display: inline-block;
-              padding-left: 26px;
-            }
-      >
         <div
-          className="ms-ChoiceField-wrapper"
+          class=
+              ms-ChoiceField
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-items: center;
+                border: none;
+                box-sizing: border-box;
+                color: #323130;
+                display: flex;
+                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;
+                margin-top: 8px;
+                min-height: 26px;
+                position: relative;
+              }
+              & .ms-ChoiceFieldLabel {
+                display: inline-block;
+                padding-left: 26px;
+              }
         >
-          <input
-            checked={false}
-            className=
-                ms-ChoiceField-input
-                {
-                  height: 100%;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  opacity: 0;
-                  position: absolute;
-                  right: 0px;
-                  top: 0px;
-                  width: 100%;
-                }
-            id="ChoiceGroup0-2"
-            name="ChoiceGroup0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={true}
-            type="radio"
-          />
-          <label
-            className=
-                ms-ChoiceField-field
-                {
-                  cursor: pointer;
-                  display: inline-block;
-                  margin-top: 0px;
-                  min-height: 20px;
-                  position: relative;
-                  user-select: none;
-                  vertical-align: top;
-                }
-                &:hover .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:hover:before {
-                  border-color: #323130;
-                }
-                &:hover:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:focus .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:focus:before {
-                  border-color: #323130;
-                }
-                &:focus:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:before {
-                  background-color: #ffffff;
-                  border-color: #323130;
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  content: "";
-                  display: inline-block;
-                  font-weight: normal;
-                  height: 20px;
-                  left: 0px;
-                  position: absolute;
-                  top: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-color;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 20px;
-                }
-                &:after {
-                  border-radius: 50%;
-                  box-sizing: border-box;
-                  content: "";
-                  height: 0px;
-                  left: 10px;
-                  position: absolute;
-                  right: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-width;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 0px;
-                }
-            htmlFor="ChoiceGroup0-2"
+          <div
+            class="ms-ChoiceField-wrapper"
           >
-            <span
-              className="ms-ChoiceFieldLabel"
-              id="ChoiceGroupLabel1-2"
+            <input
+              class=
+                  ms-ChoiceField-input
+                  {
+                    height: 100%;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    width: 100%;
+                  }
+              id="ChoiceGroup0-2"
+              name="ChoiceGroup0"
+              required=""
+              type="radio"
+            />
+            <label
+              class=
+                  ms-ChoiceField-field
+                  {
+                    cursor: pointer;
+                    display: inline-block;
+                    margin-top: 0px;
+                    min-height: 20px;
+                    position: relative;
+                    user-select: none;
+                    vertical-align: top;
+                  }
+                  &:hover .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:hover:before {
+                    border-color: #323130;
+                  }
+                  &:hover:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:focus .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:focus:before {
+                    border-color: #323130;
+                  }
+                  &:focus:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:before {
+                    background-color: #ffffff;
+                    border-color: #323130;
+                    border-radius: 50%;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    content: "";
+                    display: inline-block;
+                    font-weight: normal;
+                    height: 20px;
+                    left: 0px;
+                    position: absolute;
+                    top: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  &:after {
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    content: "";
+                    height: 0px;
+                    left: 10px;
+                    position: absolute;
+                    right: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-width;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 0px;
+                  }
+              for="ChoiceGroup0-2"
             >
-              2
-            </span>
-          </label>
+              <span
+                class="ms-ChoiceFieldLabel"
+                id="ChoiceGroupLabel1-2"
+              >
+                2
+              </span>
+            </label>
+          </div>
         </div>
-      </div>
-      <div
-        className=
-            ms-ChoiceField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              border: none;
-              box-sizing: border-box;
-              color: #323130;
-              display: flex;
-              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;
-              margin-top: 8px;
-              min-height: 26px;
-              position: relative;
-            }
-            & .ms-ChoiceFieldLabel {
-              display: inline-block;
-              padding-left: 26px;
-            }
-      >
         <div
-          className="ms-ChoiceField-wrapper"
+          class=
+              ms-ChoiceField
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-items: center;
+                border: none;
+                box-sizing: border-box;
+                color: #323130;
+                display: flex;
+                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;
+                margin-top: 8px;
+                min-height: 26px;
+                position: relative;
+              }
+              & .ms-ChoiceFieldLabel {
+                display: inline-block;
+                padding-left: 26px;
+              }
         >
-          <input
-            checked={false}
-            className=
-                ms-ChoiceField-input
-                {
-                  height: 100%;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  opacity: 0;
-                  position: absolute;
-                  right: 0px;
-                  top: 0px;
-                  width: 100%;
-                }
-            id="ChoiceGroup0-3"
-            name="ChoiceGroup0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={true}
-            type="radio"
-          />
-          <label
-            className=
-                ms-ChoiceField-field
-                {
-                  cursor: pointer;
-                  display: inline-block;
-                  margin-top: 0px;
-                  min-height: 20px;
-                  position: relative;
-                  user-select: none;
-                  vertical-align: top;
-                }
-                &:hover .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:hover:before {
-                  border-color: #323130;
-                }
-                &:hover:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:focus .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:focus:before {
-                  border-color: #323130;
-                }
-                &:focus:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:before {
-                  background-color: #ffffff;
-                  border-color: #323130;
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  content: "";
-                  display: inline-block;
-                  font-weight: normal;
-                  height: 20px;
-                  left: 0px;
-                  position: absolute;
-                  top: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-color;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 20px;
-                }
-                &:after {
-                  border-radius: 50%;
-                  box-sizing: border-box;
-                  content: "";
-                  height: 0px;
-                  left: 10px;
-                  position: absolute;
-                  right: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-width;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 0px;
-                }
-            htmlFor="ChoiceGroup0-3"
+          <div
+            class="ms-ChoiceField-wrapper"
           >
-            <span
-              className="ms-ChoiceFieldLabel"
-              id="ChoiceGroupLabel1-3"
+            <input
+              class=
+                  ms-ChoiceField-input
+                  {
+                    height: 100%;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    width: 100%;
+                  }
+              id="ChoiceGroup0-3"
+              name="ChoiceGroup0"
+              required=""
+              type="radio"
+            />
+            <label
+              class=
+                  ms-ChoiceField-field
+                  {
+                    cursor: pointer;
+                    display: inline-block;
+                    margin-top: 0px;
+                    min-height: 20px;
+                    position: relative;
+                    user-select: none;
+                    vertical-align: top;
+                  }
+                  &:hover .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:hover:before {
+                    border-color: #323130;
+                  }
+                  &:hover:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:focus .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:focus:before {
+                    border-color: #323130;
+                  }
+                  &:focus:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:before {
+                    background-color: #ffffff;
+                    border-color: #323130;
+                    border-radius: 50%;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    content: "";
+                    display: inline-block;
+                    font-weight: normal;
+                    height: 20px;
+                    left: 0px;
+                    position: absolute;
+                    top: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  &:after {
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    content: "";
+                    height: 0px;
+                    left: 10px;
+                    position: absolute;
+                    right: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-width;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 0px;
+                  }
+              for="ChoiceGroup0-3"
             >
-              3
-            </span>
-          </label>
+              <span
+                class="ms-ChoiceFieldLabel"
+                id="ChoiceGroupLabel1-3"
+              >
+                3
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -434,465 +445,476 @@ exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
 `;
 
 exports[`ChoiceGroup renders ChoiceGroup with label correctly 1`] = `
-<div
-  className=
-      testClassName
-      ms-ChoiceFieldGroup
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        display: block;
-        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>
   <div
-    aria-labelledby="ChoiceGroupLabel1"
-    onFocus={[Function]}
-    role="radiogroup"
+    class=
+        testClassName
+        ms-ChoiceFieldGroup
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: block;
+          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;
+        }
   >
-    <label
-      className=
-          ms-Label
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            box-shadow: none;
-            box-sizing: border-box;
-            color: #323130;
-            display: block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 600;
-            margin-bottom: 0px;
-            margin-left: 0px;
-            margin-right: 0px;
-            margin-top: 0px;
-            overflow-wrap: break-word;
-            padding-bottom: 5px;
-            padding-left: 0;
-            padding-right: 0;
-            padding-top: 5px;
-            word-wrap: break-word;
-          }
-          &::after {
-            color: #a4262c;
-            content: ' *';
-            padding-right: 12px;
-          }
-      id="ChoiceGroupLabel1"
-    >
-      test label
-    </label>
     <div
-      className="ms-ChoiceFieldGroup-flexContainer"
+      aria-labelledby="ChoiceGroupLabel1"
+      role="radiogroup"
     >
-      <div
-        className=
-            ms-ChoiceField
+      <label
+        class=
+            ms-Label
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
-              align-items: center;
-              border: none;
+              box-shadow: none;
               box-sizing: border-box;
               color: #323130;
-              display: flex;
+              display: block;
               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;
-              margin-top: 8px;
-              min-height: 26px;
-              position: relative;
+              font-weight: 600;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
             }
-            & .ms-ChoiceFieldLabel {
-              display: inline-block;
-              padding-left: 26px;
+            &::after {
+              color: #a4262c;
+              content: ' *';
+              padding-right: 12px;
             }
+        id="ChoiceGroupLabel1"
+      >
+        test label
+      </label>
+      <div
+        class="ms-ChoiceFieldGroup-flexContainer"
       >
         <div
-          className="ms-ChoiceField-wrapper"
+          class=
+              ms-ChoiceField
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-items: center;
+                border: none;
+                box-sizing: border-box;
+                color: #323130;
+                display: flex;
+                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;
+                margin-top: 8px;
+                min-height: 26px;
+                position: relative;
+              }
+              & .ms-ChoiceFieldLabel {
+                display: inline-block;
+                padding-left: 26px;
+              }
         >
-          <input
-            autoFocus={true}
-            checked={false}
-            className=
-                ms-ChoiceField-input
-                {
-                  height: 100%;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  opacity: 0;
-                  position: absolute;
-                  right: 0px;
-                  top: 0px;
-                  width: 100%;
-                }
-            data-automation-id="auto1"
-            id="ChoiceGroup0-1"
-            name="ChoiceGroup0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={true}
-            type="radio"
-          />
-          <label
-            className=
-                ms-ChoiceField-field
-                {
-                  cursor: pointer;
-                  display: inline-block;
-                  margin-top: 0px;
-                  min-height: 20px;
+          <div
+            class=
+                ms-ChoiceField-wrapper
+                is-inFocus
+                .ms-Fabric--isFocusVisible & {
+                  outline: transparent;
                   position: relative;
-                  user-select: none;
-                  vertical-align: top;
-                }
-                &:hover .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:hover:before {
-                  border-color: #323130;
                 }
-                &:hover:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:focus .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:focus:before {
-                  border-color: #323130;
-                }
-                &:focus:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
+                .ms-Fabric--isFocusVisible &::-moz-focus-inner {
+                  border: 0px;
                 }
-                &:before {
-                  background-color: #ffffff;
-                  border-color: #323130;
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
+                .ms-Fabric--isFocusVisible &:after {
+                  border: 1px solid #605e5c;
+                  bottom: -2px;
                   content: "";
-                  display: inline-block;
-                  font-weight: normal;
-                  height: 20px;
-                  left: 0px;
+                  left: -2px;
+                  pointer-events: none;
                   position: absolute;
-                  top: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-color;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 20px;
+                  right: -2px;
+                  top: -2px;
                 }
-                &:after {
-                  border-radius: 50%;
-                  box-sizing: border-box;
-                  content: "";
-                  height: 0px;
-                  left: 10px;
-                  position: absolute;
-                  right: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-width;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 0px;
+                @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:after {
+                  border-color: WindowText;
+                  border-width: 2px;
                 }
-            htmlFor="ChoiceGroup0-1"
           >
-            <span
-              className="ms-ChoiceFieldLabel"
-              id="ChoiceGroupLabel1-1"
+            <input
+              class=
+                  ms-ChoiceField-input
+                  {
+                    height: 100%;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    width: 100%;
+                  }
+              data-automation-id="auto1"
+              id="ChoiceGroup0-1"
+              name="ChoiceGroup0"
+              required=""
+              type="radio"
+            />
+            <label
+              class=
+                  ms-ChoiceField-field
+                  {
+                    cursor: pointer;
+                    display: inline-block;
+                    margin-top: 0px;
+                    min-height: 20px;
+                    position: relative;
+                    user-select: none;
+                    vertical-align: top;
+                  }
+                  &:hover .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:hover:before {
+                    border-color: #323130;
+                  }
+                  &:hover:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:focus .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:focus:before {
+                    border-color: #323130;
+                  }
+                  &:focus:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:before {
+                    background-color: #ffffff;
+                    border-color: #323130;
+                    border-radius: 50%;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    content: "";
+                    display: inline-block;
+                    font-weight: normal;
+                    height: 20px;
+                    left: 0px;
+                    position: absolute;
+                    top: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  &:after {
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    content: "";
+                    height: 0px;
+                    left: 10px;
+                    position: absolute;
+                    right: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-width;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 0px;
+                  }
+              for="ChoiceGroup0-1"
             >
-              1
-            </span>
-          </label>
+              <span
+                class="ms-ChoiceFieldLabel"
+                id="ChoiceGroupLabel1-1"
+              >
+                1
+              </span>
+            </label>
+          </div>
         </div>
-      </div>
-      <div
-        className=
-            ms-ChoiceField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              border: none;
-              box-sizing: border-box;
-              color: #323130;
-              display: flex;
-              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;
-              margin-top: 8px;
-              min-height: 26px;
-              position: relative;
-            }
-            & .ms-ChoiceFieldLabel {
-              display: inline-block;
-              padding-left: 26px;
-            }
-      >
         <div
-          className="ms-ChoiceField-wrapper"
+          class=
+              ms-ChoiceField
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-items: center;
+                border: none;
+                box-sizing: border-box;
+                color: #323130;
+                display: flex;
+                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;
+                margin-top: 8px;
+                min-height: 26px;
+                position: relative;
+              }
+              & .ms-ChoiceFieldLabel {
+                display: inline-block;
+                padding-left: 26px;
+              }
         >
-          <input
-            checked={false}
-            className=
-                ms-ChoiceField-input
-                {
-                  height: 100%;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  opacity: 0;
-                  position: absolute;
-                  right: 0px;
-                  top: 0px;
-                  width: 100%;
-                }
-            id="ChoiceGroup0-2"
-            name="ChoiceGroup0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={true}
-            type="radio"
-          />
-          <label
-            className=
-                ms-ChoiceField-field
-                {
-                  cursor: pointer;
-                  display: inline-block;
-                  margin-top: 0px;
-                  min-height: 20px;
-                  position: relative;
-                  user-select: none;
-                  vertical-align: top;
-                }
-                &:hover .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:hover:before {
-                  border-color: #323130;
-                }
-                &:hover:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:focus .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:focus:before {
-                  border-color: #323130;
-                }
-                &:focus:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:before {
-                  background-color: #ffffff;
-                  border-color: #323130;
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  content: "";
-                  display: inline-block;
-                  font-weight: normal;
-                  height: 20px;
-                  left: 0px;
-                  position: absolute;
-                  top: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-color;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 20px;
-                }
-                &:after {
-                  border-radius: 50%;
-                  box-sizing: border-box;
-                  content: "";
-                  height: 0px;
-                  left: 10px;
-                  position: absolute;
-                  right: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-width;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 0px;
-                }
-            htmlFor="ChoiceGroup0-2"
+          <div
+            class="ms-ChoiceField-wrapper"
           >
-            <span
-              className="ms-ChoiceFieldLabel"
-              id="ChoiceGroupLabel1-2"
+            <input
+              class=
+                  ms-ChoiceField-input
+                  {
+                    height: 100%;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    width: 100%;
+                  }
+              id="ChoiceGroup0-2"
+              name="ChoiceGroup0"
+              required=""
+              type="radio"
+            />
+            <label
+              class=
+                  ms-ChoiceField-field
+                  {
+                    cursor: pointer;
+                    display: inline-block;
+                    margin-top: 0px;
+                    min-height: 20px;
+                    position: relative;
+                    user-select: none;
+                    vertical-align: top;
+                  }
+                  &:hover .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:hover:before {
+                    border-color: #323130;
+                  }
+                  &:hover:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:focus .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:focus:before {
+                    border-color: #323130;
+                  }
+                  &:focus:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:before {
+                    background-color: #ffffff;
+                    border-color: #323130;
+                    border-radius: 50%;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    content: "";
+                    display: inline-block;
+                    font-weight: normal;
+                    height: 20px;
+                    left: 0px;
+                    position: absolute;
+                    top: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  &:after {
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    content: "";
+                    height: 0px;
+                    left: 10px;
+                    position: absolute;
+                    right: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-width;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 0px;
+                  }
+              for="ChoiceGroup0-2"
             >
-              2
-            </span>
-          </label>
+              <span
+                class="ms-ChoiceFieldLabel"
+                id="ChoiceGroupLabel1-2"
+              >
+                2
+              </span>
+            </label>
+          </div>
         </div>
-      </div>
-      <div
-        className=
-            ms-ChoiceField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              align-items: center;
-              border: none;
-              box-sizing: border-box;
-              color: #323130;
-              display: flex;
-              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;
-              margin-top: 8px;
-              min-height: 26px;
-              position: relative;
-            }
-            & .ms-ChoiceFieldLabel {
-              display: inline-block;
-              padding-left: 26px;
-            }
-      >
         <div
-          className="ms-ChoiceField-wrapper"
+          class=
+              ms-ChoiceField
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-items: center;
+                border: none;
+                box-sizing: border-box;
+                color: #323130;
+                display: flex;
+                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;
+                margin-top: 8px;
+                min-height: 26px;
+                position: relative;
+              }
+              & .ms-ChoiceFieldLabel {
+                display: inline-block;
+                padding-left: 26px;
+              }
         >
-          <input
-            checked={false}
-            className=
-                ms-ChoiceField-input
-                {
-                  height: 100%;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  opacity: 0;
-                  position: absolute;
-                  right: 0px;
-                  top: 0px;
-                  width: 100%;
-                }
-            id="ChoiceGroup0-3"
-            name="ChoiceGroup0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={true}
-            type="radio"
-          />
-          <label
-            className=
-                ms-ChoiceField-field
-                {
-                  cursor: pointer;
-                  display: inline-block;
-                  margin-top: 0px;
-                  min-height: 20px;
-                  position: relative;
-                  user-select: none;
-                  vertical-align: top;
-                }
-                &:hover .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:hover:before {
-                  border-color: #323130;
-                }
-                &:hover:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:focus .ms-ChoiceFieldLabel {
-                  color: #201f1e;
-                }
-                &:focus:before {
-                  border-color: #323130;
-                }
-                &:focus:after {
-                  background-color: #605e5c;
-                  content: "";
-                  height: 10px;
-                  left: 5px;
-                  top: 5px;
-                  transition-property: background-color;
-                  width: 10px;
-                }
-                &:before {
-                  background-color: #ffffff;
-                  border-color: #323130;
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  content: "";
-                  display: inline-block;
-                  font-weight: normal;
-                  height: 20px;
-                  left: 0px;
-                  position: absolute;
-                  top: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-color;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 20px;
-                }
-                &:after {
-                  border-radius: 50%;
-                  box-sizing: border-box;
-                  content: "";
-                  height: 0px;
-                  left: 10px;
-                  position: absolute;
-                  right: 0px;
-                  transition-duration: 200ms;
-                  transition-property: border-width;
-                  transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-                  width: 0px;
-                }
-            htmlFor="ChoiceGroup0-3"
+          <div
+            class="ms-ChoiceField-wrapper"
           >
-            <span
-              className="ms-ChoiceFieldLabel"
-              id="ChoiceGroupLabel1-3"
+            <input
+              class=
+                  ms-ChoiceField-input
+                  {
+                    height: 100%;
+                    margin-bottom: 0px;
+                    margin-left: 0px;
+                    margin-right: 0px;
+                    margin-top: 0px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    width: 100%;
+                  }
+              id="ChoiceGroup0-3"
+              name="ChoiceGroup0"
+              required=""
+              type="radio"
+            />
+            <label
+              class=
+                  ms-ChoiceField-field
+                  {
+                    cursor: pointer;
+                    display: inline-block;
+                    margin-top: 0px;
+                    min-height: 20px;
+                    position: relative;
+                    user-select: none;
+                    vertical-align: top;
+                  }
+                  &:hover .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:hover:before {
+                    border-color: #323130;
+                  }
+                  &:hover:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:focus .ms-ChoiceFieldLabel {
+                    color: #201f1e;
+                  }
+                  &:focus:before {
+                    border-color: #323130;
+                  }
+                  &:focus:after {
+                    background-color: #605e5c;
+                    content: "";
+                    height: 10px;
+                    left: 5px;
+                    top: 5px;
+                    transition-property: background-color;
+                    width: 10px;
+                  }
+                  &:before {
+                    background-color: #ffffff;
+                    border-color: #323130;
+                    border-radius: 50%;
+                    border-style: solid;
+                    border-width: 1px;
+                    box-sizing: border-box;
+                    content: "";
+                    display: inline-block;
+                    font-weight: normal;
+                    height: 20px;
+                    left: 0px;
+                    position: absolute;
+                    top: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-color;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 20px;
+                  }
+                  &:after {
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    content: "";
+                    height: 0px;
+                    left: 10px;
+                    position: absolute;
+                    right: 0px;
+                    transition-duration: 200ms;
+                    transition-property: border-width;
+                    transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+                    width: 0px;
+                  }
+              for="ChoiceGroup0-3"
             >
-              3
-            </span>
-          </label>
+              <span
+                class="ms-ChoiceFieldLabel"
+                id="ChoiceGroupLabel1-3"
+              >
+                3
+              </span>
+            </label>
+          </div>
         </div>
       </div>
     </div>

From 4f6ff43c528651bc0d40e068a038da24f14b43ed Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Tue, 29 Mar 2022 11:37:13 -0700
Subject: [PATCH 2/2] remove usage of queryselector

---
 .../components/ChoiceGroup/ChoiceGroup.test.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx b/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
index 40f6279aa5b0d..f665643408139 100644
--- a/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
+++ b/packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
@@ -37,10 +37,10 @@ describe('ChoiceGroup', () => {
   });
 
   it('does not use className prop from parent on label', () => {
-    const { container } = render(
+    const { getByRole } = render(
       <ChoiceGroup className="testClassName" label="test label" options={TEST_OPTIONS} required />,
     );
-    const label = container.querySelector('label');
+    const label = getByRole('radiogroup').firstElementChild;
     expect(label).toBeTruthy();
     expect(label!.textContent).toBe('test label');
     expect(label!.className).not.toContain('testClassName');
@@ -158,14 +158,14 @@ describe('ChoiceGroup', () => {
 
   it('can set role attribute to empty string', () => {
     const { container } = render(<ChoiceGroup options={TEST_OPTIONS} role="" />);
-    const role = container.querySelector('.ms-ChoiceFieldGroup')!.getAttribute('role');
+    const role = container.firstElementChild!.getAttribute('role');
     expect(role).toEqual('');
   });
 
   it('can set role attribute on the containing element', () => {
-    const { container } = render(<ChoiceGroup options={TEST_OPTIONS} role="Test" />);
-    const role = container.querySelector('.ms-ChoiceFieldGroup')!.getAttribute('role');
-    expect(role).toEqual('Test');
+    const { container } = render(<ChoiceGroup options={TEST_OPTIONS} role="radiogroup" />);
+    const role = container.firstElementChild!.getAttribute('role');
+    expect(role).toEqual('radiogroup');
   });
 
   it('can assign a custom aria label', () => {
@@ -224,7 +224,7 @@ describe('ChoiceGroup', () => {
 
   it('can render element id', () => {
     const { container } = render(<ChoiceGroup defaultSelectedKey="1" id="foo" options={TEST_OPTIONS} />);
-    const root = container.querySelector('.ms-ChoiceFieldGroup');
+    const root = container.firstElementChild;
     expect(root!.getAttribute('id')).toBe('foo');
   });