fix(aria/tree): add validation for single selection tree with multiple values

Author: adolgachev

goldens/aria/private/index.api.md

@@ -780,7 +780,6 @@ export class ToolbarPattern<V> {
     setDefaultState(): void;
     readonly softDisabled: SignalLike<boolean>;
     readonly tabIndex: SignalLike<0 | -1>;
-    validate(): string[];
 }
 
 // @public
@@ -917,6 +916,7 @@ export class TreePattern<V> implements TreeInputs<V> {
     readonly treeBehavior: Tree<TreeItemPattern<V>, V>;
     readonly typeaheadDelay: SignalLike<number>;
     readonly typeaheadRegexp: RegExp;
+    validate(): string[];
     readonly values: WritableSignalLike<V[]>;
     readonly visible: () => boolean;
     readonly wrap: SignalLike<boolean>;

src/aria/private/tree/tree.ts

@@ -358,6 +358,19 @@ export class TreePattern<V> implements TreeInputs<V> {
     });
   }
 
+  /** Returns a set of violations */
+  validate(): string[] {
+    const violations: string[] = [];
+
+    if (!this.inputs.multi() && this.inputs.values().length > 1) {
+      violations.push(
+        `A single-select tree should not have multiple selected options. Selected options: ${this.inputs.values().join(', ')}`,
+      );
+    }
+
+    return violations;
+  }
+
   /**
    * Sets the tree to it's default initial state.
    *

src/aria/tree/tree.ts

@@ -174,6 +174,15 @@ export class Tree<V> {
       this._popup?._controls?.set(this._pattern as ComboboxTreePattern<V>);
     }
 
+    afterRenderEffect(() => {
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        const violations = this._pattern.validate();
+        for (const violation of violations) {
+          console.error(violation);
+        }
+      }
+    });
+
     afterRenderEffect(() => {
       if (!this._hasFocused()) {
         this._pattern.setDefaultState();