[@next] general cleanup, fixes, and organization (#444)

src/dev/pages/card/card.ts

@@ -3,7 +3,6 @@ import '@tylertech/forge/card';
 import '@tylertech/forge/scaffold';
 import '@tylertech/forge/button';
 import '@tylertech/forge/icon-button';
-import '@tylertech/forge/icon-button/forge-icon-button.scss';
 import './card.scss';
 import type { ICardComponent, ISwitchComponent } from '@tylertech/forge';
 

src/dev/pages/chips/chips.ts

@@ -1,7 +1,6 @@
 import '$src/shared';
 import '@tylertech/forge/chips';
 import '@tylertech/forge/icon-button';
-import '@tylertech/forge/icon-button/forge-icon-button.scss';
 import { IChipSetComponent, IconRegistry, ISwitchComponent } from '@tylertech/forge';
 import type { IChipComponent } from '@tylertech/forge';
 import { tylIconAlarm, tylIconBookmark, tylIconDirections, tylIconEvent, tylIconFace, tylIconPlace, tylIconRefresh } from '@tylertech/tyler-icons/standard';

src/lib/button-toggle/button-toggle-group/button-toggle-group-constants.ts

@@ -1,4 +1,6 @@
 import { COMPONENT_NAME_PREFIX, Theme } from '../../constants';
+import { supportsElementInternalsAria } from '../../core';
+import { ARIAAttribute } from '../../core/utils/a11y-utils';
 
 const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}button-toggle-group`;
 
@@ -16,6 +18,8 @@ const observedAttributes = {
   THEME: 'theme'
 };
 
+const observedAriaAttributes: ARIAAttribute[] = supportsElementInternalsAria() ? [] : ['role', 'aria-label'];
+
 const attributes = {
   ...observedAttributes
 };
@@ -36,6 +40,7 @@ const events = {
 export const BUTTON_TOGGLE_GROUP_CONSTANTS = {
   elementName,
   observedAttributes,
+  observedAriaAttributes,
   attributes,
   classes,
   selectors,

src/lib/button-toggle/button-toggle-group/button-toggle-group.ts

@@ -1,20 +1,21 @@
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
-import { IWithFormAssociation, WithFormAssociation } from '../../core/base/base-form-associated-component';
-import { IWithLabelAwareness, WithLabelAwareness } from '../../core/base/base-label-aware-component';
-import { IWithElementInternals, WithElementInternals } from '../../core/base/base-element-internals-component';
-import { IWithFormValidity, WithFormValidity } from '../../core/mixins/form/with-validity';
+import { IWithFormAssociation, WithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { IWithLabelAwareness, WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { IWithElementInternals, WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithFormValidity, WithFormValidity } from '../../core/mixins/form/with-form-validity';
 import { BaseComponent } from '../../core/base/base-component';
 import { ButtonToggleComponent } from '../button-toggle/button-toggle';
 import { ButtonToggleGroupAdapter } from './button-toggle-group-adapter';
 import { ButtonToggleGroupTheme, BUTTON_TOGGLE_GROUP_CONSTANTS, IButtonToggleGroupChangeEventData } from './button-toggle-group-constants';
 import { ButtonToggleGroupFoundation } from './button-toggle-group-foundation';
-import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
+import { getFormState, getFormValue, inputType, observedDefaultAriaAttributes, setDefaultAria } from '../../constants';
 import { FormValue, FormRestoreState, FormRestoreReason } from '../../core/utils/form-utils';
+import { IWithDefaultAria, WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 
 import template from './button-toggle-group.html';
 import styles from './button-toggle-group.scss';
 
-export interface IButtonToggleGroupComponent extends IWithLabelAwareness, IWithFormAssociation, IWithFormValidity, IWithElementInternals {
+export interface IButtonToggleGroupComponent extends IWithLabelAwareness, IWithFormAssociation, IWithFormValidity, IWithElementInternals, IWithDefaultAria {
   value: any;
   outlined: boolean;
   multiple: boolean;
@@ -37,7 +38,7 @@ declare global {
   }
 }
 
-const BaseButtonToggleGroupClass = WithLabelAwareness(WithFormAssociation(WithFormValidity(WithElementInternals(BaseComponent))));
+const BaseButtonToggleGroupClass = WithLabelAwareness(WithFormAssociation(WithFormValidity(WithDefaultAria(WithElementInternals(BaseComponent)))));
 
 /**
  * @tag forge-button-toggle-group
@@ -99,9 +100,14 @@ const BaseButtonToggleGroupClass = WithLabelAwareness(WithFormAssociation(WithFo
 })
 export class ButtonToggleGroupComponent extends BaseButtonToggleGroupClass implements IButtonToggleGroupComponent {
   public static get observedAttributes(): string[] {
-    return Object.values(BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes);
+    return [
+      ...Object.values(BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes),
+      ...Object.values(BUTTON_TOGGLE_GROUP_CONSTANTS.observedAriaAttributes)
+    ];
   }
 
+  public readonly [observedDefaultAriaAttributes] = BUTTON_TOGGLE_GROUP_CONSTANTS.observedAriaAttributes;
+
   private _foundation: ButtonToggleGroupFoundation;
 
   constructor() {

src/lib/button-toggle/button-toggle.test.ts

@@ -23,6 +23,21 @@ describe('Button Toggle', () => {
     expect(harness.buttonToggles.every(toggle => toggle.getAttribute('aria-pressed') === 'false')).to.be.true;
   });
 
+  ['primary', 'secondary', 'danger', 'success', 'warning', 'info'].forEach((theme: ButtonToggleGroupTheme) => {
+    it(`should be accessible with selected values for theme ${theme}`, async () => {
+      const harness = await createFixture({ theme, value: 'two' });
+
+      // Primary is the default
+      if (theme !== 'primary') {
+        expect(harness.element.getAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.THEME)).to.equal(theme);
+      }
+
+      expect(harness.buttonToggles[1].selected).to.be.true;
+      expect(harness.buttonToggles[1].getAttribute('aria-pressed')).to.equal('true');
+      await expect(harness.element).to.be.accessible();
+    });
+  });
+
   it('should not have value by default', async () => {
     const harness = await createFixture();
 

src/lib/button-toggle/button-toggle/button-toggle-constants.ts

@@ -1,4 +1,6 @@
 import { COMPONENT_NAME_PREFIX } from '../../constants';
+import { supportsElementInternalsAria } from '../../core';
+import { ARIAAttribute } from '../../core/utils/a11y-utils';
 
 const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}button-toggle`;
 
@@ -10,6 +12,8 @@ const observedAttributes = {
   TABINDEX: 'tabindex' // Need this to support the focusable mixin
 };
 
+const observedAriaAttributes: ARIAAttribute[] = supportsElementInternalsAria() ? [] : ['role', 'aria-pressed', 'aria-disabled'];
+
 const attributes = {
   ...observedAttributes
 };
@@ -21,6 +25,7 @@ const events = {
 export const BUTTON_TOGGLE_CONSTANTS = {
   elementName,
   observedAttributes,
+  observedAriaAttributes,
   attributes,
   events
 };

src/lib/button-toggle/button-toggle/button-toggle.ts

@@ -1,18 +1,19 @@
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
-import { ExperimentalFocusOptions } from '../../constants';
-import { IWithFocusable, WithFocusable } from '../../core/base/base-focusable-component';
-import { IWithElementInternals, WithElementInternals } from '../../core/base/base-element-internals-component';
+import { ExperimentalFocusOptions, observedDefaultAriaAttributes } from '../../constants';
+import { IWithFocusable, WithFocusable } from '../../core/mixins/focus/with-focusable';
+import { IWithElementInternals, WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 import { StateLayerComponent } from '../../state-layer';
 import { BaseComponent } from '../../core/base/base-component';
 import { ButtonToggleAdapter } from './button-toggle-adapter';
 import { BUTTON_TOGGLE_CONSTANTS, IButtonToggleSelectEventData } from './button-toggle-constants';
 import { ButtonToggleFoundation } from './button-toggle-foundation';
+import { IWithDefaultAria, WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 
 import template from './button-toggle.html';
 import styles from './button-toggle.scss';
 
-export interface IButtonToggleComponent<T = unknown> extends IWithElementInternals, IWithFocusable {
+export interface IButtonToggleComponent<T = unknown> extends IWithElementInternals, IWithDefaultAria, IWithFocusable {
   value: T;
   selected: boolean;
   disabled: boolean;
@@ -29,7 +30,7 @@ declare global {
   }
 }
 
-const BaseButtonToggleClass = WithElementInternals(WithFocusable(BaseComponent));
+const BaseButtonToggleClass = WithDefaultAria(WithElementInternals(WithFocusable(BaseComponent)));
 
 /**
  * @tag forge-button-toggle
@@ -94,9 +95,14 @@ const BaseButtonToggleClass = WithElementInternals(WithFocusable(BaseComponent))
 })
 export class ButtonToggleComponent<T = unknown> extends BaseButtonToggleClass implements IButtonToggleComponent {
   public static get observedAttributes(): string[] {
-    return Object.values(BUTTON_TOGGLE_CONSTANTS.observedAttributes);
+    return [
+      ...Object.values(BUTTON_TOGGLE_CONSTANTS.observedAttributes),
+      ...Object.values(BUTTON_TOGGLE_CONSTANTS.observedAriaAttributes)
+    ];
   }
 
+  public readonly [observedDefaultAriaAttributes] = BUTTON_TOGGLE_CONSTANTS.observedAriaAttributes;
+
   private _foundation: ButtonToggleFoundation;
 
   constructor() {

src/lib/button/base/base-button.ts

@@ -1,15 +1,16 @@
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
 import { IconRegistry } from '../../icon/icon-registry';
-import { WithFocusable, IWithFocusable } from '../../core/base/base-focusable-component';
+import { WithFocusable, IWithFocusable } from '../../core/mixins/focus/with-focusable';
 import { BaseComponent } from '../../core/base/base-component';
 import { ExperimentalFocusOptions, internals } from '../../constants';
 import { IBaseButtonAdapter } from './base-button-adapter';
 import { BASE_BUTTON_CONSTANTS, ButtonType } from './base-button-constants';
 import { BaseButtonFoundation } from './base-button-foundation';
-import { WithLabelAwareness, IWithLabelAwareness } from '../../core/base/base-label-aware-component';
+import { WithLabelAwareness, IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { IWithElementInternals, WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 
-export interface IBaseButton extends IWithFocusable, IWithLabelAwareness {
+export interface IBaseButton extends IWithFocusable, IWithLabelAwareness, IWithElementInternals {
   type: ButtonType;
   disabled: boolean;
   popoverIcon: boolean;
@@ -25,19 +26,16 @@ export interface IBaseButton extends IWithFocusable, IWithLabelAwareness {
   focus(options?: ExperimentalFocusOptions): void;
 }
 
-const BaseButtonClass = WithLabelAwareness(WithFocusable(BaseComponent));
+const BaseButtonClass = WithElementInternals(WithLabelAwareness(WithFocusable(BaseComponent)));
 
 export abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseButtonClass implements IBaseButton {
   public static readonly formAssociated = true;
 
-  public [internals]: ElementInternals;
-
   protected abstract _foundation: T;
 
   constructor() {
     super();
     IconRegistry.define(tylIconArrowDropDown);
-    this[internals] = this.attachInternals();
   }
 
   public override connectedCallback(): void {
@@ -49,31 +47,31 @@ export abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapt
     switch (name) {
       case BASE_BUTTON_CONSTANTS.observedAttributes.TYPE:
         this.type = newValue as ButtonType;
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.DISABLED:
         this.disabled = coerceBoolean(newValue);
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.POPOVER_ICON:
         this.popoverIcon = coerceBoolean(newValue);
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.ANCHOR:
         this.anchor = coerceBoolean(newValue);
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.HREF:
         this.href = newValue;
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.TARGET:
         this.target = newValue;
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.DOWNLOAD:
         this.download = newValue;
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.REL:
         this.rel = newValue;
-        break;
+        return;
       case BASE_BUTTON_CONSTANTS.observedAttributes.DENSE:
         this.dense = coerceBoolean(newValue);
-        break;
+        return;
     }
     super.attributeChangedCallback(name, oldValue, newValue);
   }

src/lib/constants.ts

@@ -27,6 +27,9 @@ export const isFocusable = Symbol('isFocusable');
  * supported or sprouts attributes if not. */
 export const setDefaultAria = Symbol('setDefaultAria');
 
+/** A property symbol that is used to define default ARIA attributes that will be observed. */
+export const observedDefaultAriaAttributes = Symbol('observedDefaultAriaAttributes');
+
 export type Theme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
 export type Density = 'small' | 'medium' | 'large';
 

src/lib/core/base/index.ts

@@ -1,6 +1,2 @@
 export * from './base-adapter';
 export * from './base-component';
-export * from './base-element-internals-component';
-export * from './base-focusable-component';
-export * from './base-form-associated-component';
-export * from './base-label-aware-component';

src/lib/core/base/base-focusable-component.test.ts → src/lib/core/mixins/focus/with-focusable.test.ts

@@ -11,9 +11,9 @@ import { expect } from '@esm-bundle/chai';
 import { fixture, html } from '@open-wc/testing';
 import { CustomElement } from '@tylertech/forge-core';
 
-import { isFocusable } from '../../constants';
-import { WithFocusable } from './base-focusable-component';
-import { BaseComponent } from './base-component';
+import { isFocusable } from '../../../constants';
+import { WithFocusable } from './with-focusable';
+import { BaseComponent } from '../../base/base-component';
 
 
 describe('WithFocusable', () => {

src/lib/core/base/base-focusable-component.ts → src/lib/core/mixins/focus/with-focusable.ts

@@ -7,8 +7,8 @@
  * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/focusable.ts)
  */
 
-import { AbstractConstructor, isFocusable, MixinBase } from '../../constants';
-import { IBaseComponent } from './base-component';
+import { AbstractConstructor, isFocusable, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
 
 /**
  * An element that can enable and disable `tabindex` focusability.

src/lib/core/base/base-form-associated-component.ts → src/lib/core/mixins/form/with-form-associated.ts

@@ -8,9 +8,9 @@
  */
 
 import { toggleAttribute } from '@tylertech/forge-core';
-import { MixinBase, getFormState, getFormValue, getValidationMessage, inputType, internals, AbstractConstructor } from '../../constants';
-import { FormRestoreReason, FormRestoreState, FormValue, InputType, InputValidationProps } from '../utils/form-utils';
-import { IBaseComponent } from './base-component';
+import { MixinBase, getFormState, getFormValue, getValidationMessage, inputType, internals, AbstractConstructor } from '../../../constants';
+import { FormRestoreReason, FormRestoreState, FormValue, InputType, InputValidationProps } from '../../utils/form-utils';
+import { IBaseComponent } from '../../base/base-component';
 
 /**
  * A component that can be associated with a form.