@vonage/vivid 4.30.1 → 5.0.0

package/shared/delegates-aria.js

@@ -7,7 +7,6 @@ class DelegateAriaBehavior {
     this.source = null;
     this.bindingBehaviours = [];
     this.onSourceAriaPropertyChanged = (source, property) => {
-      this.mitigateAccessibilityIssues(source);
       if (!this.forwardedProperties.has(property)) {
         return;
       }
@@ -15,7 +14,6 @@ class DelegateAriaBehavior {
     };
     this.boundProperties = params.boundProperties;
     this.forwardedProperties = params.forwardedProperties;
-    this.isMitigationDisabled = params.disableAccessibilityMitigation;
   }
   bind(source) {
     this.source = source;
@@ -25,7 +23,6 @@ class DelegateAriaBehavior {
       this.forwardedProperties,
       this.target
     );
-    this.mitigateAccessibilityIssues(source);
   }
   unbind() {
     if (this.source === null) {
@@ -68,38 +65,20 @@ class DelegateAriaBehavior {
   forwardPropertyToTarget(target, property, value) {
     DOM.setAttribute(target, ariaAttributeName(property), value);
   }
-  /**
-   * Sets role to presentation unless there are properties present that prohibit it.
-   * Using role="presentation" will cause non-global states or properties to be ignored.
-   * See: https://www.w3.org/TR/wai-aria-1.3/#conflict_resolution_presentation_none
-   */
-  mitigateAccessibilityIssues(source) {
-    if (this.isMitigationDisabled) {
-      return;
-    }
-    const hasProhibitedProperties = Boolean(
-      source.ariaLabel || source.ariaBrailleLabel || source.ariaChecked
-    );
-    if (hasProhibitedProperties) {
-      source.removeAttribute("role");
-    } else {
-      source.setAttribute("role", "presentation");
-    }
-  }
 }
 
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
-    (options.onlySpecified ? [] : ariaMixinProperties).filter((p) => p !== "role").filter((p) => !(p in boundProperties))
+    (options.onlySpecified ? [] : ariaMixinProperties).filter(
+      (p) => !(p in boundProperties)
+    )
   );
-  const disableAccessibilityMitigation = boundProperties.role instanceof Function;
   return new AttachedBehaviorHTMLDirective(
     "vvd-delegate-aria",
     DelegateAriaBehavior,
     {
       boundProperties,
-      forwardedProperties,
-      disableAccessibilityMitigation
+      forwardedProperties
     }
   );
 }

package/shared/divider.cjs

@@ -27,14 +27,19 @@ const DividerRole = {
 class Divider extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
+    /**
+     * The role of the element. This property will be removed
+     *
+     * @deprecated This property will be deprecated, as divider shouldn't be announced by screen readers. Please update your usages.
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     this.role = DividerRole.separator;
     this.orientation = aria.Orientation.horizontal;
     this.appearance = enums.Appearance.Ghost;
   }
 }
-__decorateClass([
-  vividElement.attr
-], Divider.prototype, "role");
 __decorateClass([
   vividElement.attr
 ], Divider.prototype, "orientation");

package/shared/divider.js

@@ -25,14 +25,19 @@ const DividerRole = {
 class Divider extends HostSemantics(VividElement) {
   constructor() {
     super(...arguments);
+    /**
+     * The role of the element. This property will be removed
+     *
+     * @deprecated This property will be deprecated, as divider shouldn't be announced by screen readers. Please update your usages.
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     this.role = DividerRole.separator;
     this.orientation = Orientation.horizontal;
     this.appearance = Appearance.Ghost;
   }
 }
-__decorateClass([
-  attr
-], Divider.prototype, "role");
 __decorateClass([
   attr
 ], Divider.prototype, "orientation");

package/shared/feedback/feedback-message.d.ts

@@ -4,7 +4,6 @@ declare const FeedbackMessage_base: {
     new (...args: any[]): {
         readonly locale: import("../localization/Locale").Locale;
         connectedCallback(): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -330,6 +329,48 @@ declare const FeedbackMessage_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

package/shared/feedback/mixins.d.ts

@@ -14,7 +14,6 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -340,6 +339,48 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -364,7 +405,6 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         connectedCallback(): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -690,6 +730,48 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

package/shared/foundation/button/button.d.ts

@@ -3,7 +3,6 @@ declare const VividFoundationButton_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
@@ -328,6 +327,48 @@ declare const VividFoundationButton_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -372,7 +413,6 @@ declare const VividFoundationButton_base: {
         setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -697,6 +737,48 @@ declare const VividFoundationButton_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

package/shared/foundation/form-associated/form-associated.d.ts

@@ -39,7 +39,6 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -364,6 +363,48 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
@@ -419,7 +460,6 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
@@ -744,6 +784,48 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
         "__#1@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;

package/shared/foundation/vivid-element/vivid-element.d.ts

@@ -1,11 +1,10 @@
 import { FASTElement } from '@microsoft/fast-element';
 declare const VividElement_base: {
     new (...args: any[]): {
-        specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
+        connectedCallback(): void;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -328,6 +327,48 @@ declare const VividElement_base: {
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
     };
 } & {
     new (...args: any[]): {

package/shared/listbox.cjs

@@ -124,7 +124,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   clickHandler(e) {
     const captured = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (captured && !captured.disabled) {
       this.selectedIndex = this.options.indexOf(captured);

package/shared/listbox.js

@@ -122,7 +122,7 @@ const _Listbox = class _Listbox extends VividElement {
    */
   clickHandler(e) {
     const captured = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (captured && !captured.disabled) {
       this.selectedIndex = this.options.indexOf(captured);

package/shared/localization/Locale.d.ts

@@ -22,6 +22,7 @@ import type { DataGridLocale } from '../../lib/data-grid/locale';
 import type { PaginationLocale } from '../../lib/pagination/locale';
 import type { TagLocale } from '../../lib/tag/locale';
 import type { Connotation } from '../../lib/enums';
+import type { ToggletipLocale } from '../../lib/toggletip/locale';
 type ConnotationAnnoncementLocale = {
     [key in Connotation as `${key}Icon`]: string;
 };
@@ -54,5 +55,6 @@ export interface Locale {
     dataGrid: DataGridLocale;
     pagination: PaginationLocale;
     tag: TagLocale;
+    toggletip: ToggletipLocale;
 }
 export {};

package/shared/option.cjs

@@ -16,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 function isListboxOption(el) {
-  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
+  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
 }
 class ListboxOption extends hostSemantics.HostSemantics(
   affix.AffixIconWithTrailing(vividElement.VividElement)
@@ -138,7 +138,20 @@ class ListboxOption extends hostSemantics.HostSemantics(
   }
 }
 __decorateClass([
-  vividElement.observable
+  vividElement.attr({
+    converter: {
+      fromView: (value) => {
+        if (value === true || value === "true") {
+          return true;
+        }
+        if (value === false || value === "false") {
+          return false;
+        }
+        return void 0;
+      },
+      toView: (value) => value
+    }
+  })
 ], ListboxOption.prototype, "checked", 2);
 __decorateClass([
   vividElement.attr({ attribute: "selected", mode: "boolean" })