@sdata/web-vue 3.13.0 → 3.15.0

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/node-switcher.vue_vue_type_script_lang.js

@@ -1,8 +1,8 @@
 import icon_hover_default from "../_components/icon-hover.js";
 import IconLoading from "../icon/icon-loading/index.js";
 import usePickSlots from "../_hooks/use-pick-slots.js";
-import useTreeContext from "./hooks/use-tree-context.js";
 import IconCaretDown from "../icon/icon-caret-down/index.js";
+import useTreeContext from "./hooks/use-tree-context.js";
 import IconFile from "../icon/icon-file/index.js";
 import { defineComponent, h, toRefs } from "vue";
 //#region components/tree/node-switcher.vue?vue&type=script&lang.tsx

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), {}, {

package/es/typography/edit-content.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import { useI18n } from "../locale/index.js";
 import Input from "../input/index.js";
 import { createElementBlock, createVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, unref, withKeys } from "vue";
 //#region components/typography/edit-content.vue?vue&type=script&setup=true&lang.ts
@@ -16,8 +17,9 @@ var edit_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { t } = useI18n();
 		const classNames = [`${getPrefixCls("typography")}-edit-content`];
-		const inputRef = ref();
+		const rootRef = ref();
 		function onChange(value) {
 			emit("update:text", value);
 			emit("change", value);
@@ -26,24 +28,31 @@ var edit_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			emit("end");
 		}
 		onMounted(() => {
-			if (!inputRef.value || !inputRef.value.$el) return;
-			const inputEl = inputRef.value.$el.querySelector("input");
+			var _rootRef$value;
+			const inputEl = (_rootRef$value = rootRef.value) === null || _rootRef$value === void 0 ? void 0 : _rootRef$value.querySelector("input");
 			if (!inputEl) return;
-			inputEl.focus && inputEl.focus();
+			inputEl.focus();
 			const { length } = inputEl.value;
 			inputEl.setSelectionRange(length, length);
 		});
 		const onBlur = onEnd;
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(classNames) }, [createVNode(unref(Input), {
-				ref_key: "inputRef",
-				ref: inputRef,
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(classNames)
+			}, [createVNode(unref(Input), {
 				"auto-size": "",
+				"input-attrs": { "aria-label": unref(t)("a11y.editText") },
 				"model-value": __props.text,
 				onBlur: unref(onBlur),
 				onInput: onChange,
 				onKeydown: withKeys(onEnd, ["enter"])
-			}, null, 8, ["model-value", "onBlur"])]);
+			}, null, 8, [
+				"input-attrs",
+				"model-value",
+				"onBlur"
+			])], 512);
 		};
 	}
 }));

package/es/typography/operations.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconCheckCircleFill from "../icon/icon-check-circle-fill/index.js";
 import { useI18n } from "../locale/index.js";
 import Tooltip from "../tooltip/index.js";
@@ -7,6 +8,8 @@ import IconCopy from "../icon/icon-copy/index.js";
 import IconEdit from "../icon/icon-edit/index.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 //#region components/typography/operations.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["aria-label"];
 var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TypographyOperations" }), {}, {
 	__name: "operations",
 	props: {
@@ -58,6 +61,24 @@ var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		function onExpandClick() {
 			emit("expand");
 		}
+		function onEditKeydown(ev) {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				onEditClick();
+			}
+		}
+		function onCopyKeydown(ev) {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				onCopyClick();
+			}
+		}
+		function onExpandKeydown(ev) {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				onExpandClick();
+			}
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				__props.editable ? (openBlock(), createBlock(unref(Tooltip), mergeProps({
@@ -66,8 +87,12 @@ var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				}, __props.editTooltipProps), {
 					default: withCtx(() => [createElementVNode("span", {
 						class: normalizeClass(`${unref(prefixCls)}-operation-edit`),
-						onClick: withModifiers(onEditClick, ["stop"])
-					}, [createVNode(unref(IconEdit))], 2)]),
+						role: "button",
+						tabindex: "0",
+						"aria-label": unref(t)("typography.edit"),
+						onClick: withModifiers(onEditClick, ["stop"]),
+						onKeydown: onEditKeydown
+					}, [createVNode(unref(IconEdit))], 42, _hoisted_1)]),
 					_: 1
 				}, 16, ["content"])) : createCommentVNode("", true),
 				__props.copyable ? (openBlock(), createBlock(unref(Tooltip), normalizeProps(mergeProps({ key: 1 }, __props.copyTooltipProps)), {
@@ -77,15 +102,22 @@ var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 							[`${unref(prefixCls)}-operation-copied`]: __props.isCopied,
 							[`${unref(prefixCls)}-operation-copy`]: !__props.isCopied
 						}),
-						onClick: withModifiers(onCopyClick, ["stop"])
-					}, [renderSlot(_ctx.$slots, "copy-icon", { copied: __props.isCopied }, () => [__props.isCopied ? (openBlock(), createBlock(unref(IconCheckCircleFill), { key: 0 })) : (openBlock(), createBlock(unref(IconCopy), { key: 1 }))])], 2)]),
+						role: "button",
+						tabindex: "0",
+						"aria-label": __props.isCopied ? unref(t)("typography.copied") : unref(t)("typography.copy"),
+						onClick: withModifiers(onCopyClick, ["stop"]),
+						onKeydown: onCopyKeydown
+					}, [renderSlot(_ctx.$slots, "copy-icon", { copied: __props.isCopied }, () => [__props.isCopied ? (openBlock(), createBlock(unref(IconCheckCircleFill), { key: 0 })) : (openBlock(), createBlock(unref(IconCopy), { key: 1 }))])], 42, _hoisted_2)]),
 					_: 3
 				}, 16)) : createCommentVNode("", true),
 				showExpand.value ? (openBlock(), createElementBlock("a", {
 					key: 2,
 					class: normalizeClass(`${unref(prefixCls)}-operation-expand`),
-					onClick: withModifiers(onExpandClick, ["stop"])
-				}, [renderSlot(_ctx.$slots, "expand-node", { expanded: __props.expanded }, () => [createTextVNode(toDisplayString(__props.expanded ? unref(t)("typography.collapse") : unref(t)("typography.expand")), 1)])], 2)) : createCommentVNode("", true)
+					role: "button",
+					tabindex: "0",
+					onClick: withModifiers(onExpandClick, ["stop"]),
+					onKeydown: onExpandKeydown
+				}, [renderSlot(_ctx.$slots, "expand-node", { expanded: __props.expanded }, () => [createTextVNode(toDisplayString(__props.expanded ? unref(t)("typography.collapse") : unref(t)("typography.expand")), 1)])], 34)) : createCommentVNode("", true)
 			], 64);
 		};
 	}

package/es/typography/style/index.css

@@ -134,7 +134,7 @@
   background-color: transparent;
   border-radius: 2px;
   cursor: pointer;
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-typography-operation-copy:hover {
   color: var(--sd-color-text-2);
@@ -150,7 +150,7 @@
   background-color: transparent;
   border-radius: 2px;
   cursor: pointer;
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-typography-operation-edit:hover {
   color: var(--sd-color-text-2);

package/es/typography/style/index.scss

@@ -152,7 +152,7 @@ $typography-prefix-cls: string.unquote('#{theme.$prefix}-typography');
     border-radius: 2px;
     cursor: pointer;
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
 
     &:hover {
       color: $typography-color-icon-copy_hover;
@@ -172,7 +172,7 @@ $typography-prefix-cls: string.unquote('#{theme.$prefix}-typography');
     border-radius: 2px;
     cursor: pointer;
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
 
     &:hover {
       color: $typography-color-icon-edit_hover;