move polyfill into base classes

Author: marchbox

packages/web-components/docs/web-components.api.md

@@ -742,10 +742,6 @@ export class BaseMenuList extends FASTElement {
     elementInternals: ElementInternals;
     focus(): void;
     handleChange(source: any, propertyName: string): void;
-    // @internal
-    handleFocusOut: (e: FocusEvent) => void;
-    // @internal (undocumented)
-    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
     protected isMenuItemElement: (el: Element) => el is HTMLElement;
     // @internal (undocumented)
     readonly isNestedMenu: () => boolean;
@@ -754,7 +750,7 @@ export class BaseMenuList extends FASTElement {
     // (undocumented)
     protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
     // (undocumented)
-    protected menuItems: Element[] | undefined;
+    protected menuItems: HTMLElement[] | undefined;
     // (undocumented)
     protected setItems(): void;
 }
@@ -811,8 +807,6 @@ export class BaseRadioGroup extends FASTElement {
     focus(): void;
     // @internal
     focusinHandler(e: FocusEvent): boolean | void;
-    // @internal
-    focusoutHandler(e: FocusEvent): boolean | void;
     static formAssociated: boolean;
     // (undocumented)
     formResetCallback(): void;
@@ -895,8 +889,6 @@ export class BaseTablist extends FASTElement {
     // @internal (undocumented)
     protected activeidChanged(oldValue: string, newValue: string): void;
     activetab: Tab;
-    // @internal (undocumented)
-    connectedCallback(): void;
     disabled: boolean;
     // @internal (undocumented)
     protected disabledChanged(prev: boolean, next: boolean): void;
@@ -1092,8 +1084,6 @@ export class BaseTree extends FASTElement {
     childTreeItemsChanged(): void;
     // @internal
     clickHandler(e: Event): boolean | void;
-    // @internal (undocumented)
-    connectedCallback(): void;
     currentSelected: HTMLElement | null;
     // @internal (undocumented)
     defaultSlot: HTMLSlotElement;
@@ -3372,7 +3362,7 @@ export const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 // @public
 export class MenuList extends BaseMenuList {
-    // @internal (undocumented)
+    // (undocumented)
     connectedCallback(): void;
 }
 
@@ -4010,6 +4000,8 @@ export const TabDefinition: FASTElementDefinition<typeof Tab>;
 export class Tablist extends BaseTablist {
     activeidChanged(oldValue: string, newValue: string): void;
     appearance?: TablistAppearance;
+    // @internal (undocumented)
+    connectedCallback(): void;
     size?: TablistSize;
     tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
 }
@@ -4407,6 +4399,8 @@ export class Tree extends BaseTree {
     protected appearanceChanged(): void;
     // @internal
     childTreeItemsChanged(): void;
+    // @internal (undocumented)
+    connectedCallback(): void;
     size: TreeItemSize;
     // (undocumented)
     protected sizeChanged(): void;

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

@@ -1,9 +1,7 @@
-import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
 import { findLastIndex } from '@microsoft/fast-web-utilities';
 import { Radio } from '../radio/radio.js';
 import { isRadio } from '../radio/radio.options.js';
-import { getDirection } from '../utils/direction.js';
-import { getRootActiveElement } from '../utils/root-active-element.js';
 import { RadioGroupOrientation } from './radio-group.options.js';
 
 /**
@@ -64,7 +62,6 @@ export class BaseRadioGroup extends FASTElement {
       this.radios?.forEach(radio => {
         radio.disabled = !!radio.disabledAttribute || !!this.disabled;
       });
-      this.restrictFocus();
     }
   }
 
@@ -170,6 +167,13 @@ export class BaseRadioGroup extends FASTElement {
 
       radio.name = this.name ?? radio.name;
       radio.disabled = !!this.disabled || !!radio.disabledAttribute;
+
+      if (radio.checked && !radio.disabled) {
+        // Update.enqueu() would be too soon for this operation.
+        requestAnimationFrame(() => {
+          radio.toggleAttribute('focusgroupstart', true);
+        });
+      }
     });
 
     if (!this.dirtyState && this.initialValue) {
@@ -196,10 +200,6 @@ export class BaseRadioGroup extends FASTElement {
     if (radioIds) {
       this.setAttribute('aria-owns', radioIds);
     }
-
-    Updates.enqueue(() => {
-      this.restrictFocus();
-    });
   }
 
   /**
@@ -422,6 +422,13 @@ export class BaseRadioGroup extends FASTElement {
     this.enabledRadios[Math.max(0, this.checkedIndex)]?.focus();
   }
 
+  formResetCallback(): void {
+    this.dirtyState = false;
+    this.checkedIndex = -1;
+    this.setFormValue(this.value);
+    this.setValidity();
+  }
+
   /**
    * Enables tabbing through the radio group when the group receives focus.
    *
@@ -430,93 +437,35 @@ export class BaseRadioGroup extends FASTElement {
    */
   public focusinHandler(e: FocusEvent): boolean | void {
     if (!this.disabled) {
-      this.enabledRadios.forEach(radio => {
-        radio.tabIndex = 0;
+      // Uncheck the checked disabled radio, if any.
+      this.radios?.forEach(radio => {
+        if (radio.disabled && radio.checked) {
+          radio.checked = false;
+        }
       });
-    }
-
-    return true;
-  }
 
-  /**
-   * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
-   *
-   * @param e - the focusout event
-   * @internal
-   */
-  public focusoutHandler(e: FocusEvent): boolean | void {
-    if (this.radios?.includes(e.relatedTarget as Radio) && this.radios?.some(x => x.checked)) {
-      this.restrictFocus();
+      const index = this.enabledRadios.indexOf(e.target as Radio);
+      if (index > -1) {
+        this.checkRadio(index, true);
+      }
     }
 
     return true;
   }
 
-  formResetCallback(): void {
-    this.dirtyState = false;
-    this.checkedIndex = -1;
-    this.setFormValue(this.value);
-    this.setValidity();
-  }
-
-  private getEnabledIndexInBounds(index: number, upperBound = this.enabledRadios.length): number {
-    if (upperBound === 0) {
-      return -1;
-    }
-
-    return (index + upperBound) % upperBound;
-  }
-
   /**
    * Handles keydown events for the radio group.
    *
    * @param e - the keyboard event
    * @internal
    */
   public keydownHandler(e: KeyboardEvent): boolean | void {
-    const isRtl = getDirection(this) === 'rtl';
-    const checkedIndex = this.enabledRadios.findIndex(x => x === getRootActiveElement(this)) ?? this.checkedIndex;
-    let increment = 0;
-
     switch (e.key) {
-      case 'ArrowLeft': {
-        increment = isRtl ? 1 : -1;
-        break;
-      }
-
-      case 'ArrowUp': {
-        increment = -1;
-        break;
-      }
-
-      case 'ArrowRight': {
-        increment = isRtl ? -1 : 1;
-        break;
-      }
-
-      case 'ArrowDown': {
-        increment = 1;
-        break;
-      }
-
-      case 'Tab': {
-        this.restrictFocus();
-        break;
-      }
-
-      case ' ': {
+      case ' ':
         this.checkRadio();
         break;
-      }
     }
-
-    if (!increment) {
-      return true;
-    }
-
-    const nextIndex = checkedIndex + increment;
-    this.checkRadio(this.getEnabledIndexInBounds(nextIndex), true);
-    this.enabledRadios[this.checkedIndex]?.focus();
+    return true;
   }
 
   /**
@@ -540,26 +489,6 @@ export class BaseRadioGroup extends FASTElement {
     return this.elementInternals.reportValidity();
   }
 
-  /**
-   * Resets the `tabIndex` for all child radios when the radio group loses focus.
-   *
-   * @internal
-   */
-  private restrictFocus() {
-    let activeIndex = Math.max(this.checkedIndex, 0);
-    const focusedRadioIndex = this.enabledRadios.indexOf(getRootActiveElement(this) as Radio);
-
-    if (focusedRadioIndex !== -1) {
-      activeIndex = focusedRadioIndex;
-    }
-
-    activeIndex = this.getEnabledIndexInBounds(activeIndex);
-
-    this.enabledRadios.forEach((item, index) => {
-      item.tabIndex = index === activeIndex ? 0 : -1;
-    });
-  }
-
   /**
    * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
    *

packages/web-components/src/tablist/tablist.base.ts

@@ -1,6 +1,5 @@
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { polyfill as focusgroupPolyfill } from '@microsoft/focusgroup-polyfill';
 import type { Tab } from '../tab/tab.js';
 import { isTab } from '../tab/tab.options.js';
 import { swapStates, toggleState } from '../utils/element-internals.js';
@@ -101,15 +100,6 @@ export class BaseTablist extends FASTElement {
     this.$emit('change', this.activetab);
   };
 
-  /** @internal */
-  public connectedCallback(): void {
-    super.connectedCallback();
-
-    Updates.enqueue(() => {
-      focusgroupPolyfill(this);
-    });
-  }
-
   /**
    * Function that is invoked whenever the selected tab or the tab collection changes.
    *

packages/web-components/src/tablist/tablist.ts

@@ -1,4 +1,5 @@
-import { attr } from '@microsoft/fast-element';
+import { attr, Updates } from '@microsoft/fast-element';
+import { polyfill as focusgroupPolyfill } from '@microsoft/focusgroup-polyfill';
 import type { Tab } from '../tab/tab.js';
 import { BaseTablist } from './tablist.base.js';
 import { TablistAppearance, TablistOrientation, TablistSize } from './tablist.options.js';
@@ -49,6 +50,15 @@ export class Tablist extends BaseTablist {
   @attr
   public size?: TablistSize;
 
+  /** @internal */
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    Updates.enqueue(() => {
+      focusgroupPolyfill(this);
+    });
+  }
+
   /**
    * calculateAnimationProperties
    *

packages/web-components/src/tree/tree.base.ts

@@ -1,6 +1,5 @@
-import { FASTElement, observable, Updates } from '@microsoft/fast-element';
-import { isHTMLElement, keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
-import { polyfill as focusgroupPolyfill } from '@microsoft/focusgroup-polyfill';
+import { FASTElement, observable } from '@microsoft/fast-element';
+import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import type { BaseTreeItem } from '../tree-item/tree-item.base.js';
 import { isTreeItem } from '../tree-item/tree-item.options.js';
 
@@ -45,15 +44,6 @@ export class BaseTree extends FASTElement {
     this.elementInternals.role = 'tree';
   }
 
-  /** @internal */
-  connectedCallback() {
-    super.connectedCallback();
-
-    Updates.enqueue(() => {
-      focusgroupPolyfill(this);
-    });
-  }
-
   /** @internal */
   @observable
   childTreeItems!: BaseTreeItem[];

packages/web-components/src/tree/tree.ts

@@ -1,4 +1,5 @@
-import { attr } from '@microsoft/fast-element';
+import { attr, Updates } from '@microsoft/fast-element';
+import { polyfill as focusgroupPolyfill } from '@microsoft/focusgroup-polyfill';
 import type { TreeItem } from '../tree-item/tree-item.js';
 import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options.js';
 import { BaseTree } from './tree.base.js';
@@ -47,6 +48,15 @@ export class Tree extends BaseTree {
     this.updateSizeAndAppearance();
   }
 
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+
+    Updates.enqueue(() => {
+      focusgroupPolyfill(this);
+    });
+  }
+
   /**
    * 1. Update the child items' size based on the tree's size
    * 2. Update the child items' appearance based on the tree's appearance