@ncds/ui-admin 1.8.23 → 1.8.25-alpha.0

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -16,7 +16,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 16
+  md: 14
 };
 const Badge = _ref => {
   let {

package/dist/cjs/src/components/navigation/bread-crumb/BreadCrumb.js

@@ -11,11 +11,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const BreadcrumbItem = _ref => {
   let {
     href,
+    ariaLabel,
     children
   } = _ref;
   const ElementType = href ? 'a' : 'span';
   return (0, _jsxRuntime.jsx)(ElementType, {
     href: href,
+    // <span> 은 generic role 이라 aria-label 이 무시될 수 있다. 링크는 이미 이름을 지원하므로 그대로 둔다
+    role: !href && ariaLabel ? 'img' : undefined,
+    "aria-label": ariaLabel,
     className: "ncua-breadcrumb__item",
     children: children
   });
@@ -23,23 +27,27 @@ const BreadcrumbItem = _ref => {
 const BreadCrumb = _ref2 => {
   let {
     items,
+    showHomeIcon = true,
     className
   } = _ref2;
   if (!items || items.length === 0) return null;
   const renderItem = (item, index) => {
     const isLast = index === items.length - 1;
-    const content = index === 0 ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Home01, {
-      width: 16,
-      height: 16,
-      color: "gray500"
-    }) : item.label;
+    // 아이콘 여부는 한 곳에서만 판정한다 — 콘텐츠·모디파이어·aria-label 이 모두 이 값을 따른다
+    const isHome = showHomeIcon && index === 0;
     return (0, _jsxRuntime.jsx)("li", {
       className: (0, _classnames.default)('ncua-breadcrumb__list-item', {
+        'ncua-breadcrumb__list-item--home': isHome,
         'ncua-breadcrumb__list-item--active': isLast
       }),
       children: (0, _jsxRuntime.jsx)(BreadcrumbItem, {
         href: isLast ? undefined : item.href,
-        children: content
+        ariaLabel: isHome ? item.label : undefined,
+        children: isHome ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Home01, {
+          width: 16,
+          height: 16,
+          color: "gray500"
+        }) : item.label
       })
     }, index);
   };

package/dist/cjs/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _BreadCrumb = require("../BreadCrumb");
+// @vitest-environment jsdom
+
+const LIST_ITEM = '.ncua-breadcrumb__list-item';
+const HOME_MODIFIER = 'ncua-breadcrumb__list-item--home';
+const ACTIVE_MODIFIER = 'ncua-breadcrumb__list-item--active';
+const ITEM = '.ncua-breadcrumb__item';
+/** DocBreadcrumbs(유일한 사내 호출부)와 같은 형태의 입력 — AC-7 회귀 기준 */
+const DOC_ITEMS = [{
+  href: '/',
+  label: '홈'
+}, {
+  href: '/docs',
+  label: '문서'
+}, {
+  label: '현재 페이지'
+}];
+let root = null;
+let container = null;
+function render(props) {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_BreadCrumb.BreadCrumb, props));
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  if (root && container) {
+    (0, _testUtils.act)(() => root?.unmount());
+    container.remove();
+  }
+  root = null;
+  container = null;
+});
+const listItems = el => Array.from(el.querySelectorAll(LIST_ITEM));
+/** <li> 안에서 실제 포커스를 받는 요소(<a> 또는 <span>) */
+const itemOf = li => li.querySelector(ITEM);
+(0, _vitest.describe)('BreadCrumb — showHomeIcon 아이콘/라벨 분기', () => {
+  (0, _vitest.it)('AC-1: showHomeIcon 미지정이면 첫 항목을 홈 아이콘으로 렌더한다', () => {
+    // Given/When: showHomeIcon 을 넘기지 않고 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 첫 항목은 --home 모디파이어를 달고 svg 를 품으며, label 텍스트는 노출되지 않는다
+    const [first] = listItems(el);
+    (0, _vitest.expect)(first.classList.contains(HOME_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(first.querySelector('svg')).not.toBeNull();
+    (0, _vitest.expect)(first.textContent).not.toContain(DOC_ITEMS[0].label);
+  });
+  (0, _vitest.it)('AC-2: showHomeIcon={false} 이면 첫 항목을 label 텍스트로 렌더한다', () => {
+    // Given/When: 라벨 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS,
+      showHomeIcon: false
+    });
+    // Then: 아이콘 대신 label 텍스트가 나오고 --home 은 붙지 않는다
+    const [first] = listItems(el);
+    (0, _vitest.expect)(first.classList.contains(HOME_MODIFIER)).toBe(false);
+    (0, _vitest.expect)(first.querySelector('svg')).toBeNull();
+    (0, _vitest.expect)(first.textContent).toBe(DOC_ITEMS[0].label);
+  });
+  (0, _vitest.it)('AC-3: 홈 아이콘 항목의 링크에 label 값이 aria-label 로 부여된다', () => {
+    // Given/When: 아이콘 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 접근 가능한 이름은 <li> 가 아니라 포커스를 받는 <a> 에 붙는다
+    const [first] = listItems(el);
+    const anchor = itemOf(first);
+    (0, _vitest.expect)(anchor?.tagName).toBe('A');
+    (0, _vitest.expect)(anchor?.getAttribute('aria-label')).toBe(DOC_ITEMS[0].label);
+  });
+  (0, _vitest.it)('AC-4(라벨 모드): 어떤 항목에도 --home 과 aria-label 이 붙지 않는다', () => {
+    // Given/When: 라벨 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS,
+      showHomeIcon: false
+    });
+    // Then: --home 은 전 항목에서 사라지고, 첫 항목의 aria-label 속성 자체가 출력되지 않는다
+    const items = listItems(el);
+    (0, _vitest.expect)(items.every(li => !li.classList.contains(HOME_MODIFIER))).toBe(true);
+    (0, _vitest.expect)(itemOf(items[0])?.hasAttribute('aria-label')).toBe(false);
+  });
+  (0, _vitest.it)('AC-4(아이콘 모드): --home 은 첫 항목에만 붙는다', () => {
+    // Given/When: 아이콘 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 홈 아이콘인 첫 항목에만 붙고 나머지에는 붙지 않는다
+    const items = listItems(el);
+    (0, _vitest.expect)(items.filter(li => li.classList.contains(HOME_MODIFIER))).toHaveLength(1);
+    (0, _vitest.expect)(items[0].classList.contains(HOME_MODIFIER)).toBe(true);
+  });
+  (0, _vitest.it)('AC-5: 마지막 항목은 showHomeIcon 과 무관하게 --active 를 달고 링크가 아니다', () => {
+    // Given/When: 아이콘 모드로 렌더하면
+    const iconMode = listItems(render({
+      items: DOC_ITEMS
+    }));
+    const iconLast = iconMode[iconMode.length - 1];
+    // Then: --active 가 붙고 <span> 이라 클릭 이동이 없다
+    (0, _vitest.expect)(iconLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(itemOf(iconLast)?.tagName).toBe('SPAN');
+    // When: 라벨 모드로 다시 렌더해도
+    const labelMode = listItems(render({
+      items: DOC_ITEMS,
+      showHomeIcon: false
+    }));
+    const labelLast = labelMode[labelMode.length - 1];
+    // Then: 판정은 showHomeIcon 과 독립이다
+    (0, _vitest.expect)(labelLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(itemOf(labelLast)?.tagName).toBe('SPAN');
+  });
+  (0, _vitest.it)('AC-6: 단일 항목이면 첫 항목이 곧 마지막 항목으로 처리된다', () => {
+    // Given/When: 항목이 하나뿐인 배열을 아이콘 모드로 렌더하면
+    const single = [{
+      href: '/',
+      label: '홈'
+    }];
+    const [iconOnly] = listItems(render({
+      items: single
+    }));
+    // Then: --home 과 --active 가 동시에 붙고 링크가 아니다
+    (0, _vitest.expect)(iconOnly.classList.contains(HOME_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(iconOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(itemOf(iconOnly)?.tagName).toBe('SPAN');
+    (0, _vitest.expect)(iconOnly.querySelector('svg')).not.toBeNull();
+    // When: 같은 배열을 라벨 모드로 렌더하면
+    const [labelOnly] = listItems(render({
+      items: single,
+      showHomeIcon: false
+    }));
+    // Then: --active 만 붙고 label 텍스트가 나온다
+    (0, _vitest.expect)(labelOnly.classList.contains(HOME_MODIFIER)).toBe(false);
+    (0, _vitest.expect)(labelOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(labelOnly.textContent).toBe(single[0].label);
+  });
+  (0, _vitest.it)('AC-7: 기존 호출부 입력의 렌더 결과는 --home·aria-label 추가분 외에 변하지 않는다', () => {
+    // Given/When: DocBreadcrumbs 와 같은 입력을 showHomeIcon 미지정으로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    const items = listItems(el);
+    // Then: 요소 종류·텍스트·href 는 변경 전과 같고, 첫 항목 svg 도 그대로다
+    (0, _vitest.expect)(items).toHaveLength(DOC_ITEMS.length);
+    (0, _vitest.expect)(items.map(li => itemOf(li)?.tagName)).toEqual(['A', 'A', 'SPAN']);
+    (0, _vitest.expect)(items.map(li => itemOf(li)?.getAttribute('href'))).toEqual(['/', '/docs', null]);
+    (0, _vitest.expect)(items.map(li => li.textContent)).toEqual(['', DOC_ITEMS[1].label, DOC_ITEMS[2].label]);
+    (0, _vitest.expect)(items[0].querySelector('svg')).not.toBeNull();
+    // Then: <li> 클래스는 기존 베이스/--active 를 그대로 유지하고, 늘어난 것은 --home 뿐이다
+    (0, _vitest.expect)(items.map(li => Array.from(li.classList).sort())).toEqual([['ncua-breadcrumb__list-item', HOME_MODIFIER].sort(), ['ncua-breadcrumb__list-item'], ['ncua-breadcrumb__list-item', ACTIVE_MODIFIER].sort()]);
+    // Then: <a>/<span> 에 늘어난 속성은 첫 항목의 aria-label 뿐이다
+    (0, _vitest.expect)(itemOf(items[1])?.hasAttribute('aria-label')).toBe(false);
+    (0, _vitest.expect)(itemOf(items[2])?.hasAttribute('aria-label')).toBe(false);
+  });
+  (0, _vitest.it)('비링크 홈 항목에는 role="img" 를 부여해 aria-label 이 무시되지 않게 한다', () => {
+    // Given/When: 첫 항목에 href 가 없어 <span> 으로 렌더되는 입력(meta usageExamples.default 형태)을 아이콘 모드로 렌더하면
+    const el = render({
+      items: [{
+        label: '대시보드'
+      }, {
+        href: '/products',
+        label: '상품'
+      }, {
+        label: '상품 상세'
+      }]
+    });
+    // Then: generic role 의 <span> 은 aria-label 을 노출하지 못하므로 role="img" 로 이름을 살린다
+    const [first] = listItems(el);
+    const home = itemOf(first);
+    (0, _vitest.expect)(home?.tagName).toBe('SPAN');
+    (0, _vitest.expect)(home?.getAttribute('role')).toBe('img');
+    (0, _vitest.expect)(home?.getAttribute('aria-label')).toBe('대시보드');
+  });
+  (0, _vitest.it)('링크인 홈 항목에는 role 을 부여하지 않는다', () => {
+    // Given/When: 첫 항목에 href 가 있어 <a> 로 렌더되는 입력을 아이콘 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 링크는 이미 접근 가능한 이름을 지원하므로 role 을 덧씌우지 않는다 (ADR-3)
+    const items = listItems(el);
+    const home = itemOf(items[0]);
+    (0, _vitest.expect)(home?.tagName).toBe('A');
+    (0, _vitest.expect)(home?.hasAttribute('role')).toBe(false);
+    // Then: 홈이 아닌 항목에도 role 은 출력되지 않는다
+    (0, _vitest.expect)(items.slice(1).every(li => !itemOf(li)?.hasAttribute('role'))).toBe(true);
+  });
+  (0, _vitest.it)('경계: items 가 빈 배열이면 아무것도 렌더하지 않는다', () => {
+    // Given/When: 빈 배열을 양쪽 모드로 렌더하면
+    const el = render({
+      items: [],
+      showHomeIcon: false
+    });
+    // Then: <nav> 자체가 만들어지지 않는다 (기존 동작 유지)
+    (0, _vitest.expect)(el.querySelector('.ncua-breadcrumb')).toBeNull();
+    (0, _vitest.expect)(el.innerHTML).toBe('');
+  });
+});