@iyulab/modern-app 0.19.3 → 0.19.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.19.4] - 2026-09-15
+
+### Fixed
+
+- **`u-page-header`'s back link was a 41×17 pointer target**, under the 24×24 CSS px minimum of
+  WCAG 2.2 SC 2.5.8. It now carries block padding with an equal negative margin, so the target is
+  ~25px tall while the header's layout does not move (host, title and following content keep their
+  exact positions). A new browser gate measures every pointer target this package renders — nav
+  items expanded and compact, group headers, the sidebar logo and toggle, wizard steps, and the back
+  link — and fails when one is undersized or not actually hit at its own position.
+- **A sidebar `logo` given as an icon name vanished when the name did not resolve** (a 404 or a
+  typo) — the icon drew nothing and the home target collapsed to 0×0, which in the slim sidebar left
+  only the toggle. It now falls back to the same default icon the navigation items use. Omitting
+  `logo` still draws no logo.
+- **The sidebar logo could not be reached from the keyboard.** Every logo form (icon name, image,
+  render function) was a click-only element — no focus, not announced as a link. The logo is now a
+  `u-link` to `href` (or the base path, as before). An image logo is named by its `alt`; icon and
+  custom logos are named by the app `title`.
+
 ## [0.19.3] - 2026-09-13
 
 ### Fixed

package/README.md

@@ -205,6 +205,20 @@ export function App() {
 }
 ```
 
+## Accessibility
+
+The baseline is **WCAG 2.2**. The table lists what this package **measures in tests** — it is not a
+conformance claim for the success criteria it does not list.
+
+| Success criterion | Guarantee | Measured by |
+|---|---|---|
+| SC 2.5.8 Target Size (Minimum) | Every pointer target this package renders itself — sidebar links, buttons and group headers (expanded and compact), the sidebar logo and toggle, wizard steps, the page header's back link — is at least 24×24 CSS px or meets the spacing exception (24px between centers), and is actually hit at that position | `tests/browser/target-size.browser.test.ts` (real Chromium) |
+| SC 2.1.1 Keyboard (pointer-cursor check) | Nothing this package renders shows a pointer cursor without being an interactive element — the sidebar logo is a link | `tests/browser/target-size.browser.test.ts` |
+
+Buttons placed through slots or rendered as `u-button` without size overrides (wizard back/next, the
+master-detail close button) follow `@iyulab/components`, which measures them in its own gate. Color
+contrast likewise comes from that package's tokens.
+
 ## Documentation
 
 | Guide | Description |

package/dist/components/PageHeader.styles.js

@@ -47,6 +47,11 @@ var t = e`
     font-weight: var(--u-text-label-weight, 600);
     color: var(--u-link-txt-color, #1565C0);
     text-decoration: none;
+    /* 타깃 크기(WCAG 2.2 SC 2.5.8) — 글자 줄 상자만으로는 높이가 17px 남짓이라 패딩으로 누를 면을 24px 넘게
+       키우고, 같은 크기의 음수 여백으로 그 공간을 돌려준다 — 배치는 움직이지 않는다(접미 아이콘과 같은 기법). */
+    display: inline-block;
+    padding-block: var(--u-space-2xs, 4px);
+    margin-block: calc(-1 * var(--u-space-2xs, 4px));
   }
   .back::before {
     content: '←';

package/dist/internals/nav-icon.d.ts

@@ -1,5 +1,6 @@
 /**
  * 내비게이션 항목의 **기본 아이콘** — 아이콘이 없거나 해석에 실패했을 때 대신 그린다.
+ * 사이드바 로고도 **이름을 줬는데 해석에 실패한 경우**에 같은 폴백을 쓴다(로고를 아예 주지 않은 경우는 제외).
  *
  * 🔴**왜 필요한가 — «안 보인다»가 «누를 수 없다»가 되는 자리다.**
  * 사이드바가 접히면(`compact`) 라벨이 숨고 아이콘만 남는다. 그 아이콘이 없으면 그 메뉴는

package/dist/layouts/SidebarLayout.d.ts

@@ -40,8 +40,12 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     /** 현재 경로와 패턴 매칭 여부 확인 */
     private isMatchedLink;
     /** 브랜드 로고 클릭 핸들러: `href` 지정 시 해당 경로로, 아니면 홈으로 이동 */
-    private handleBrandLogoClick;
-    /** 로고 렌더링: 아이콘명(문자열, 기존 동작) | 이미지({src,alt,href}) | 커스텀 렌더 함수 */
+    /**
+     * 로고 렌더링: 아이콘명(문자열, 기존 동작) | 이미지({src,alt,href}) | 커스텀 렌더 함수.
+     *
+     * 🔴로고는 홈(또는 `href`)으로 가는 **링크**다 — 종전엔 클릭만 받는 `img`·`span`·`u-icon` 이라 키보드로 닿지 않았고
+     *   보조기술에 링크로 드러나지 않았다. `u-link` 는 `href` 가 없으면 basepath 로 SPA 이동하므로 종전 `app.navigate('')` 와 같다.
+     */
     private renderLogo;
     /** 사이드바 토글 핸들러 */
     private handleToggleButtonClick;

package/dist/layouts/SidebarLayout.js

@@ -5,32 +5,31 @@ import r from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import "../components/SidebarSection.js";
+import { DEFAULT_NAV_ICON as o } from "../internals/nav-icon.js";
 import "../components/SidebarLink.js";
 import "../components/SidebarGroup.js";
 import "../components/SidebarButton.js";
-import { styles as o } from "./SidebarLayout.styles.js";
-import { html as s, nothing as c } from "lit";
-import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
+import { styles as s } from "./SidebarLayout.styles.js";
+import { html as c, nothing as l } from "lit";
+import { customElement as u, property as d, query as f, state as p } from "lit/decorators.js";
 import "@iyulab/components/dist/components/button/UButton.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
-import { unsafeHTML as p } from "lit/directives/unsafe-html.js";
-import { repeat as m } from "lit/directives/repeat.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-import { createDevWarner as g } from "@iyulab/components/dist/utilities/devWarning.js";
-import { UProgressBar as _ } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import { unsafeHTML as m } from "lit/directives/unsafe-html.js";
+import { repeat as h } from "lit/directives/repeat.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { createDevWarner as _ } from "@iyulab/components/dist/utilities/devWarning.js";
+import { UProgressBar as v } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var v = g("@iyulab/modern-app"), y = 0;
-function b(e) {
+var y = _("@iyulab/modern-app"), b = 0;
+function x(e) {
 	let t = e.tagName;
 	if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
 	let n = e.getAttribute("role");
 	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
 }
-var x = class extends i {
+var S = class extends i {
 	constructor(...t) {
-		super(...t), this.state = "default", this.locale = "", this.context = null, this.unsizedWarnKey = `unsized:${++y}`, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = (t) => () => {
-			e.navigate(t ?? "");
-		}, this.handleToggleButtonClick = () => {
+		super(...t), this.state = "default", this.locale = "", this.context = null, this.unsizedWarnKey = `unsized:${++b}`, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleToggleButtonClick = () => {
 			let t = e.screen ?? "large";
 			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
 		}, this.handleBackdropClick = () => {
@@ -51,7 +50,7 @@ var x = class extends i {
 			}, 300);
 		}, this._handleMainKeydown = (e) => {
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && b(t)) return;
+			if (t instanceof HTMLElement && x(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
 			if (!n) return;
 			let r = n.clientHeight;
@@ -84,7 +83,7 @@ var x = class extends i {
 		};
 	}
 	static {
-		this.styles = [super.styles, o];
+		this.styles = [super.styles, s];
 	}
 	get mainElement() {
 		return this.shadowRoot?.querySelector(".main") ?? null;
@@ -105,11 +104,11 @@ var x = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			e >= 200 || v(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
+			e >= 200 || y(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
 		});
 	}
 	render() {
-		return this.config ? s`
+		return this.config ? c`
       <!-- Mobile Header -->
       <div class="mobile-header" part="mobile-header" ?hidden="${!this.state.startsWith("mobile")}">
         ${this.renderLogo()}
@@ -146,13 +145,13 @@ var x = class extends i {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
-          aria-label=${this.config.mainAriaLabel ?? c}>
-          ${m(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          aria-label=${this.config.mainAriaLabel ?? l}>
+          ${h(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${m(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${h(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -167,17 +166,17 @@ var x = class extends i {
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : c;
+    ` : l;
 	}
 	renderItem(e) {
-		if (!e) return c;
+		if (!e) return l;
 		if (e.type === "html") {
 			let t = e.render(this.state);
-			return typeof t == "string" ? p(t) : s`${t}`;
+			return typeof t == "string" ? m(t) : c`${t}`;
 		}
-		if (e.type === "button") return s`
+		if (e.type === "button") return c`
         <u-sidebar-button
-          id=${h(e.id)}
+          id=${g(e.id)}
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
           .lib="${e.lib}"
@@ -188,7 +187,7 @@ var x = class extends i {
       `;
 		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
-			return s`
+			return c`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -203,18 +202,18 @@ var x = class extends i {
         ></u-sidebar-link>
       `;
 		}
-		if (e.type === "section") return s`
+		if (e.type === "section") return c`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${m(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${h(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
 		if (e.type === "group") {
 			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
-			return s`
+			return c`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -223,40 +222,45 @@ var x = class extends i {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${m(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${h(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
 		}
-		return c;
+		return l;
 	}
 	renderLogo() {
-		let e = this.config?.logo;
-		if (!e || typeof e == "string") return s`
-        <u-icon class="logo"
-          .name="${e}"
-          @click=${this.handleBrandLogoClick()}
-        ></u-icon>
-      `;
+		let e = this.config?.logo, t = this.config?.title ?? "Home";
+		if (!e || typeof e == "string") return e ? c`
+        <u-link class="logo-link" aria-label=${t}>
+          <u-icon class="logo"
+            .name="${e}"
+            .fallback=${o}
+          ></u-icon>
+        </u-link>
+      ` : c`<u-icon class="logo"></u-icon>`;
 		if (typeof e == "function") {
-			let t = e(this.state);
-			return s`
-        <span class="logo" @click=${this.handleBrandLogoClick()}>
-          ${typeof t == "string" ? p(t) : t}
-        </span>
+			let n = e(this.state);
+			return c`
+        <u-link class="logo-link" aria-label=${t}>
+          <span class="logo">
+            ${typeof n == "string" ? m(n) : n}
+          </span>
+        </u-link>
       `;
 		}
-		return s`
-      <img class="logo"
-        src="${e.src}"
-        alt="${e.alt ?? ""}"
-        @click=${this.handleBrandLogoClick(e.href)}
-      />
+		return c`
+      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? l : t}>
+        <img class="logo"
+          src="${e.src}"
+          alt="${e.alt ?? ""}"
+        />
+      </u-link>
     `;
 	}
 };
-r([u({
+r([d({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], x.prototype, "state", void 0), r([u({ type: Object }), n("design:type", Object)], x.prototype, "config", void 0), r([u({ type: String }), n("design:type", Object)], x.prototype, "locale", void 0), r([d("u-progress-bar"), n("design:type", _ === void 0 ? Object : _)], x.prototype, "progressBarEl", void 0), r([f(), n("design:type", Object)], x.prototype, "context", void 0), x = r([l("u-sidebar-layout")], x);
+}), n("design:type", Object)], S.prototype, "state", void 0), r([d({ type: Object }), n("design:type", Object)], S.prototype, "config", void 0), r([d({ type: String }), n("design:type", Object)], S.prototype, "locale", void 0), r([f("u-progress-bar"), n("design:type", v === void 0 ? Object : v)], S.prototype, "progressBarEl", void 0), r([p(), n("design:type", Object)], S.prototype, "context", void 0), S = r([u("u-sidebar-layout")], S);
 //#endregion
-export { x as SidebarLayout };
+export { S as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -28,6 +28,11 @@ var t = e`
     width: auto;
     object-fit: contain;
   }
+  /* 로고를 감싼 링크 — 인라인 기준선 여백이 생기지 않게 로고 상자에 딱 맞춘다. */
+  .logo-link {
+    display: inline-flex;
+    align-items: center;
+  }
 
   /*
    * ★단 배정은 «관측값 근사»가 아니라 «용도»로 한다 — 이 자리는 앱의 제목이다.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.19.3",
+  "version": "0.19.4",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -60,7 +60,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/router": "^0.12.0",
+    "@iyulab/router": "^0.13.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
@@ -82,13 +82,13 @@
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "^5.0.0",
     "happy-dom": "^20.10.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.2",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   }
 }