@sdata/web-vue 3.13.0 → 3.14.0

package/es/time-picker/time-column.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,12 @@ import { isUndefined } from "../_utils/is.js";
 import { scrollTo } from "./utils/index.js";
 import { Fragment, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, toDisplayString, watch } from "vue";
 //#region components/time-picker/time-column.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["onClick"];
+var _hoisted_1 = { role: "listbox" };
+var _hoisted_2 = [
+	"aria-selected",
+	"aria-disabled",
+	"onClick"
+];
 var time_column_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TimePickerColumn" }), {}, {
 	__name: "time-column",
 	props: {
@@ -50,13 +55,16 @@ var time_column_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				ref_key: "refWrapper",
 				ref: refWrapper,
 				class: normalizeClass(`${__props.prefixCls}-column`)
-			}, [createElementVNode("ul", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item) => {
+			}, [createElementVNode("ul", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.value,
 					ref_for: true,
 					ref: (el) => {
 						onItemRef(el, item);
 					},
+					role: "option",
+					"aria-selected": item.selected ? "true" : "false",
+					"aria-disabled": item.disabled || void 0,
 					class: normalizeClass([`${__props.prefixCls}-cell`, {
 						[`${__props.prefixCls}-cell-disabled`]: item.disabled,
 						[`${__props.prefixCls}-cell-selected`]: item.selected
@@ -64,7 +72,7 @@ var time_column_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					onClick: () => {
 						onItemClick(item);
 					}
-				}, [createElementVNode("div", { class: normalizeClass(`${__props.prefixCls}-cell-inner`) }, toDisplayString(item.label), 3)], 10, _hoisted_1);
+				}, [createElementVNode("div", { class: normalizeClass(`${__props.prefixCls}-cell-inner`) }, toDisplayString(item.label), 3)], 10, _hoisted_2);
 			}), 128))])], 2);
 		};
 	}

package/es/time-picker/time-picker.vue_vue_type_script_setup_true_lang.js

@@ -376,7 +376,10 @@ var time_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"prevent-focus": true,
 				"unmount-on-close": __props.unmountOnClose,
 				"popup-container": __props.popupContainer
-			}, _objectSpread2({}, __props.triggerProps), { onPopupVisibleChange: onPanelVisibleChange }), {
+			}, _objectSpread2({}, __props.triggerProps), {
+				"aria-has-popup": "dialog",
+				onPopupVisibleChange: onPanelVisibleChange
+			}), {
 				content: withCtx(() => [createElementVNode("div", {
 					class: normalizeClass(`${unref(prefixCls)}-container`),
 					onClick: onPanelClick

package/es/tooltip/tooltip.vue_vue_type_script_setup_true_lang.js

@@ -80,6 +80,7 @@ var tooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				"animation-name": "zoom-in-fade-out",
 				"auto-fit-transform-origin": "",
 				role: "tooltip",
+				"aria-describedby-popup": "",
 				onPopupVisibleChange: handlePopupVisibleChange
 			}, {
 				content: withCtx(() => [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])]),

package/es/transfer/style/index.css

@@ -218,7 +218,7 @@
 }
 .sd-transfer-list-item-dragged {
   animation: sd-transfer-drag-item-blink 0.4s;
-  animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-transfer-operations {
   padding: 0 20px;

package/es/transfer/style/index.scss

@@ -243,7 +243,7 @@ $transfer-prefix-cls: string.unquote('#{theme.$prefix}-transfer');
 
     &-dragged {
       animation: #{theme.$prefix}-transfer-drag-item-blink 0.4s;
-      animation-timing-function: theme.$transition-timing-function-linear;
+      animation-timing-function: theme.$transition-timing-function-standard;
     }
   }
 

package/es/transfer/transfer-list-item.js

@@ -1,9 +1,10 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import Checkbox from "../checkbox/index.js";
 import { transferInjectionKey } from "./context.js";
-import { computed, createVNode, defineComponent, inject, mergeProps } from "vue";
+import { computed, createVNode, defineComponent, inject } from "vue";
 //#region components/transfer/transfer-list-item.tsx
 var transfer_list_item_default = /* @__PURE__ */ defineComponent({
 	name: "TransferListItem",
@@ -31,6 +32,12 @@ var transfer_list_item_default = /* @__PURE__ */ defineComponent({
 		const handleRemove = () => {
 			transferCtx === null || transferCtx === void 0 || transferCtx.moveTo([props.data.value], "source");
 		};
+		const handleRemoveKeydown = (ev) => {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				handleRemove();
+			}
+		};
 		return () => {
 			var _transferCtx$slots$it, _transferCtx$slots, _transferCtx$slots$it2;
 			return createVNode("div", {
@@ -52,7 +59,14 @@ var transfer_list_item_default = /* @__PURE__ */ defineComponent({
 					label: props.data.label,
 					value: props.data.value
 				})) !== null && _transferCtx$slots$it3 !== void 0 ? _transferCtx$slots$it3 : props.data.label];
-			} }), props.allowClear && !props.disabled && createVNode(icon_hover_default, mergeProps({ "class": `${prefixCls}-remove-btn` }, { onClick: handleRemove }), { default: () => [createVNode(IconClose, null, null)] })]);
+			} }), props.allowClear && !props.disabled && createVNode("span", {
+				"class": `${prefixCls}-remove-btn`,
+				"role": "button",
+				"tabindex": "0",
+				"aria-label": "Remove",
+				"onClick": handleRemove,
+				"onKeydown": handleRemoveKeydown
+			}, [createVNode(icon_hover_default, null, { default: () => [createVNode(IconClose, null, null)] })])]);
 		};
 	}
 });

package/es/tree/base-node.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,15 @@ import node_switcher_default from "./node-switcher.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useSlots, withCtx } from "vue";
 import { onLongPress, useSwipe } from "@vueuse/core";
 //#region components/tree/base-node.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-level", "data-key"];
+var _hoisted_1 = [
+	"data-level",
+	"data-key",
+	"tabindex",
+	"aria-level",
+	"aria-expanded",
+	"aria-selected",
+	"aria-disabled"
+];
 var _hoisted_2 = ["draggable"];
 var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "BaseTreeNode" }), {}, {
 	__name: "base-node",
@@ -192,6 +200,11 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			var _treeContext$onNodeEv;
 			(_treeContext$onNodeEv = treeContext.onNodeEvent) === null || _treeContext$onNodeEv === void 0 || _treeContext$onNodeEv.call(treeContext, eventName, key.value, e);
 		}
+		function onTreeitemKeydown(e) {
+			var _treeContext$onNodeKe;
+			onNodeDomEvent("keydown", e);
+			(_treeContext$onNodeKe = treeContext.onNodeKeydown) === null || _treeContext$onNodeKe === void 0 || _treeContext$onNodeKe.call(treeContext, key.value, e);
+		}
 		function onDragStart(e) {
 			if (!draggable.value) return;
 			e.stopPropagation();
@@ -229,7 +242,16 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(classNames.value),
 				"data-level": __props.level,
-				"data-key": unref(nodekey)
+				"data-key": unref(nodekey),
+				role: "treeitem",
+				tabindex: unref(treeContext).activeKey === unref(nodekey) ? 0 : -1,
+				"aria-level": __props.level + 1,
+				"aria-expanded": unref(isLeaf) ? void 0 : expanded.value,
+				"aria-selected": unref(selectable) ? selected.value : void 0,
+				"aria-disabled": unref(disabled) || void 0,
+				onKeydown: onTreeitemKeydown,
+				onKeyup: _cache[21] || (_cache[21] = ($event) => onNodeDomEvent("keyup", $event)),
+				onKeypress: _cache[22] || (_cache[22] = ($event) => onNodeDomEvent("keypress", $event))
 			}, [
 				createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-indent`) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.level, (i) => {
 					return openBlock(), createElementBlock("span", {
@@ -272,6 +294,7 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					disabled: unref(disableCheckbox) || unref(disabled),
 					"model-value": checked.value,
 					indeterminate: indeterminate.value,
+					tabindex: "-1",
 					"uninject-group-context": "",
 					onChange: onCheckboxChange
 				}, null, 8, [
@@ -310,10 +333,7 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					onTouchstart: _cache[17] || (_cache[17] = ($event) => onNodeDomEvent("touchstart", $event)),
 					onTouchmove: _cache[18] || (_cache[18] = ($event) => onNodeDomEvent("touchmove", $event)),
 					onTouchend: _cache[19] || (_cache[19] = ($event) => onNodeDomEvent("touchend", $event)),
-					onTouchcancel: _cache[20] || (_cache[20] = ($event) => onNodeDomEvent("touchcancel", $event)),
-					onKeydown: _cache[21] || (_cache[21] = ($event) => onNodeDomEvent("keydown", $event)),
-					onKeyup: _cache[22] || (_cache[22] = ($event) => onNodeDomEvent("keyup", $event)),
-					onKeypress: _cache[23] || (_cache[23] = ($event) => onNodeDomEvent("keypress", $event))
+					onTouchcancel: _cache[20] || (_cache[20] = ($event) => onNodeDomEvent("touchcancel", $event))
 				}, [_ctx.$slots.icon || __props.icon || treeNodeIcon.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass([`${unref(prefixCls)}-icon`, `${unref(prefixCls)}-custom-icon`])
@@ -337,7 +357,7 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					node: treeNodeData.value
 				}, nodeStatus), null, 16, ["node"])) : (openBlock(), createBlock(unref(IconDragDotVertical), { key: 3 }))], 2)) : createCommentVNode("", true)], 2)], 42, _hoisted_2),
 				extra.value ? (openBlock(), createBlock(resolveDynamicComponent(extra.value), { key: 2 })) : createCommentVNode("", true)
-			], 10, _hoisted_1);
+			], 42, _hoisted_1);
 		};
 	}
 }));

package/es/tree/context.d.ts

@@ -19,6 +19,7 @@ export type TreeContext = Readonly<{
     expandedKeys: TreeNodeKey[];
     loadingKeys: TreeNodeKey[];
     currentExpandKeys: TreeNodeKey[];
+    activeKey?: TreeNodeKey;
     onLoadMore?: (key: TreeNodeKey) => void;
     onCheck: (checked: boolean, key: TreeNodeKey, e?: Event) => void;
     onSelect: (key: TreeNodeKey, e: Event) => void;
@@ -31,6 +32,7 @@ export type TreeContext = Readonly<{
     onDrop?: (key: TreeNodeKey, dropPosition: DropPosition, e: DragEvent) => void;
     allowDrop?: (key: TreeNodeKey, dropPosition: DropPosition) => boolean;
     onNodeEvent?: (eventName: TreeNodeDomEventName, key: TreeNodeKey, e: Event) => void;
+    onNodeKeydown?: (key: TreeNodeKey, e: KeyboardEvent) => void;
     onNodeLongPress?: (key: TreeNodeKey, e: PointerEvent) => void;
     onNodeSwipe?: (eventName: TreeNodeSwipeEventName, key: TreeNodeKey, e: TouchEvent, data: TreeNodeSwipeEventData) => void;
 }>;

package/es/tree/style/index.css

@@ -120,7 +120,7 @@
 }
 .sd-tree-node-selected .sd-tree-node-title, .sd-tree-node-selected .sd-tree-node-title:hover {
   color: rgb(var(--sd-primary-6));
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tree-node-disabled-selectable .sd-tree-node-title,
 .sd-tree-node-disabled-selectable .sd-tree-node-title:hover, .sd-tree-node-disabled .sd-tree-node-title,

package/es/tree/style/index.scss

@@ -157,7 +157,7 @@ $tree-node-prefix-cls: string.unquote('#{theme.$prefix}-tree-node');
     &-selected &-title,
     &-selected &-title:hover {
       color: $tree-color-title-text_active;
-      transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+      transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
     }
 
     &-disabled-selectable,

package/es/tree/tree.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray, isFunction, isUndefined } from "../_utils/is.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
 import virtual_list_default from "../_components/virtual-list/index.js";
 import usePickSlots from "../_hooks/use-pick-slots.js";
@@ -11,7 +12,7 @@ import { getCheckedStateByCheck, isNodeCheckable } from "./utils/check-utils.js"
 import { TreeInjectionKey } from "./context.js";
 import useCheckedState from "./hooks/use-checked-state.js";
 import node_default from "./node.js";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, toRefs, unref, useSlots, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, toRefs, unref, useSlots, watch, withCtx } from "vue";
 //#region components/tree/tree.vue?vue&type=script&setup=true&lang.ts
 var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Tree" }), {}, {
 	__name: "tree",
@@ -340,6 +341,7 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			};
 		});
 		const virtualListRef = ref(null);
+		const rootEl = ref(null);
 		const virtualListVersion = ref(0);
 		const virtualListKey = computed(() => `tree-virtual-list-${virtualListVersion.value}`);
 		const switcherIcon = usePickSlots(slots, "switcher-icon");
@@ -421,6 +423,78 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			});
 			return uniqueNodeList;
 		});
+		const activeKey = ref(void 0);
+		const effectiveActiveKey = computed(() => {
+			var _visibleTreeNodeList$;
+			if (activeKey.value !== void 0) return activeKey.value;
+			const selected = mergedSelectedKeys.value.find((k) => key2TreeNode.value.has(k));
+			if (selected !== void 0) return selected;
+			return (_visibleTreeNodeList$ = visibleTreeNodeList.value[0]) === null || _visibleTreeNodeList$ === void 0 ? void 0 : _visibleTreeNodeList$.key;
+		});
+		function focusNodeKey(targetKey) {
+			activeKey.value = targetKey;
+			nextTick(() => {
+				var _rootEl$value;
+				const el = (_rootEl$value = rootEl.value) === null || _rootEl$value === void 0 ? void 0 : _rootEl$value.querySelector(`[data-key="${CSS.escape(String(targetKey))}"]`);
+				el === null || el === void 0 || el.focus();
+			});
+		}
+		function onNodeKeydown(key, e) {
+			var _node$children;
+			const list = visibleTreeNodeList.value;
+			const idx = list.findIndex((n) => n.key === key);
+			if (idx === -1) return;
+			const node = list[idx];
+			const hasChildren = !node.isLeaf && Boolean((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length);
+			const isExpanded = mergedExpandedKeys.value.includes(key);
+			switch (e.key) {
+				case KEYBOARD_KEY.ARROW_DOWN:
+					e.preventDefault();
+					if (list[idx + 1]) focusNodeKey(list[idx + 1].key);
+					break;
+				case KEYBOARD_KEY.ARROW_UP:
+					e.preventDefault();
+					if (list[idx - 1]) focusNodeKey(list[idx - 1].key);
+					break;
+				case KEYBOARD_KEY.HOME:
+					e.preventDefault();
+					if (list[0]) focusNodeKey(list[0].key);
+					break;
+				case KEYBOARD_KEY.END:
+					e.preventDefault();
+					if (list.length) focusNodeKey(list[list.length - 1].key);
+					break;
+				case KEYBOARD_KEY.ARROW_RIGHT:
+					e.preventDefault();
+					if (hasChildren && !isExpanded) onExpand(true, key, e);
+					else if (hasChildren && isExpanded) {
+						var _node$children2;
+						const firstChild = (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2[0];
+						if (firstChild) focusNodeKey(firstChild.key);
+					}
+					break;
+				case KEYBOARD_KEY.ARROW_LEFT:
+					e.preventDefault();
+					if (hasChildren && isExpanded) onExpand(false, key, e);
+					else {
+						const parents = node.pathParentKeys;
+						if (parents.length) focusNodeKey(parents[parents.length - 1]);
+					}
+					break;
+				case KEYBOARD_KEY.ENTER:
+				case KEYBOARD_KEY.SPACE:
+					if (node.checkable && !node.disableCheckbox && !node.disabled) {
+						e.preventDefault();
+						onCheck(!mergedCheckedKeys.value.includes(key), key, e);
+						break;
+					}
+					if (node.selectable && !node.disabled) {
+						e.preventDefault();
+						onSelect(key, e);
+					}
+					break;
+			}
+		}
 		function getPublicCheckedKeys(rawCheckedKeys, rawCheckedStrategy = checkedStrategy.value) {
 			let publicCheckedKeys = [...rawCheckedKeys];
 			if (rawCheckedStrategy === "parent") publicCheckedKeys = rawCheckedKeys.filter((_key) => {
@@ -717,6 +791,7 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			expandedKeys: mergedExpandedKeys,
 			loadingKeys,
 			currentExpandKeys,
+			activeKey: effectiveActiveKey,
 			onLoadMore: computed(() => (loadMore === null || loadMore === void 0 ? void 0 : loadMore.value) ? function() {
 				var _ref = _asyncToGenerator(function* (key) {
 					if (!isFunction(loadMore.value)) return;
@@ -744,6 +819,7 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			onExpand,
 			onExpandEnd,
 			onNodeEvent,
+			onNodeKeydown,
 			onNodeLongPress,
 			onNodeSwipe,
 			allowDrop(key, dropPosition) {
@@ -947,8 +1023,11 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
 				class: normalizeClass(classNames.value),
-				style: normalizeStyle(treeStyle.value)
+				style: normalizeStyle(treeStyle.value),
+				role: "tree"
 			}, [unref(virtualListProps) ? (openBlock(), createBlock(unref(virtual_list_default), mergeProps({
 				key: virtualListKey.value,
 				ref_key: "virtualListRef",

package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js

@@ -525,6 +525,12 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		};
 		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), mergedDisabled);
 		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
+		const triggerInputAttrs = computed(() => ({
+			"role": "combobox",
+			"aria-expanded": panelVisible.value,
+			"aria-haspopup": "listbox",
+			"aria-autocomplete": mergedAllowSearch.value ? "list" : "none"
+		}));
 		const setPanelVisible = (visible) => {
 			if (visible && props.readonly && !mergedDisabled.value) {
 				showReadonlyTip();
@@ -603,6 +609,7 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					"popup-container": __props.popupContainer,
 					"click-to-close": !Boolean(unref(mergedAllowSearch)),
 					"auto-fit-transform-origin": "",
+					"aria-has-popup": "listbox",
 					onPopupVisibleChange: unref(onVisibleChange)
 				}), {
 					content: withCtx(() => [createElementVNode("div", {
@@ -671,7 +678,8 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						error: __props.error,
 						bordered: __props.border,
 						placeholder: __props.placeholder,
-						multiple: isMultiple.value
+						multiple: isMultiple.value,
+						"input-attrs": triggerInputAttrs.value
 					}, _ctx.$attrs, {
 						onInputValueChange: unref(onSearchValueChange),
 						onClear: onInnerClear,
@@ -711,6 +719,7 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						"bordered",
 						"placeholder",
 						"multiple",
+						"input-attrs",
 						"onInputValueChange"
 					])])]),
 					_: 3

package/es/trigger/index.d.ts

@@ -145,6 +145,18 @@ declare const Trigger: {
             type: NumberConstructor;
             default: number;
         };
+        escToClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        ariaHasPopup: {
+            type: import("vue").PropType<boolean | "menu" | "listbox" | "tree" | "grid" | "dialog">;
+            default: undefined;
+        };
+        ariaDescribedbyPopup: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         onHide?: (() => any) | undefined;
         onResize?: (() => any) | undefined;
@@ -186,6 +198,9 @@ declare const Trigger: {
         preventFocus: boolean;
         scrollToClose: boolean;
         scrollToCloseDistance: number;
+        escToClose: boolean;
+        ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+        ariaDescribedbyPopup: boolean;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -336,6 +351,18 @@ declare const Trigger: {
             type: NumberConstructor;
             default: number;
         };
+        escToClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        ariaHasPopup: {
+            type: import("vue").PropType<boolean | "menu" | "listbox" | "tree" | "grid" | "dialog">;
+            default: undefined;
+        };
+        ariaDescribedbyPopup: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         onHide?: (() => any) | undefined;
         onResize?: (() => any) | undefined;
@@ -371,6 +398,9 @@ declare const Trigger: {
         preventFocus: boolean;
         scrollToClose: boolean;
         scrollToCloseDistance: number;
+        escToClose: boolean;
+        ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+        ariaDescribedbyPopup: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -518,6 +548,18 @@ declare const Trigger: {
         type: NumberConstructor;
         default: number;
     };
+    escToClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ariaHasPopup: {
+        type: import("vue").PropType<boolean | "menu" | "listbox" | "tree" | "grid" | "dialog">;
+        default: undefined;
+    };
+    ariaDescribedbyPopup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onHide?: (() => any) | undefined;
     onResize?: (() => any) | undefined;
@@ -559,6 +601,9 @@ declare const Trigger: {
     preventFocus: boolean;
     scrollToClose: boolean;
     scrollToCloseDistance: number;
+    escToClose: boolean;
+    ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+    ariaDescribedbyPopup: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;
 };

package/es/trigger/trigger.d.ts

@@ -144,6 +144,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    escToClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ariaHasPopup: {
+        type: PropType<boolean | "menu" | "listbox" | "tree" | "grid" | "dialog">;
+        default: undefined;
+    };
+    ariaDescribedbyPopup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:popupVisible': (_visible: boolean) => true;
     popupVisibleChange: (_visible: boolean) => true;
@@ -293,6 +305,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    escToClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ariaHasPopup: {
+        type: PropType<boolean | "menu" | "listbox" | "tree" | "grid" | "dialog">;
+        default: undefined;
+    };
+    ariaDescribedbyPopup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onHide?: (() => any) | undefined;
     onResize?: (() => any) | undefined;
@@ -328,5 +352,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preventFocus: boolean;
     scrollToClose: boolean;
     scrollToCloseDistance: number;
+    escToClose: boolean;
+    ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+    ariaDescribedbyPopup: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/trigger/trigger.js

@@ -4,6 +4,7 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isEmptyChildren, mergeFirstChild } from "../_utils/vue-utils.js";
 import { off, on } from "../_utils/dom.js";
 import { throttleByRaf } from "../_utils/throttle-by-raf.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import { omit } from "../_utils/omit.js";
 import client_only_default from "../_components/client-only.js";
 import { useFirstElement } from "../_hooks/use-first-element.js";
@@ -14,7 +15,7 @@ import { useResizeObserver as useResizeObserver$1 } from "../_hooks/use-resize-o
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
 import { triggerInjectionKey } from "./context.js";
 import { getArrowStyle, getElementScrollRect, getPopupStyle, getScrollElements, getTransformOrigin } from "./utils.js";
-import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 //#region components/trigger/trigger.tsx
 var TRIGGER_EVENTS = [
@@ -301,6 +302,31 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		scrollToCloseDistance: {
 			type: Number,
 			default: 0
+		},
+		/**
+		* @zh 是否支持 ESC 键关闭弹出层
+		* @en Whether to close the popup with the ESC key
+		*/
+		escToClose: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 弹出层类型，用于触发器的 `aria-haspopup`。设置后会自动给触发器加 `aria-haspopup` / `aria-expanded` / `aria-controls`，并给弹出层加 id。
+		* @en Popup type for the trigger's `aria-haspopup`. When set, the trigger automatically gets `aria-haspopup` / `aria-expanded` / `aria-controls`, and the popup gets an id.
+		* @values true, 'menu', 'listbox', 'tree', 'grid', 'dialog'
+		*/
+		ariaHasPopup: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		/**
+		* @zh 是否给触发器加 `aria-describedby` 指向弹出层（tooltip 模式用）。弹出层显示时才挂。
+		* @en Whether to add `aria-describedby` on the trigger pointing to the popup (tooltip pattern). Only applied while the popup is visible.
+		*/
+		ariaDescribedbyPopup: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: {
@@ -333,6 +359,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 	setup(props, { emit, slots, attrs }) {
 		const triggerEventAttrs = attrs;
 		const prefixCls = getPrefixCls("trigger");
+		const popupId = `${prefixCls}-popup-${getCurrentInstance().uid}`;
 		const popupAttrs = computed(() => omit(attrs, TRIGGER_EVENTS));
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		const themePopupContainer = inject(themePopupContainerInjectionKey, void 0);
@@ -361,6 +388,16 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			var _props$popupVisible;
 			return (_props$popupVisible = props.popupVisible) !== null && _props$popupVisible !== void 0 ? _props$popupVisible : popupVisible.value;
 		});
+		const firstChildAria = computed(() => {
+			const aria = {};
+			if (props.ariaHasPopup !== void 0) {
+				aria["aria-haspopup"] = props.ariaHasPopup === true ? "true" : props.ariaHasPopup;
+				aria["aria-expanded"] = computedVisible.value;
+				aria["aria-controls"] = computedVisible.value ? popupId : void 0;
+			}
+			if (props.ariaDescribedbyPopup) aria["aria-describedby"] = computedVisible.value ? popupId : void 0;
+			return aria;
+		});
 		const { teleportContainer, containerRef } = useTeleportContainer({
 			popupContainer: mergedPopupContainer,
 			visible: computedVisible,
@@ -551,7 +588,12 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			if (getChildElements().some((element) => element.contains(target))) return;
 			changeVisible(false);
 		};
-		useEventListener(computed(() => typeof document === "undefined" ? void 0 : document), "contextmenu", handleOutsideContextmenu, { capture: true });
+		const documentRef = computed(() => typeof document === "undefined" ? void 0 : document);
+		useEventListener(documentRef, "contextmenu", handleOutsideContextmenu, { capture: true });
+		const handleKeydown = (ev) => {
+			if (props.escToClose && computedVisible.value && ev.key === KEYBOARD_KEY.ESC) changeVisible(false);
+		};
+		useEventListener(documentRef, "keydown", handleKeydown);
 		const isExceedThreshold = (oldPosition, element) => {
 			const [scrollTop, scrollLeft] = oldPosition;
 			const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = element;
@@ -663,19 +705,19 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			var _slots$default, _slots$default2;
 			children.value = (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [];
-			mergeFirstChild(children.value, {
-				class: triggerCls.value,
+			mergeFirstChild(children.value, _objectSpread2(_objectSpread2({ class: triggerCls.value }, firstChildAria.value), {}, {
 				onClick: handleClick,
 				onMouseenter: handleMouseEnter,
 				onMouseleave: handleMouseLeave,
 				onFocusin: handleFocusin,
 				onFocusout: handleFocusout,
 				onContextmenu: handleContextmenuWithContext
-			});
+			}));
 			return createVNode(Fragment, null, [props.autoFixPosition ? createVNode(resize_observer_v2_default, { "onResize": onTargetResize }, { default: () => [children.value] }) : children.value, createVNode(client_only_default, null, { default: () => [createVNode(Teleport, {
 				"to": teleportContainer.value,
 				"disabled": !props.renderToBody
 			}, { default: () => [(!props.unmountOnClose || computedVisible.value || mounted.value) && !hidePopup.value && createVNode(resize_observer_v2_default, { "onResize": handleResize }, { default: () => [createVNode("div", mergeProps({
+				"id": popupId,
 				"ref": popupRef,
 				"class": [`${prefixCls}-popup`, `${prefixCls}-position-${popupPosition.value}`],
 				"style": _objectSpread2(_objectSpread2({}, popupStyle.value), {}, {