fix: enable overwriting preventDefault to allow triggering hyperlinks using enter key (angular#32123)

Author: ok7sai

src/aria/private/behaviors/event-manager/keyboard-event-manager.ts

@@ -35,32 +35,41 @@ export class KeyboardEventManager<T extends KeyboardEvent> extends EventManager<
   };
 
   /** Configures this event manager to handle events with a specific key and no modifiers. */
-  on(key: KeyCode, handler: EventHandler<T>): this;
+  on(key: KeyCode, handler: EventHandler<T>, options?: Partial<EventHandlerOptions>): this;
 
   /**  Configures this event manager to handle events with a specific modifer and key combination. */
-  on(modifiers: ModifierInputs, key: KeyCode, handler: EventHandler<T>): this;
+  on(
+    modifiers: ModifierInputs,
+    key: KeyCode,
+    handler: EventHandler<T>,
+    options?: Partial<EventHandlerOptions>,
+  ): this;
 
   on(...args: any[]) {
-    const {modifiers, key, handler} = this._normalizeInputs(...args);
+    const {modifiers, key, handler, options} = this._normalizeInputs(...args);
 
     this.configs.push({
       handler: handler,
       matcher: event => this._isMatch(event, key, modifiers),
       ...this.options,
+      ...options,
     });
 
     return this;
   }
 
   private _normalizeInputs(...args: any[]) {
-    const key = args.length === 3 ? args[1] : args[0];
-    const handler = args.length === 3 ? args[2] : args[1];
-    const modifiers = args.length === 3 ? args[0] : Modifier.None;
+    const withModifiers = Array.isArray(args[0]) || args[0] in Modifier;
+    const modifiers = withModifiers ? args[0] : Modifier.None;
+    const key = withModifiers ? args[1] : args[0];
+    const handler = withModifiers ? args[2] : args[1];
+    const options = withModifiers ? args[3] : args[2];
 
     return {
       key: key as KeyCode,
       handler: handler as EventHandler<T>,
       modifiers: modifiers as ModifierInputs,
+      options: (options ?? {}) as Partial<EventHandlerOptions>,
     };
   }
 

src/aria/private/tree/tree.ts

@@ -275,13 +275,13 @@ export class TreePattern<V> {
     if (!this.followFocus() && this.inputs.multi()) {
       manager
         .on(this.dynamicSpaceKey, () => list.toggle())
-        .on('Enter', () => list.toggle())
+        .on('Enter', () => list.toggle(), {preventDefault: !this.nav()})
         .on([Modifier.Ctrl, Modifier.Meta], 'A', () => list.toggleAll());
     }
 
     if (!this.followFocus() && !this.inputs.multi()) {
       manager.on(this.dynamicSpaceKey, () => list.selectOne());
-      manager.on('Enter', () => list.selectOne());
+      manager.on('Enter', () => list.selectOne(), {preventDefault: !this.nav()});
     }
 
     if (this.inputs.multi() && this.followFocus()) {

src/components-examples/aria/tree/tree-configurable/tree-configurable-example.html

@@ -47,31 +47,86 @@
 
 <ng-template #treeNodes let-nodes="nodes" let-parent="parent">
   @for (node of nodes; track node.value) {
-  <li
-    ngTreeItem
-    [parent]="parent"
-    [value]="node.value"
-    [label]="node.name"
-    [disabled]="node.disabled"
-    [selectable]="!nav.value || !node.children"
-    #treeItem="ngTreeItem"
-    class="example-tree-item example-selectable example-stateful"
-  >
-    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
-    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
-    {{ node.name }}
-    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
-  </li>
+    @if (nav.value) {
+      <li role="none" style="list-style: none">
+        <a
+          ngTreeItem
+          [parent]="parent"
+          [value]="node.value"
+          [label]="node.name"
+          [disabled]="node.disabled"
+          [selectable]="!node.children"
+          #treeItem="ngTreeItem"
+          class="example-tree-item example-selectable example-stateful"
+          [attr.href]="!!node.children ? null : '/aria-tree#' + node.name"
+        >
+          <span
+            aria-hidden="true"
+            class="material-symbols-outlined example-parent-icon example-icon"
+            >{{node.children ? 'chevron_right' : ''}}</span
+          >
+          <span
+            aria-hidden="true"
+            class="material-symbols-outlined example-icon"
+            >{{node.children ? 'folder' : 'docs'}}</span
+          >
+          {{ node.name }}
+          <span
+            aria-hidden="true"
+            class="material-symbols-outlined example-selected-icon example-icon"
+            >check</span
+          >
+        </a>
+      </li>
 
-  @if (node.children) {
-  <ul role="group">
-    <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
-      <ng-template
-        [ngTemplateOutlet]="treeNodes"
-        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
-      />
-    </ng-template>
-  </ul>
-  }
+      @if (node.children) {
+        <ul role="group">
+          <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
+            <ng-template
+              [ngTemplateOutlet]="treeNodes"
+              [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+            />
+          </ng-template>
+        </ul>
+      }
+    } @else {
+      <li
+        ngTreeItem
+        [parent]="parent"
+        [value]="node.value"
+        [label]="node.name"
+        [disabled]="node.disabled"
+        #treeItem="ngTreeItem"
+        class="example-tree-item example-selectable example-stateful"
+      >
+        <span
+          aria-hidden="true"
+          class="material-symbols-outlined example-parent-icon example-icon"
+          >{{node.children ? 'chevron_right' : ''}}</span
+        >
+        <span
+          aria-hidden="true"
+          class="material-symbols-outlined example-icon"
+          >{{node.children ? 'folder' : 'docs'}}</span
+        >
+        {{ node.name }}
+        <span
+          aria-hidden="true"
+          class="material-symbols-outlined example-selected-icon example-icon"
+          >check</span
+        >
+      </li>
+
+      @if (node.children) {
+        <ul role="group">
+          <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
+            <ng-template
+              [ngTemplateOutlet]="treeNodes"
+              [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+            />
+          </ng-template>
+        </ul>
+      }
+    }
   }
 </ng-template>