@iyulab/editor-components 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.5.1] - 2026-09-15
+
+### Fixed
+
+- **A link could not be edited or removed from the keyboard in `u-text-editor`.** The link
+  tooltip's **Edit**/**Save** and **Remove** controls are anchors without `href`, drawn by Quill, so
+  they took no focus. They are now exposed as buttons in the tab order, and Enter or Space activates
+  them (Quill's own click handling is unchanged).
+
 ## [0.5.0] - 2026-09-13
 
 ### Changed

package/README.md

@@ -96,6 +96,18 @@ Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
 - `clear()`: 모든 내용 삭제 (프로그램적 — `change` 미발화)
 - `focus()`: 에디터에 포커스
 
+## 접근성
+
+기준판은 **WCAG 2.2** 입니다. 아래는 이 패키지가 **테스트로 재서 보장하는 것**이고, 그 밖의
+성공 기준까지 포함한 전체 준수 선언이 아닙니다.
+
+| 성공 기준 | 보장 | 어디서 재는가 |
+|---|---|---|
+| SC 2.5.8 타깃 크기(최소) | `u-text-editor` 의 포인터 타깃이 24×24 CSS px 이상이거나 간격 예외(중심 간 24px)를 충족하고, 그 좌표에서 실제로 눌린다 — Quill 이 그리는 툴바(선택기가 열린 상태·색 견본·링크 툴팁 포함)도 잰다 | `tests/browser/target-size.browser.test.ts`(실제 크로미움) |
+| SC 2.1.1 키보드(포인터 커서 검사) | 포인터 커서를 보이면서 상호작용 요소가 아닌 것이 없다 — Quill 이 `href` 없는 앵커로 그리는 링크 툴팁의 편집·제거도 버튼 역할로 포커스를 받고 Enter/Space 로 눌린다 | `tests/browser/target-size.browser.test.ts` · `tests/browser/text-editor-link-tooltip-keyboard.browser.test.ts` |
+
+`u-code-editor` 는 스스로 렌더하는 조작부가 없어(액션은 소비자가 `header-actions` 슬롯으로 넣는다) 이 게이트의 대상이 아닙니다 — 슬롯에 넣는 버튼의 크기는 넣는 쪽이 정합니다.
+
 ## 이벤트
 
 `change`는 네이티브 폼 컨트롤 규약을 따라 **사용자 편집에서만** 발화합니다. 프로그램적 `value` 세팅·`setHTML()`/`setDelta()`/`clear()`는 발화하지 않으므로, React 등 controlled 래퍼에서 에코 루프 없이 안전하게 바인딩할 수 있습니다.

package/dist/components/text-editor/UTextEditor.d.ts

@@ -39,6 +39,12 @@ export declare class UTextEditor extends UElement {
     private quill;
     disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * snow 테마의 링크 툴팁은 «Edit/Save» 와 «Remove» 를 `href` 없는 `<a>` 로 그린다 — 포커스를 받지 못하고 Enter 로 눌리지
+     * 않아 키보드로는 링크를 편집·제거할 수 없었다(Quill 마크업이라 우리 템플릿 밖이다). Quill 이 붙인 클릭 처리는 그대로 두고,
+     * 두 앵커를 버튼 역할·탭 정지로 드러내고 Enter/Space 를 클릭으로 옮긴다. 이름은 테마 시트의 생성 콘텐츠(`Edit`·`Remove`)다.
+     */
+    private enhanceLinkTooltipKeyboard;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     /** HTML을 Quill Delta로 변환해 silent source로 주입한다 — 프로그램적 콘텐츠 세팅이
      *  text-change(→ change 이벤트)로 위장되지 않도록 하기 위함. */

package/dist/components/text-editor/UTextEditor.js

@@ -74,6 +74,7 @@ var UTextEditor = class UTextEditor extends UElement {
 			placeholder: this.placeholder,
 			modules: { toolbar: this.toolbar || defaultToolbar }
 		});
+		this.enhanceLinkTooltipKeyboard(this.quill);
 		if (this.value) this.setQuillContents(this.value);
 		const quill = this.quill;
 		quill.on("text-change", (_delta, _oldDelta, source) => {
@@ -91,6 +92,27 @@ var UTextEditor = class UTextEditor extends UElement {
 			}));
 		});
 	}
+	/**
+	* snow 테마의 링크 툴팁은 «Edit/Save» 와 «Remove» 를 `href` 없는 `<a>` 로 그린다 — 포커스를 받지 못하고 Enter 로 눌리지
+	* 않아 키보드로는 링크를 편집·제거할 수 없었다(Quill 마크업이라 우리 템플릿 밖이다). Quill 이 붙인 클릭 처리는 그대로 두고,
+	* 두 앵커를 버튼 역할·탭 정지로 드러내고 Enter/Space 를 클릭으로 옮긴다. 이름은 테마 시트의 생성 콘텐츠(`Edit`·`Remove`)다.
+	*/
+	enhanceLinkTooltipKeyboard(quill) {
+		const root = quill.theme.tooltip?.root;
+		if (!root) return;
+		const ACTIONS = "a.ql-action, a.ql-remove";
+		for (const a of Array.from(root.querySelectorAll(ACTIONS))) {
+			a.setAttribute("role", "button");
+			a.setAttribute("tabindex", "0");
+		}
+		root.addEventListener("keydown", (e) => {
+			const target = e.target;
+			if ((e.key === "Enter" || e.key === " ") && target.matches(ACTIONS)) {
+				e.preventDefault();
+				target.click();
+			}
+		});
+	}
 	async updated(changedProperties) {
 		super.updated(changedProperties);
 		await this.updateComplete;

package/dist/components/text-editor/UTextEditor.styles.js

@@ -25,7 +25,7 @@ var styles = css`
   /* 호스트는 자르지 않는다 — Quill 의 떠 있는 UI(선택기 목록 · 링크 툴팁)는 편집기 상자 밖으로 나갈 수 있어야 한다.
      종전 overflow: hidden 은 짧은 편집기에서 그것들을 잘라 누를 수 없게 만들었다. 둥근 모서리는 배경을 칠하는
      머리글(과 머리글이 없을 때의 툴바)이 자기 위 모서리를 둥글게 해서 지킨다. */
-  /* 세로 flex 인 이유 — 호스트 상자가 높이의 주인이다(형제 u-code-editor 와 같은 계약, HD-60).
+  /* 세로 flex 인 이유 — 호스트 상자가 높이의 주인이다(형제 u-code-editor 와 같은 계약).
      소비자가 호스트에 CSS 높이를 주면 머리글은 고정이고 편집 영역이 나머지를 채운다. 주지 않으면
      편집 영역은 자기 기본 높이(height 프로퍼티)로 서고 호스트는 그 합만큼 자란다 — 종전과 같은 모습이다. */
   :host {
@@ -124,7 +124,7 @@ var styles = css`
     color: var(--u-txt-color, #212121);
   }
 
-  /* 🔴Quill 이 그리는 타깃의 치수 — 우리가 덮어쓴다(사람 결정 HD-58 ⒜). 소비자가 보는 것은 우리 컴포넌트이고,
+  /* 🔴Quill 이 그리는 타깃의 치수 — 우리가 덮어쓴다. 소비자가 보는 것은 우리 컴포넌트이고,
      WCAG 2.2 SC 2.5.8 은 «누가 그렸는가» 를 묻지 않는다.
      ⑴ 색 견본 16×16(붙어 있어 간격 예외도 서지 않는다) → 24×24 · 한 줄 일곱 칸이라 목록 폭도 함께(7×(24+4)+10).
      ⑵ 링크 툴팁의 Edit·Remove 는 줄 높이가 26 인데 인라인이라 실제 높이가 19 였다 → inline-block 으로 26. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "keywords": [
     "iyulab",
     "web-components",
@@ -76,7 +76,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^10.1.0",
     "glob": "^13.0.6",
     "globals": "^17.7.0",
@@ -85,7 +85,7 @@
     "typescript-eslint": "^8.64.0",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   },
   "overrides": {
     "dompurify": "^3.4.13"