@iyulab/editor-components 0.6.3 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.7.0] - 2026-10-06
+
+### Added
+
+- **`u-code-editor` tells a screen reader the way out.** While editable, Tab indents and `Ctrl+M` (macOS
+  `Ctrl+Shift+M`) switches it to moving the focus; that method is now the editing area's accessible description,
+  announced on entering — WCAG 2.1.2 allows a non-standard exit when the user is told it, and 0.6.4 left the telling
+  to each page. Localized through `Locale` (`editorLocale`, English and Korean built in). Read-only has no hint (Tab
+  already leaves there). `no-tab-hint` drops it for a page that states the method itself.
+
+### Fixed
+
+- **The editing area is named by `label`.** It was always "Editor content", whatever the header said; a label change
+  now renames it too.
+- **Changing `readOnly` after the editor was created takes effect.** It was only read at creation.
+
+### Changed
+
+- Requires `@iyulab/components` `>=1.23.0` (`Locale.namespace`).
+
+## [0.6.4] - 2026-10-06
+
+### Documentation
+
+- **Keyboard exit** (WCAG 2.1.2) is now stated and tested: in `u-text-editor` Tab moves on to the next control; in `u-code-editor` Tab indents and **`Ctrl+M`** (macOS: `Ctrl+Shift+M`) switches Tab to moving the focus — the method a screen hosting a code editor should tell its users. README accessibility table and the skill references (`code-editor.md` · `text-editor.md`).
+
 ## [0.6.3] - 2026-10-06
 
 ### Documentation

package/README.md

@@ -131,6 +131,7 @@ Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
 | 성공 기준 | 보장 | 어디서 재는가 |
 |---|---|---|
 | SC 2.5.8 타깃 크기(최소) | `u-text-editor` 의 포인터 타깃이 24×24 CSS px 이상이거나 간격 예외(중심 간 24px)를 충족하고, 그 좌표에서 실제로 눌린다 — Quill 이 그리는 툴바(선택기가 열린 상태·색 견본·링크 툴팁 포함)도 잰다 | `tests/browser/target-size.browser.test.ts`(실제 크로미움) |
+| SC 2.1.2 키보드 함정 없음 | `u-text-editor` 안의 `Tab` 은 다음 컨트롤로 나간다(탭 문자를 넣지 않는다). `u-code-editor` 안의 `Tab` 은 들여쓰기이고, **`Ctrl+M`(macOS: `Ctrl+Shift+M`)** 이 Monaco 의 «Tab 으로 포커스 이동» 을 켜고 끈다 — 그 뒤의 `Tab` 은 편집기를 떠난다. 편집 가능한 동안 편집 영역의 접근성 설명이 이 방법을 말한다(로캘 · 읽기 전용에서는 Tab 이 이미 나가므로 없음 · `no-tab-hint` 로 끔). 편집 영역의 이름은 `label` | `tests/browser/keyboard-exit.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` 슬롯으로 넣는다) 이 게이트의 대상이 아닙니다 — 슬롯에 넣는 버튼의 크기는 넣는 쪽이 정합니다.

package/dist/components/code-editor/UCodeEditor.d.ts

@@ -9,8 +9,14 @@ export declare class UCodeEditor extends UElement {
     static styles: import('lit').CSSResultGroup[];
     /** Specifies whether the header should be displayed or not. @default false */
     headless: boolean;
-    /** The label text displayed in the header of the code editor. @default "Editor" */
+    /** The label text displayed in the header of the code editor — also the editing area's accessible name. @default "Editor" */
     label: string;
+    /**
+     * Do not attach the Tab hint. While editable, Tab indents and `Ctrl+M` (macOS `Ctrl+Shift+M`) switches it to moving
+     * the focus; the editing area carries that as its accessible description, so a screen reader user hears the way
+     * out when entering (WCAG 2.1.2). Set this when the page states the method itself. @default false
+     */
+    noTabHint: boolean;
     /** 편집기 테마. 문서 테마를 따라 자동으로 동기화된다(직접 지정해도 덮어쓰인다). */
     theme: "light" | "dark";
     /** Whether the editor should be in read-only mode, preventing user input. @default false */
@@ -31,6 +37,12 @@ export declare class UCodeEditor extends UElement {
     disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected updated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * The Tab hint as the editing area's description — only while editable: read-only, Monaco lets Tab leave the
+     * editor, so there is nothing to explain. The focusable node is Monaco's own (an EditContext `div` with
+     * `role="textbox"` where the browser supports it, a `textarea` elsewhere), so the description is set on it.
+     */
+    private describeInput;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/code-editor/UCodeEditor.js

@@ -1,6 +1,7 @@
 import "./UCodeEditor.worker.js";
 import _virtual_monaco_structure_css_default from "../../_virtual/_virtual_monaco-structure-css.js";
 import { styles } from "./UCodeEditor.styles.js";
+import { editorLocale } from "../../locale.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { html, unsafeCSS } from "lit";
@@ -15,6 +16,7 @@ var UCodeEditor = class UCodeEditor extends UElement {
 		super(..._args);
 		this.headless = false;
 		this.label = "Editor";
+		this.noTabHint = false;
 		this.theme = "light";
 		this.readOnly = false;
 		this.language = "json";
@@ -58,10 +60,12 @@ var UCodeEditor = class UCodeEditor extends UElement {
 			lineNumbersMinChars: 2,
 			lineDecorationsWidth: 1,
 			readOnly: this.readOnly,
+			ariaLabel: this.label,
 			value: this.value,
 			scrollBeyondLastLine: false,
 			scrollbar: { alwaysConsumeMouseWheel: false }
 		});
+		this.describeInput();
 		this.editor.onDidChangeModelContent(() => {
 			if (this.syncingValue) return;
 			this.value = this.editor.getValue();
@@ -80,6 +84,20 @@ var UCodeEditor = class UCodeEditor extends UElement {
 		}
 		if (changedProperties.has("theme") && this.editor) this.editor.updateOptions({ theme: this.theme === "light" ? "vs-light" : "vs-dark" });
 		if (changedProperties.has("language") && this.editor) monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
+		if (changedProperties.has("label") && this.editor) this.editor.updateOptions({ ariaLabel: this.label });
+		if (changedProperties.has("readOnly") && this.editor) this.editor.updateOptions({ readOnly: this.readOnly });
+		if ((changedProperties.has("noTabHint") || changedProperties.has("readOnly")) && this.editor) this.describeInput();
+	}
+	/**
+	* The Tab hint as the editing area's description — only while editable: read-only, Monaco lets Tab leave the
+	* editor, so there is nothing to explain. The focusable node is Monaco's own (an EditContext `div` with
+	* `role="textbox"` where the browser supports it, a `textarea` elsewhere), so the description is set on it.
+	*/
+	describeInput() {
+		const input = this.container.value?.querySelector("[role=\"textbox\"], textarea");
+		if (!input) return;
+		if (this.noTabHint || this.readOnly) input.removeAttribute("aria-describedby");
+		else input.setAttribute("aria-describedby", "tab-hint");
 	}
 	render() {
 		return html`
@@ -91,6 +109,7 @@ var UCodeEditor = class UCodeEditor extends UElement {
       <div class="editor">
         <main ${ref(this.container)}></main>
       </div>
+      <span id="tab-hint" hidden>${editorLocale.text("tabFocusHint")}</span>
     `;
 	}
 };
@@ -99,6 +118,10 @@ __decorate([property({
 	reflect: true
 }), __decorateMetadata("design:type", Boolean)], UCodeEditor.prototype, "headless", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "no-tab-hint"
+}), __decorateMetadata("design:type", Boolean)], UCodeEditor.prototype, "noTabHint", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "theme", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UCodeEditor.prototype, "readOnly", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "language", void 0);

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/code-editor/UCodeEditor.js';
 export * from './components/text-editor/UTextEditor.js';
+export * from './locale.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+import { editorLocale } from "./locale.js";
 import { UCodeEditor } from "./components/code-editor/UCodeEditor.js";
 import { UTextEditor } from "./components/text-editor/UTextEditor.js";
-export { UCodeEditor, UTextEditor };
+export { UCodeEditor, UTextEditor, editorLocale };

package/dist/locale.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Strings `@iyulab/editor-components` draws itself — registered in the shared `Locale` chain of
+ * `@iyulab/components`, so `Locale.set('ko')` reaches them. English and Korean are built in; add others with
+ * `editorLocale.register('<tag>', { … })`.
+ */
+export type EditorMessageKey = 'tabFocusHint';
+export declare const editorLocale: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<"tabFocusHint">;

package/dist/locale.js

@@ -0,0 +1,7 @@
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
+//#region src/locale.ts
+var editorLocale = Locale.namespace("editor-components");
+editorLocale.register("en", { tabFocusHint: "Tab indents. To move the focus out with Tab, press Ctrl+M first (Ctrl+Shift+M on macOS)." });
+editorLocale.register("ko", { tabFocusHint: "Tab 은 들여쓰기입니다. Tab 으로 편집기를 벗어나려면 먼저 Ctrl+M(macOS 는 Ctrl+Shift+M)을 누르세요." });
+//#endregion
+export { editorLocale };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -33,7 +33,9 @@
     "./dist/components/*/U*.js",
     "./src/components/*/U*.ts",
     "./dist/index.js",
-    "./src/index.ts"
+    "./src/index.ts",
+    "./dist/locale.js",
+    "./src/locale.ts"
   ],
   "exports": {
     ".": {
@@ -63,7 +65,7 @@
     "quill": "^2.0.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.15.0",
+    "@iyulab/components": ">=1.23.0",
     "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0",
     "monaco-editor": ">=0.56.0 <0.58.0"

package/skills/iyulab-editor-components/references/components/code-editor.md

@@ -22,9 +22,10 @@ Monaco Editor wrapped as a custom element. Syntax highlighting, per-language con
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `headless` | `boolean` | `false` | ✓ | Hides the header (label + `header-actions` slot) |
-| `label` | `string` | `'Editor'` | — | Header title text |
+| `label` | `string` | `'Editor'` | — | Header title text — also the editing area's accessible name |
 | `theme` | `'light' \| 'dark'` | `'light'` | — | Editor color theme. Synced automatically from `Theme.resolved()` on connect and on every `data-theme`/`theme` attribute mutation on `document.documentElement` — the declared default is overwritten before first render, and setting it directly is overwritten by the next sync |
-| `readOnly` | `boolean` | `false` | — | Prevents user input |
+| `readOnly` | `boolean` | `false` | — | Prevents user input (applies when changed after creation too) |
+| `noTabHint` | `boolean` | `false` | — | Attribute `no-tab-hint`. Drops the Tab hint from the editing area's description (see Keyboard) — for a page that states the method itself |
 | `language` | `string` | `'json'` | — | Monaco language id (`"javascript"`, `"typescript"`, …) |
 | `fontSize` | `number` | `14` | — | Editor font size in pixels |
 | `value` | `string` | `''` | — | Current text content |
@@ -64,6 +65,17 @@ other unchanged.
 |-------|--------|--------------|
 | `change` | none (plain `Event`) | Fired on user edits (`Monaco.onDidChangeModelContent`). Not fired for programmatic `value` assignment while Monaco already holds that value. Read the new content from `value` |
 
+## Keyboard
+
+`Tab` inside the editor indents — a code editor needs it — so `Tab` does not move the focus on its own.
+**`Ctrl+M`** (macOS: `Ctrl+Shift+M`) toggles Monaco's "Tab moves focus" mode; after it, `Tab` / `Shift+Tab`
+leave the editor. That is the keyboard way out (WCAG 2.1.2 allows a non-standard exit when the user is told
+the method), and the editor tells it: while editable, the editing area's accessible description says so (localized
+through `Locale` — English and Korean built in, others via `editorLocale.register`), so a screen reader announces it on
+entering. Read-only, `Tab` already leaves and there is no hint. A page may still show the method visibly — the hint
+is for assistive technology, not on screen.
+`Tab` from the control before the editor enters it.
+
 ## CSS Custom Properties
 
 None. Layout is plain flexbox — the header keeps its own height and the editing area takes the rest — so there is no layout variable to override (see [Sizing](#sizing) for how the element is sized), and colours come from Monaco's own theme (`vs-light`/`vs-dark`) rather than this library's `--u-*` design tokens.

package/skills/iyulab-editor-components/references/components/text-editor.md

@@ -78,6 +78,11 @@ with 0.5.0 — see the CHANGELOG.
 |-------|--------|--------------|
 | `change` | `{ html: string, text: string, delta: QuillDelta }` | Fired only for user edits (Quill `source === 'user'`) — composed so it crosses the shadow boundary |
 
+## Keyboard
+
+`Tab` inside the editor moves on to the next control — it does not insert a tab character, so the
+keyboard is never trapped in the editor (WCAG 2.1.2).
+
 ## CSS Custom Properties
 
 `UTextEditor` doesn't declare any custom properties of its own — its styles read the shared