@vonage/vivid 4.22.0 → 4.24.0

package/shared/delegates-aria.cjs

@@ -1,69 +1,119 @@
 'use strict';
 
+const attributeBindingBehaviour = require('./attribute-binding-behaviour.cjs');
 const vividElement = require('./vivid-element.cjs');
 
-const ariaMixinProperties = [
-  "role",
-  "ariaAtomic",
-  "ariaAutoComplete",
-  "ariaBusy",
-  "ariaChecked",
-  "ariaColCount",
-  "ariaColIndex",
-  "ariaColIndexText",
-  "ariaColSpan",
-  "ariaCurrent",
-  "ariaDescription",
-  "ariaDisabled",
-  "ariaExpanded",
-  "ariaHasPopup",
-  "ariaHidden",
-  "ariaInvalid",
-  "ariaKeyShortcuts",
-  "ariaLabel",
-  "ariaLevel",
-  "ariaLive",
-  "ariaModal",
-  "ariaMultiLine",
-  "ariaMultiSelectable",
-  "ariaOrientation",
-  "ariaPlaceholder",
-  "ariaPosInSet",
-  "ariaPressed",
-  "ariaReadOnly",
-  "ariaRequired",
-  "ariaRoleDescription",
-  "ariaRowCount",
-  "ariaRowIndex",
-  "ariaRowIndexText",
-  "ariaRowSpan",
-  "ariaSelected",
-  "ariaSetSize",
-  "ariaSort",
-  "ariaValueMax",
-  "ariaValueMin",
-  "ariaValueNow",
-  "ariaValueText",
-  "ariaRelevant"
-  // Non-standard
-];
-const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
-const DelegatesAria = (Base) => {
-  class DelegatesAriaElement extends Base {
-    constructor(...rest) {
-      super(...rest);
-      for (const ariaProperty of ariaMixinProperties) {
-        this[ariaProperty] = null;
+class DelegateAriaBehavior {
+  constructor(target, params) {
+    this.target = target;
+    this.source = null;
+    this.bindingBehaviours = [];
+    this.onSourceAriaPropertyChanged = (source, property) => {
+      this.mitigateAccessibilityIssues(source);
+      if (!this.forwardedProperties.has(property)) {
+        return;
       }
+      this.forwardPropertyToTarget(this.target, property, source[property]);
+    };
+    this.boundProperties = params.boundProperties;
+    this.forwardedProperties = params.forwardedProperties;
+    this.isMitigationDisabled = params.disableAccessibilityMitigation;
+  }
+  bind(source) {
+    this.source = source;
+    this.bindPropertiesToTarget(source, this.boundProperties, this.target);
+    this.startForwardingPropertiesToTarget(
+      source,
+      this.forwardedProperties,
+      this.target
+    );
+    this.mitigateAccessibilityIssues(source);
+  }
+  unbind() {
+    if (this.source === null) {
+      return;
     }
+    this.releasePropertyBindings(this.source);
+    this.stopForwardingPropertiesToTarget(this.source);
+    this.source = null;
   }
-  for (const ariaProperty of ariaMixinProperties) {
-    vividElement.attr({ attribute: ariaAttributeName(ariaProperty) })(
-      DelegatesAriaElement.prototype,
-      ariaProperty
+  bindPropertiesToTarget(source, boundProperties, target) {
+    for (const [property, binding] of Object.entries(boundProperties)) {
+      const bindingFn = binding instanceof Function ? binding : () => binding;
+      this.bindingBehaviours.push(
+        new attributeBindingBehaviour.AttributeBindingBehavior(
+          target,
+          bindingFn,
+          vividElement.Observable.isVolatileBinding(bindingFn),
+          vividElement.ariaAttributeName(property)
+        )
+      );
+    }
+    source.$fastController.addBehaviors(this.bindingBehaviours);
+  }
+  releasePropertyBindings(source) {
+    source.$fastController.removeBehaviors(this.bindingBehaviours);
+    this.bindingBehaviours = [];
+  }
+  startForwardingPropertiesToTarget(source, delegatedProperties, target) {
+    for (const key of delegatedProperties) {
+      this.forwardPropertyToTarget(target, key, source[key]);
+    }
+    vividElement.subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
+  }
+  stopForwardingPropertiesToTarget(source) {
+    vividElement.unsubscribeFromAriaPropertyChanges(
+      source,
+      this.onSourceAriaPropertyChanged
     );
   }
+  forwardPropertyToTarget(target, property, value) {
+    vividElement.DOM.setAttribute(target, vividElement.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 ? [] : vividElement.ariaMixinProperties).filter((p) => p !== "role").filter((p) => !(p in boundProperties))
+  );
+  const disableAccessibilityMitigation = boundProperties.role instanceof Function;
+  return new vividElement.AttachedBehaviorHTMLDirective(
+    "vvd-delegate-aria",
+    DelegateAriaBehavior,
+    {
+      boundProperties,
+      forwardedProperties,
+      disableAccessibilityMitigation
+    }
+  );
+}
+const DelegatesAria = (Base) => {
+  class DelegatesAriaElement extends Base {
+    constructor() {
+      super(...arguments);
+      this._vividAriaBehaviour = "delegate";
+    }
+  }
   return DelegatesAriaElement;
 };
 
 exports.DelegatesAria = DelegatesAria;
+exports.delegateAria = delegateAria;

package/shared/delegates-aria.js

@@ -1,67 +1,116 @@
-import { a as attr } from './vivid-element.js';
+import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
+import { O as Observable, d as ariaAttributeName, s as subscribeToAriaPropertyChanges, u as unsubscribeFromAriaPropertyChanges, D as DOM, f as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 
-const ariaMixinProperties = [
-  "role",
-  "ariaAtomic",
-  "ariaAutoComplete",
-  "ariaBusy",
-  "ariaChecked",
-  "ariaColCount",
-  "ariaColIndex",
-  "ariaColIndexText",
-  "ariaColSpan",
-  "ariaCurrent",
-  "ariaDescription",
-  "ariaDisabled",
-  "ariaExpanded",
-  "ariaHasPopup",
-  "ariaHidden",
-  "ariaInvalid",
-  "ariaKeyShortcuts",
-  "ariaLabel",
-  "ariaLevel",
-  "ariaLive",
-  "ariaModal",
-  "ariaMultiLine",
-  "ariaMultiSelectable",
-  "ariaOrientation",
-  "ariaPlaceholder",
-  "ariaPosInSet",
-  "ariaPressed",
-  "ariaReadOnly",
-  "ariaRequired",
-  "ariaRoleDescription",
-  "ariaRowCount",
-  "ariaRowIndex",
-  "ariaRowIndexText",
-  "ariaRowSpan",
-  "ariaSelected",
-  "ariaSetSize",
-  "ariaSort",
-  "ariaValueMax",
-  "ariaValueMin",
-  "ariaValueNow",
-  "ariaValueText",
-  "ariaRelevant"
-  // Non-standard
-];
-const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
-const DelegatesAria = (Base) => {
-  class DelegatesAriaElement extends Base {
-    constructor(...rest) {
-      super(...rest);
-      for (const ariaProperty of ariaMixinProperties) {
-        this[ariaProperty] = null;
+class DelegateAriaBehavior {
+  constructor(target, params) {
+    this.target = target;
+    this.source = null;
+    this.bindingBehaviours = [];
+    this.onSourceAriaPropertyChanged = (source, property) => {
+      this.mitigateAccessibilityIssues(source);
+      if (!this.forwardedProperties.has(property)) {
+        return;
       }
+      this.forwardPropertyToTarget(this.target, property, source[property]);
+    };
+    this.boundProperties = params.boundProperties;
+    this.forwardedProperties = params.forwardedProperties;
+    this.isMitigationDisabled = params.disableAccessibilityMitigation;
+  }
+  bind(source) {
+    this.source = source;
+    this.bindPropertiesToTarget(source, this.boundProperties, this.target);
+    this.startForwardingPropertiesToTarget(
+      source,
+      this.forwardedProperties,
+      this.target
+    );
+    this.mitigateAccessibilityIssues(source);
+  }
+  unbind() {
+    if (this.source === null) {
+      return;
     }
+    this.releasePropertyBindings(this.source);
+    this.stopForwardingPropertiesToTarget(this.source);
+    this.source = null;
   }
-  for (const ariaProperty of ariaMixinProperties) {
-    attr({ attribute: ariaAttributeName(ariaProperty) })(
-      DelegatesAriaElement.prototype,
-      ariaProperty
+  bindPropertiesToTarget(source, boundProperties, target) {
+    for (const [property, binding] of Object.entries(boundProperties)) {
+      const bindingFn = binding instanceof Function ? binding : () => binding;
+      this.bindingBehaviours.push(
+        new AttributeBindingBehavior(
+          target,
+          bindingFn,
+          Observable.isVolatileBinding(bindingFn),
+          ariaAttributeName(property)
+        )
+      );
+    }
+    source.$fastController.addBehaviors(this.bindingBehaviours);
+  }
+  releasePropertyBindings(source) {
+    source.$fastController.removeBehaviors(this.bindingBehaviours);
+    this.bindingBehaviours = [];
+  }
+  startForwardingPropertiesToTarget(source, delegatedProperties, target) {
+    for (const key of delegatedProperties) {
+      this.forwardPropertyToTarget(target, key, source[key]);
+    }
+    subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
+  }
+  stopForwardingPropertiesToTarget(source) {
+    unsubscribeFromAriaPropertyChanges(
+      source,
+      this.onSourceAriaPropertyChanged
     );
   }
+  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))
+  );
+  const disableAccessibilityMitigation = boundProperties.role instanceof Function;
+  return new AttachedBehaviorHTMLDirective(
+    "vvd-delegate-aria",
+    DelegateAriaBehavior,
+    {
+      boundProperties,
+      forwardedProperties,
+      disableAccessibilityMitigation
+    }
+  );
+}
+const DelegatesAria = (Base) => {
+  class DelegatesAriaElement extends Base {
+    constructor() {
+      super(...arguments);
+      this._vividAriaBehaviour = "delegate";
+    }
+  }
   return DelegatesAriaElement;
 };
 
-export { DelegatesAria as D };
+export { DelegatesAria as D, delegateAria as d };

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

@@ -1,6 +1,13 @@
 import { FormAssociatedButton } from './button.form-associated';
 declare const VividFoundationButton_base: {
-    new (...rest: any[]): {
+    new (...args: any[]): {
+        _vividAriaBehaviour: "delegate";
+        specialHandling: boolean;
+        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;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -317,11 +324,6 @@ declare const VividFoundationButton_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions | undefined): 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;
         ariaColIndexText: string | null;
         ariaDescription: string | null;
         ariaRowIndexText: string | null;