diff --git a/packages/web-components/src/anchor-button/anchor-button.options.ts b/packages/web-components/src/anchor-button/anchor-button.options.ts index 12785a8ab21eef..ffe8da74b46bc9 100644 --- a/packages/web-components/src/anchor-button/anchor-button.options.ts +++ b/packages/web-components/src/anchor-button/anchor-button.options.ts @@ -58,3 +58,26 @@ export const AnchorTarget = { * @public */ export type AnchorTarget = ValuesOf; + +/** + * Reflected anchor attributes. + * + * @public + */ +export const AnchorAttributes = { + download: 'download', + href: 'href', + hreflang: 'hreflang', + ping: 'ping', + referrerpolicy: 'referrerpolicy', + rel: 'rel', + target: 'target', + type: 'type', +} as const; + +/** + * Type for anchor attributes. + * + * @public + */ +export type AnchorAttributes = ValuesOf; diff --git a/packages/web-components/src/anchor-button/anchor-button.ts b/packages/web-components/src/anchor-button/anchor-button.ts index 0e9c0d6d2fb8ef..bebff1bf345538 100644 --- a/packages/web-components/src/anchor-button/anchor-button.ts +++ b/packages/web-components/src/anchor-button/anchor-button.ts @@ -3,11 +3,12 @@ import { keyEnter } from '@microsoft/fast-web-utilities'; import { StartEnd } from '../patterns/index.js'; import type { StartEndOptions } from '../patterns/index.js'; import { applyMixins } from '../utils/apply-mixins.js'; -import type { - AnchorButtonAppearance, - AnchorButtonShape, - AnchorButtonSize, - AnchorTarget, +import { + AnchorAttributes, + type AnchorButtonAppearance, + type AnchorButtonShape, + type AnchorButtonSize, + type AnchorTarget, } from './anchor-button.options.js'; /** @@ -201,12 +202,11 @@ export class AnchorButton extends FASTElement { * @param propertyName */ public handleChange(source: any, propertyName: string) { - if (propertyName === ('appearance' || 'size' || 'shape' || 'icon-only')) { - return; - } - const attribute = this.$fastController.definition.attributeLookup[propertyName]?.attribute; - if (attribute) { - this.handleProxyAttributeChange(attribute, this[propertyName as keyof this] as string); + if (propertyName in AnchorAttributes) { + const attribute = this.$fastController.definition.attributeLookup[propertyName]?.attribute; + if (attribute) { + this.handleProxyAttributeChange(attribute, this[propertyName as AnchorAttributes]); + } } }