@iyulab/components 1.33.0 → 1.33.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.33.1] - 2026-08-25
+
+### Fixed
+
+- **`aria-label` set on `<u-button>` never reached the accessibility tree.** The host
+  attribute was present, but the actual interactive node exposed to assistive technology is
+  the native `<button>`/`<a>` rendered inside the shadow root — ARIA content attributes on a
+  shadow host do not cross the shadow boundary to label a descendant. Icon-only buttons using
+  `aria-label` for their accessible name were announced as unnamed controls. `render()` now
+  forwards the host's `aria-label` onto the internal element, and attribute changes made after
+  connection are observed and re-rendered (previously only the initial value would have had
+  any chance of being picked up).
+
 ## [1.33.0] - 2026-08-21
 
 ### Added

package/dist/components/button/UButton.d.ts

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

package/dist/components/button/UButton.js

@@ -53,9 +53,29 @@ var UButton = class UButton extends UElement {
 		this.removeEventListener("click", this.handleClick);
 		super.disconnectedCallback();
 	}
+	/**
+	* 호스트에 세팅된 `aria-label`은 실제 접근 가능한(포커스 대상) 엘리먼트가 아니라 —
+	* 그 안쪽 shadow DOM 의 네이티브 `<a>`/`<button>`이다. 섀도우 경계를 넘지 않으므로
+	* 접근성 트리에 자동 반영되지 않는다(docket #75 실측 — 속성은 붙어 있는데
+	* 접근성 이름이 비어 있음). `render()`가 이 값을 읽어 내부 엘리먼트에 직접 옮긴다.
+	*
+	* `aria-label`은 Lit 리액티브 프로퍼티로 선언돼 있지 않아 `observedAttributes`에
+	* 없다 — 그 목록에 없는 속성은 `attributeChangedCallback` 자체가 호출되지 않는다
+	* (커스텀 엘리먼트 표준 동작). 초기 렌더는 되지만 연결 후 동적 변경은 반영되지
+	* 않았다 — 목록에 명시적으로 추가해야 한다.
+	*/
+	static get observedAttributes() {
+		return [...super.observedAttributes, "aria-label"];
+	}
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+		if (name === "aria-label") this.requestUpdate();
+	}
 	render() {
+		const ariaLabel = this.getAttribute("aria-label") ?? void 0;
 		if (this.href) return html`
         <a part="link"
+          aria-label=${ifDefined(ariaLabel)}
           ?disabled=${this.disabled || this.loading}
           tabindex=${this.disabled || this.loading ? -1 : 0}
           href=${ifDefined(this.disabled || this.loading ? void 0 : this.href)}
@@ -69,6 +89,7 @@ var UButton = class UButton extends UElement {
       `;
 		return html`
       <button part="button"
+        aria-label=${ifDefined(ariaLabel)}
         type=${this.type}
         ?disabled=${this.disabled || this.loading}
       >

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "keywords": [
     "iyulab",
     "components",

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

@@ -72,3 +72,20 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | `link` | Inner `<a>` element (when `href` is set) |
 | `content` | Content wrapper (prefix + label + suffix) |
 | `mask` | Loading overlay mask |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--u-primary-color` | Base color when `color="neutral"` — set it and hover/active/surface tones auto-derive via `color-mix()` |
+| `--btn-color` | The button's **fill** color. Every derived token below is `color-mix()`'d from this one — usually the only one you need to override |
+| `--btn-txt-color` | Text color on the fill, read by `variant="solid"` (default `#fff`, or `--u-{role}-txt-color` when a semantic `color` is set) |
+| `--btn-color-strong` | Text color on the surrounding page background, read by `variant="link"` — opposite contrast need from the fill, so it's a separate token (default: same as `--btn-color`, or `--u-{role}-color-strong` for a semantic `color`) |
+| `--btn-color-hover` / `--btn-color-active` | `solid` background hover/active (default: `--btn-color` at 85%/70% + black) |
+| `--btn-color-surface` / `-hover` / `-active` | `surface` background states (default: `--btn-color` at 12%/22%/32%) |
+| `--btn-color-border` / `-hover` / `-active` | Border states (default: `--btn-color` at 45%/60%/75%) |
+| `--btn-color-outline-hover` / `-active` | `outlined`/`ghost` background hover/active (default: 6%/12%) |
+| `--btn-color-strong-hover` / `-active` | `link` text hover/active — the role value itself doesn't move; hover adds an underline instead (default: `--btn-color-strong` at 85%/70% + black) |
+| `--btn-border-color` | Border color read by variant/hover/active rules (default: `transparent`) |
+| `--btn-padding-block` | Vertical inner padding (default `0.5em`) |
+| `--btn-padding-inline` | Horizontal inner padding (default `1em`, `0` for `variant="link"`) — overriding it does not change the min-height, which is derived from `--btn-padding-block` instead |

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

@@ -51,3 +51,10 @@ Content card with optional media, header, body, and footer sections.
 | `header` | Header slot wrapper |
 | `body` | Body (default slot) wrapper |
 | `footer` | Footer slot wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--card-border-width` | Border thickness (`0` when `borderless`) |
+| `--card-border-color` | Border color |

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

@@ -62,6 +62,12 @@ Side panel that slides in from any screen edge. Extends `UOverlayElement` (focus
 | `body` | Body area |
 | `close-btn` | Close button |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--drawer-size` | Panel size along the slide axis — width for `placement="left"`/`"right"` (default `28rem`), height for `"top"`/`"bottom"` (default `16rem`). Auto-shrinks to `max-width`/`max-height: 100%` on narrow viewports |
+
 ---
 
 ## Edit-panel pattern

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

@@ -67,3 +67,10 @@ Radio group built from `u-option` children. Form-associated.
 |------|-------------|
 | `field` | Outer field wrapper |
 | `container` | Options container |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--radio-color` | Base color of the selected state (default `--u-primary-color`) |
+| `--radio-color-active` | Selected-state active tone (default `--radio-color` at 85% + black) |