@tedi-design-system/angular 9.0.0-rc.6 → 9.0.0-rc.7

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -487,7 +487,11 @@ function breakpointInput(input) {
     return { xs: input };
 }
 
-const FOCUSABLE_SELECTOR$1 = "button, a[href], [tabindex]";
+/** Native controls keep their own semantics and keyboard behavior. */
+const NATIVE_INTERACTIVE_SELECTOR = 'button, a[href], input:not([type="hidden"]), select, textarea';
+const FOCUSABLE_SELECTOR$1 = `${NATIVE_INTERACTIVE_SELECTOR}, [tabindex]`;
+/** Native controls that fire `click` on Space but not on Enter. */
+const SPACE_ACTIVATED_SELECTOR = 'input[type="checkbox"], input[type="radio"]';
 class DropdownTriggerDirective {
     /**
      * The `aria-haspopup` value for the trigger, telling assistive technology
@@ -510,6 +514,8 @@ class DropdownTriggerDirective {
      * would both be tab stops, and the ARIA state would land on the wrong element.
      */
     triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : []));
+    /** Only a Space press that starts on the trigger may activate it on keyup. */
+    spacePressed = false;
     hasPopup = computed(() => {
         const explicit = this.ariaHaspopup();
         if (explicit)
@@ -545,14 +551,21 @@ class DropdownTriggerDirective {
                 this.renderer.setAttribute(el, "aria-haspopup", hasPopup);
             }
             this.renderer.setAttribute(el, "aria-expanded", String(this.dropdown.isOpen()));
-            if (!this.isNativelyFocusable(el)) {
-                this.renderer.setAttribute(el, "role", "button");
-                this.renderer.setAttribute(el, "tabindex", "0");
-            }
         });
     }
     ngAfterViewInit() {
-        this.triggerElement.set(this.resolveTriggerElement());
+        const el = this.resolveTriggerElement();
+        // Non-native triggers need button semantics, but a role or tabindex the
+        // consumer set (e.g. `role="checkbox"`) is theirs to keep.
+        if (!this.isNativelyInteractive(el)) {
+            if (!el.hasAttribute("role")) {
+                this.renderer.setAttribute(el, "role", "button");
+            }
+            if (!el.hasAttribute("tabindex")) {
+                this.renderer.setAttribute(el, "tabindex", "0");
+            }
+        }
+        this.triggerElement.set(el);
     }
     focus() {
         this.triggerElement()?.focus();
@@ -568,6 +581,20 @@ class DropdownTriggerDirective {
     onKeydown(event) {
         const key = event.key;
         switch (key) {
+            case "Enter":
+                if (!this.handlesKey(event, key))
+                    break;
+                // Also keeps Enter on a checkbox from submitting its form.
+                event.preventDefault();
+                this.dropdown.toggleDropdown();
+                break;
+            case " ":
+                if (!this.handlesKey(event, key))
+                    break;
+                // Match button timing and prevent page scrolling.
+                event.preventDefault();
+                this.spacePressed = true;
+                break;
             case "ArrowDown":
                 if (!this.isWidgetContent())
                     break;
@@ -587,17 +614,43 @@ class DropdownTriggerDirective {
                 break;
         }
     }
+    onKeyup(event) {
+        if (event.key !== " " || !this.spacePressed)
+            return;
+        this.spacePressed = false;
+        if (event.target !== this.focusableElement)
+            return;
+        this.dropdown.toggleDropdown();
+    }
+    onFocusout(event) {
+        if (event.target === this.focusableElement)
+            this.spacePressed = false;
+    }
+    /**
+     * Whether the directive must activate the trigger on `key` itself, because the
+     * element does not turn that key into a native click: both keys for a generic
+     * trigger, Enter for a checkbox or radio. Other native controls handle both.
+     */
+    handlesKey(event, key) {
+        const el = this.focusableElement;
+        // Keys from other controls inside the host are theirs.
+        if (event.target !== el)
+            return false;
+        if (!this.isNativelyInteractive(el))
+            return true;
+        return key === "Enter" && el.matches(SPACE_ACTIVATED_SELECTOR);
+    }
     isWidgetContent() {
         return this.dropdown.dropdownContent().isWidget();
     }
     resolveTriggerElement() {
         const el = this.host.nativeElement;
-        if (this.isNativelyFocusable(el))
+        if (this.isNativelyInteractive(el))
             return el;
         return el.querySelector(FOCUSABLE_SELECTOR$1) ?? el;
     }
-    isNativelyFocusable(el) {
-        return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
+    isNativelyInteractive(el) {
+        return el.matches(NATIVE_INTERACTIVE_SELECTOR);
     }
     openAndFocusFirst() {
         if (this.dropdown.isOpen()) {
@@ -616,7 +669,7 @@ class DropdownTriggerDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)", "focusout": "onFocusout($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
             type: Directive,
@@ -631,6 +684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             }], onKeydown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
+            }], onKeyup: [{
+                type: HostListener,
+                args: ["keyup", ["$event"]]
+            }], onFocusout: [{
+                type: HostListener,
+                args: ["focusout", ["$event"]]
             }] } });
 
 const DROPDOWN_API = new InjectionToken("DropdownApi");