@iyulab/modern-app 0.33.0 → 0.33.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.33.1] - 2026-09-30
+
+### Fixed
+
+- **Sidebar links with `target: '_blank'` now say so to screen readers** — their accessible name ends
+  with a visually hidden "(opens in a new tab)", in the collapsed sidebar too. The text is the new
+  `opensInNewTab` string of the `modern-app` locale namespace (English and Korean built in).
+
+### Changed
+
+- Optional React peers promise only the tested majors: `@lit/react ^1.0.8` and
+  `react ^18.0.0 || ^19.0.0` (were `>=` ranges with no upper bound).
+
+### Documentation
+
+- README: the Accessibility section links the KWCAG 2.2 table in `@iyulab/components`.
+
 ## [0.33.0] - 2026-09-30
 
 ### Added

package/README.md

@@ -277,11 +277,14 @@ conformance claim for the success criteria it does not list.
 | 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` |
 | SC 2.4.1 Bypass Blocks | The sidebar layout's first Tab stop is a «Skip to main content» link, visible when focused and at least 24px tall; it moves focus to the screen's `[autofocus]` element or to the route area, which is the page's single `<main>` landmark | `tests/browser/sidebar-layout-skip-link.browser.test.ts` |
+| SC 3.2.5 Change on Request (new tabs) | A sidebar link with `target: '_blank'` ends its accessible name with a localized, visually hidden "(opens in a new tab)" — expanded and collapsed | `tests/browser/sidebar-link-new-tab-name.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.
 
+For **KWCAG 2.2** (the Korean web accessibility standard), the `@iyulab/components` README has a table of all 33 check items — which are guaranteed by a test across the sibling packages, which are shared with the app, and which do not apply: [KWCAG 2.2 대응표](https://github.com/iyulab/node-components#kwcag-22-대응표).
+
 ## Documentation
 
 | Guide | Description |

package/dist/components/SidebarLink.js

@@ -1,45 +1,47 @@
 import e from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
 import t from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
-import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
-import { styles as i } from "./SidebarLink.styles.js";
+import { getLocaleStrings as r } from "../internals/locale.js";
+import { DEFAULT_NAV_ICON as i } from "../internals/nav-icon.js";
+import { styles as a } from "./SidebarLink.styles.js";
 import "@iyulab/router";
-import { html as a, nothing as o } from "lit";
-import { customElement as s, property as c } from "lit/decorators.js";
+import { html as o, nothing as s } from "lit";
+import { customElement as c, property as l } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 //#region src/components/SidebarLink.ts
-var l = class extends n {
+var u = class extends n {
 	constructor(...e) {
 		super(...e), this.selected = !1, this.compact = !1;
 	}
 	static {
-		this.styles = [super.styles, i];
+		this.styles = [super.styles, a];
 	}
 	render() {
-		return a`
+		return o`
       <u-link
         .href=${this.href || "#"}
         .navigate=${this.navigate}
         .target=${this.target}
-        aria-current=${this.selected ? "page" : o}
+        aria-current=${this.selected ? "page" : s}
       >
         <div class="container" part="base" ?compact=${this.compact}>
           <u-icon part="icon"
             .lib=${this.lib}
             .name=${this.icon}
-            .fallback=${r}
+            .fallback=${i}
           ></u-icon>
           <span part="label" ?compact=${this.compact}>
             ${this.label}
           </span>
+          ${this.target === "_blank" ? o`<span class="new-tab-hint">${r().opensInNewTab}</span>` : s}
         </div>
       </u-link>
     `;
 	}
 };
-t([c({
+t([l({
 	type: Boolean,
 	reflect: !0
-}), e("design:type", Object)], l.prototype, "selected", void 0), t([c({ type: Boolean }), e("design:type", Object)], l.prototype, "compact", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "lib", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "label", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "href", void 0), t([c({ type: String }), e("design:type", Object)], l.prototype, "pattern", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "navigate", void 0), t([c({ type: String }), e("design:type", String)], l.prototype, "target", void 0), l = t([s("u-sidebar-link")], l);
+}), e("design:type", Object)], u.prototype, "selected", void 0), t([l({ type: Boolean }), e("design:type", Object)], u.prototype, "compact", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "icon", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "lib", void 0), t([l({ type: String }), e("design:type", Object)], u.prototype, "label", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "href", void 0), t([l({ type: String }), e("design:type", Object)], u.prototype, "pattern", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "navigate", void 0), t([l({ type: String }), e("design:type", String)], u.prototype, "target", void 0), u = t([c("u-sidebar-link")], u);
 //#endregion
-export { l as SidebarLink };
+export { u as SidebarLink };

package/dist/components/SidebarLink.styles.js

@@ -74,6 +74,8 @@ var t = e`
    * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
    * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
    */
+  /* 새 창 알림 — 화면에는 없고 링크의 접근성 이름에만 붙는다(KWCAG 7.2.1). */
+  .new-tab-hint,
   [part~='label'][compact] {
     position: absolute;
     width: 1px;

package/dist/internals/locale.d.ts

@@ -15,6 +15,8 @@ export interface ModernAppLocaleStrings {
     toggleSidebar: string;
     /** Sidebar layout — the «skip to main content» link, the first Tab stop of the shell. */
     skipToContent: string;
+    /** Sidebar links with `target: '_blank'` — appended to the link's accessible name (visually hidden). */
+    opensInNewTab: string;
     /** Wizard — default Back/Next action labels ("Submit" wording is the consumer's call). */
     wizardBack: string;
     wizardNext: string;

package/dist/internals/locale.js

@@ -10,6 +10,7 @@ var t = {
 	toggleMobileMenu: "Toggle menu",
 	toggleSidebar: "Toggle sidebar",
 	skipToContent: "Skip to main content",
+	opensInNewTab: "(opens in a new tab)",
 	wizardBack: "Back",
 	wizardNext: "Next",
 	wizardStepAnnouncement: "Step {index} of {total}: {label}"
@@ -24,6 +25,7 @@ n.register("en", t), n.register("ko", {
 	toggleMobileMenu: "메뉴 열고 닫기",
 	toggleSidebar: "사이드바 열고 닫기",
 	skipToContent: "본문으로 건너뛰기",
+	opensInNewTab: "(새 창에서 열림)",
 	wizardBack: "이전",
 	wizardNext: "다음",
 	wizardStepAnnouncement: "{total}단계 중 {index}단계: {label}"
@@ -56,6 +58,7 @@ function l(e) {
 		toggleMobileMenu: t("toggleMobileMenu"),
 		toggleSidebar: t("toggleSidebar"),
 		skipToContent: t("skipToContent"),
+		opensInNewTab: t("opensInNewTab"),
 		wizardBack: t("wizardBack"),
 		wizardNext: t("wizardNext"),
 		wizardStepAnnouncement: (t, n, r) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.33.0",
+  "version": "0.33.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -65,8 +65,8 @@
   },
   "peerDependencies": {
     "@iyulab/components": ">=1.49.0",
-    "@lit/react": ">=1.0.8",
-    "react": ">=18.0.0"
+    "@lit/react": "^1.0.8",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {