From 5132c41fe47ad94c5e62ec74a343cd22fe6ea6a2 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 27 May 2026 10:51:04 -0700 Subject: [PATCH 1/5] chore(action-button): migrate api and typescript code --- .../action-button/src/ActionButton.ts | 48 +++++++++++++++++++ .../components/action-button/ActionButton.ts | 15 +++++- .../01_status.md | 2 +- 3 files changed, 63 insertions(+), 2 deletions(-) diff --git a/1st-gen/packages/action-button/src/ActionButton.ts b/1st-gen/packages/action-button/src/ActionButton.ts index bb9ef32dca8..3df1789165e 100644 --- a/1st-gen/packages/action-button/src/ActionButton.ts +++ b/1st-gen/packages/action-button/src/ActionButton.ts @@ -59,9 +59,18 @@ export class ActionButton extends SizedMixin(ButtonBase, { return [...super.styles, buttonStyles, cornerTriangleStyles]; } + /** + * @deprecated The `emphasized` property is deprecated and will be removed + * in a future release. + */ @property({ type: Boolean, reflect: true }) public emphasized = false; + /** + * @deprecated Hold affordance support has been deferred. The + * `hold-affordance` attribute and `longpress` event will be removed in a + * future release. + */ @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' }) public holdAffordance = false; @@ -74,6 +83,9 @@ export class ActionButton extends SizedMixin(ButtonBase, { /** * Whether an Action Button with `role='button'` * should also be `aria-pressed='true'` + * + * @deprecated The `selected` property is deprecated and will be removed in + * a future release. Use `swc-toggle-button` for selectable button behavior. */ @property({ type: Boolean, reflect: true }) public selected = false; @@ -82,6 +94,10 @@ export class ActionButton extends SizedMixin(ButtonBase, { * Whether to automatically manage the `selected` * attribute on interaction and whether `aria-pressed="false"` * should be used when `selected === false` + * + * @deprecated The `toggles` property is deprecated and will be removed in + * a future release. Use `swc-toggle-button` or `swc-toggle-button-group` + * for toggle button behavior. */ @property({ type: Boolean, reflect: true }) public toggles = false; @@ -241,9 +257,41 @@ export class ActionButton extends SizedMixin(ButtonBase, { this.setAttribute('aria-expanded', this.selected ? 'true' : 'false'); } } + if (changes.has('selected') && this.selected && window.__swc?.DEBUG) { + window.__swc.warn( + this, + `The "selected" attribute on <${this.localName}> is deprecated and will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-button/', + { level: 'deprecation' } + ); + } + } + if (changes.has('toggles') && this.toggles && window.__swc?.DEBUG) { + window.__swc.warn( + this, + `The "toggles" attribute on <${this.localName}> is deprecated and will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-button/', + { level: 'deprecation' } + ); + } + if (changes.has('emphasized') && this.emphasized && window.__swc?.DEBUG) { + window.__swc.warn( + this, + `The "emphasized" attribute on <${this.localName}> is deprecated and will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-button/', + { level: 'deprecation' } + ); } if (changes.has('holdAffordance')) { if (this.holdAffordance) { + if (window.__swc?.DEBUG) { + window.__swc.warn( + this, + `The "hold-affordance" attribute on <${this.localName}> is deprecated and will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-button/', + { level: 'deprecation' } + ); + } this.addEventListener( 'pointerdown', this.handlePointerdownHoldAffordance diff --git a/2nd-gen/packages/swc/components/action-button/ActionButton.ts b/2nd-gen/packages/swc/components/action-button/ActionButton.ts index 8cbd1425bb8..d1f80c0adbf 100644 --- a/2nd-gen/packages/swc/components/action-button/ActionButton.ts +++ b/2nd-gen/packages/swc/components/action-button/ActionButton.ts @@ -85,13 +85,16 @@ export class ActionButton extends ButtonBase { // ─────────────────── /** - * Applies the quiet (low-emphasis) visual treatment. + * Applies the quiet (low-emphasis) visual treatment. The button renders + * without a visible background or border at rest, making it suitable for + * toolbars and chrome where visual weight should be minimal. */ @property({ type: Boolean, reflect: true }) public quiet: boolean = false; /** * Static color treatment for display over colored or image backgrounds. + * Supported with both the default and `quiet` visual treatments. */ @property({ type: String, reflect: true, attribute: 'static-color' }) public staticColor?: ActionButtonStaticColor; @@ -100,6 +103,14 @@ export class ActionButton extends ButtonBase { // RENDERING & STYLING // ────────────────────────────── + /** @internal */ + @property({ type: String, attribute: 'aria-haspopup' }) + private _ariaHasPopup?: string; + + /** @internal */ + @property({ type: String, attribute: 'aria-expanded' }) + private _ariaExpanded?: string; + public static override get styles(): CSSResultArray { return [styles]; } @@ -122,6 +133,8 @@ export class ActionButton extends ButtonBase { aria-label=${ifDefined( this.pending ? this.getPendingAccessibleName() : this.accessibleLabel )} + aria-haspopup=${ifDefined(this._ariaHasPopup)} + aria-expanded=${ifDefined(this._ariaExpanded)} > diff --git a/CONTRIBUTOR-DOCS/03_project-planning/02_workstreams/02_2nd-gen-component-migration/01_status.md b/CONTRIBUTOR-DOCS/03_project-planning/02_workstreams/02_2nd-gen-component-migration/01_status.md index f213e5fcbd9..4ec71ac9727 100644 --- a/CONTRIBUTOR-DOCS/03_project-planning/02_workstreams/02_2nd-gen-component-migration/01_status.md +++ b/CONTRIBUTOR-DOCS/03_project-planning/02_workstreams/02_2nd-gen-component-migration/01_status.md @@ -22,7 +22,7 @@ | ------------------- | ------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------- | | Accordion | ✓ | | | | | | | | Action Bar | | | | | | | | -| Action Button | ✓ | ✓ | ✓ | | | | | +| Action Button | ✓ | ✓ | ✓ | ✓ | | | | | Action Group | ✓ | | | | | | | | Action Menu | | | | | | | | | Alert Banner | ✓ | ✓ | | | | | | From abda1abf01ba842fa9fbdacf670940d3a5e045f0 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 27 May 2026 13:36:59 -0700 Subject: [PATCH 2/5] chore(action-button): update migration plan --- .../03_components/action-button/migration-plan.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md index f242ffb0e84..e28ab0c5cfe 100644 --- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md +++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md @@ -468,13 +468,13 @@ What `swc-action-button` adds on top of `ButtonBase`: #### Naming and semantics -- [ ] Align implementation with [Action button accessibility migration analysis](./accessibility-migration-analysis.md) -- [ ] Icon-only usage requires `accessible-label`; emit `__swc.warn()` when absent -- [ ] Pending state: `aria-disabled="true"` on inner ` `; } - - protected override update(changes: PropertyValues): void { - super.update(changes); - // Counteracts SizedMixin's auto-reflect of size="m" when no size was explicitly set. - if (this._size === null) { - this.removeAttribute('size'); - } - } } diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md index e28ab0c5cfe..d93226452e2 100644 --- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md +++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md @@ -626,6 +626,8 @@ What `swc-action-button` adds on top of `ButtonBase`: | TBD | Badge slot and corner-overlay lockup (A6) | Icon+Badge and Avatar+Badge produce a distinct visual lockup. Badge text accessible name composition requires a11y review (@nikkimk) before shipping. | [A6](#additive--ships-when-ready-zero-breakage-for-consumers-already-on-2nd-gen) | | TBD | Avatar slot and accessible name composition (A7) | Avatar accessible name and its relationship to the button's composite accessible name requires a11y review (@nikkimk) before shipping. | [A7](#additive--ships-when-ready-zero-breakage-for-consumers-already-on-2nd-gen) | | TBD (under SWC-2039) | Cross-root ARIA mapping | Shared with `swc-button` dependency on `ElementInternals` / tooling path. | [Deferred semantics note](#deferred-semantics-note-2nd-gen) | +| Phase 4 | `aria-haspopup` / `aria-expanded` host-attribute retention | Phase 3 forwards these to the inner `