fix radio group tests

Author: marchbox

packages/web-components/src/radio-group/radio-group.spec.ts

@@ -492,14 +492,16 @@ test.describe('RadioGroup', () => {
     const { element } = fastPage;
     const radios = element.locator('fluent-radio');
 
-    await fastPage.setTemplate({
-      innerHTML: /* html */ `
+    await fastPage.setTemplate(/* html */ `
+      <button data-testid="before">before</button>
+      <fluent-radio-group>
         <fluent-radio></fluent-radio>
         <fluent-radio></fluent-radio>
         <fluent-radio></fluent-radio>
-      `,
-    });
+      </fluent-radio-group>
+    `);
 
+    await page.getByTestId('before').focus();
     await page.keyboard.press('Tab');
 
     await expect(radios.nth(0)).toBeFocused();

packages/web-components/src/radio-group/radio-group.template.ts

@@ -4,7 +4,7 @@ import type { RadioGroup } from './radio-group.js';
 export function radioGroupTemplate<T extends RadioGroup>(): ElementViewTemplate<T> {
   return html<T>`
     <template
-      focusgroup="radiogroup"
+      focusgroup="radiogroup wrap"
       @disabled="${(x, c) => x.disabledRadioHandler(c.event as CustomEvent)}"
       @change="${(x, c) => x.changeHandler(c.event as Event)}"
       @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"

packages/web-components/src/radio-group/radio-group.ts

@@ -431,9 +431,16 @@ export class RadioGroup extends FASTElement {
    */
   public focusinHandler(e: FocusEvent): boolean | void {
     if (!this.disabled) {
+      // Uncheck the checked disabled radio, if any.
+      this.radios?.forEach(radio => {
+        if (radio.disabled && radio.checked) {
+          radio.checked = false;
+        }
+      });
+
       const index = this.enabledRadios.indexOf(e.target as Radio);
       if (index > -1) {
-        this.checkRadio(index);
+        this.checkRadio(index, true);
       }
     }
 

packages/web-components/test/harness/src/main.ts

@@ -6,6 +6,14 @@ if (!CSS.supports('anchor-name: --foo')) {
   });
 }
 
+if (!('focusgroup' in HTMLElement.prototype)) {
+  import('../../../public/focusgroup-polyfill.js').then(({ polyfill }) => {
+    Object.defineProperty(window, 'FOCUSGROUP_POLYFILL', {
+      value: polyfill,
+    });
+  });
+}
+
 import { webLightTheme } from '@fluentui/tokens';
 import { setTheme } from '../../../src/theme/set-theme.js';
 import '../../../src/index-rollup.js';