@iyulab/router 0.11.1 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.11.2] - 2026-08-25
+
+### Fixed
+
+- **`aria-current`/`aria-label` set on `<u-link>` never reached the accessibility tree.** The
+  host attribute was present, but the actual interactive node exposed to assistive technology
+  is the native `<a>` rendered inside the shadow root — ARIA content attributes on a shadow
+  host do not cross the shadow boundary to label or mark current a descendant. Navigation
+  links relying on `aria-current="page"` to announce the active item, or on `aria-label` for
+  their accessible name, were exposed with neither. `render()` now forwards both host
+  attributes onto the internal `<a>`, and changes made after connection are observed and
+  re-rendered.
+
 ## [0.11.1] - 2026-08-20
 
 ### Fixed

package/dist/components/UErrorPage.d.ts

@@ -3,6 +3,15 @@ import { RouteError } from '../types/RouteError.js';
 import { TemplateResult } from 'lit-html';
 /**
  * 라우팅 중 발생한 에러 정보를 사용자에게 전달하기 위한 기본 컴포넌트 입니다.
+ *
+ * `Router`가 `fallback`을 지정하지 않았을 때 내부적으로 그리는 기본 화면이라
+ * `src/index.ts`에서 공개 export되지 않는다 — 직접 import해 쓰는 컴포넌트가
+ * 아니다. 다만 라우팅 실패 시 실제 DOM에 렌더되므로, 기본 화면의 색만 가볍게
+ * 맞추고 싶은 소비자를 위해 세 색상 훅을 남겨 둔다(전체 교체는 `fallback.render`).
+ *
+ * @cssprop --error-icon-color - 아이콘 색. 기본값 없음(미지정 시 상속된 색 사용)
+ * @cssprop --error-code-color - 에러 코드 텍스트 색. 기본값 없음(미지정 시 상속된 색 사용)
+ * @cssprop --error-message-color - 에러 메시지 텍스트 색. 기본값 없음(미지정 시 상속된 색 사용)
  */
 export declare class UErrorPage extends LitElement {
     constructor(error?: RouteError);

package/dist/components/ULink.d.ts

@@ -61,6 +61,20 @@ export declare class ULink extends LitElement {
     navigate?: "router" | "document";
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 호스트에 세팅된 `aria-current`/`aria-label`은 실제 접근 가능한(포커스 대상)
+     * 엘리먼트가 아니라 — 그 안쪽 shadow DOM 의 네이티브 `<a>`다. 섀도우 경계를
+     * 넘지 않으므로 접근성 트리에 자동 반영되지 않는다(docket #45 실측 — 속성은
+     * 붙어 있는데 접근성 트리의 `aria-current`는 계속 비어 있음). `render()`가 이
+     * 값을 읽어 내부 `<a>`에 직접 옮긴다.
+     *
+     * 둘 다 Lit 리액티브 프로퍼티로 선언돼 있지 않아 `observedAttributes`에 없다 —
+     * 그 목록에 없는 속성은 `attributeChangedCallback` 자체가 호출되지 않는다
+     * (커스텀 엘리먼트 표준 동작). 초기 렌더는 되지만 연결 후 동적 변경은 반영되지
+     * 않았다 — 목록에 명시적으로 추가해야 한다.
+     */
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     /** a 태그에 주입할 href 값을 계산합니다. */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as isExternalUrl, i as absolutePath, n as __decorate, o as parseUrl, r as __decorateMetadata, s as UOutlet, t as ULink } from "./share-Dl02vMhW.js";
+import { a as isExternalUrl, i as absolutePath, n as __decorate, o as parseUrl, r as __decorateMetadata, s as UOutlet, t as ULink } from "./share-Ds0NYHr-.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 //#region src/types/RouteError.ts

package/dist/react.js

@@ -1,4 +1,4 @@
-import { s as UOutlet$1, t as ULink$1 } from "./share-Dl02vMhW.js";
+import { s as UOutlet$1, t as ULink$1 } from "./share-Ds0NYHr-.js";
 import React from "react";
 import { createComponent } from "@lit/react";
 //#region src/react.ts

package/dist/{share-Dl02vMhW.js → share-Ds0NYHr-.js}

@@ -1081,6 +1081,29 @@ var ULink = class ULink extends LitElement {
 		this.removeEventListener("click", this.handleClick);
 		super.disconnectedCallback();
 	}
+	/**
+	* 호스트에 세팅된 `aria-current`/`aria-label`은 실제 접근 가능한(포커스 대상)
+	* 엘리먼트가 아니라 — 그 안쪽 shadow DOM 의 네이티브 `<a>`다. 섀도우 경계를
+	* 넘지 않으므로 접근성 트리에 자동 반영되지 않는다(docket #45 실측 — 속성은
+	* 붙어 있는데 접근성 트리의 `aria-current`는 계속 비어 있음). `render()`가 이
+	* 값을 읽어 내부 `<a>`에 직접 옮긴다.
+	*
+	* 둘 다 Lit 리액티브 프로퍼티로 선언돼 있지 않아 `observedAttributes`에 없다 —
+	* 그 목록에 없는 속성은 `attributeChangedCallback` 자체가 호출되지 않는다
+	* (커스텀 엘리먼트 표준 동작). 초기 렌더는 되지만 연결 후 동적 변경은 반영되지
+	* 않았다 — 목록에 명시적으로 추가해야 한다.
+	*/
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"aria-current",
+			"aria-label"
+		];
+	}
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+		if (name === "aria-current" || name === "aria-label") this.requestUpdate();
+	}
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has("href")) this.isExternal = isExternalUrl(this.href || "");
@@ -1092,6 +1115,8 @@ var ULink = class ULink extends LitElement {
         target=${ifDefined(this.target)}
         rel=${ifDefined(this.rel)}
         data-navigate=${ifDefined(this.navigate)}
+        aria-current=${ifDefined(this.getAttribute("aria-current") ?? void 0)}
+        aria-label=${ifDefined(this.getAttribute("aria-label") ?? void 0)}
       >
         <slot></slot>
       </a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",

package/skills/iyulab-router/references/components.md

@@ -41,3 +41,23 @@ export function AppRoot() {
 ## Nested Outlet Rule
 
 A parent route must render `<u-outlet>` to host child route content.
+
+## Default Error Page Styling
+
+`Router` renders `<u-error-page>` internally when a route fails and no custom
+`fallback` was configured. It is not exported for direct import, but three CSS
+custom properties are available to lightly restyle it without replacing
+`fallback.render` entirely:
+
+| Custom Property | Description | Default |
+| --- | --- | --- |
+| `--error-icon-color` | Icon color | none — inherits the ambient text color |
+| `--error-code-color` | Error code text color | none — inherits the ambient text color |
+| `--error-message-color` | Error message text color | none — inherits the ambient text color |
+
+```css
+u-error-page {
+  --error-icon-color: #b91c1c;
+  --error-code-color: #b91c1c;
+}
+```