feat: integrate latest HMDesign design system updates

scripts/accessibility-regression.test.mjs

@@ -0,0 +1,41 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { build } from 'vite';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const cache = new Map();
+async function load(source) {
+  if (!cache.has(source)) {
+    const output = path.resolve('_local/accessibility-component-test', path.basename(source, '.tsx'));
+    await build({ configFile: false, logLevel: 'silent', build: { outDir: output, emptyOutDir: false, lib: { entry: source, formats: ['es'], fileName: 'module' }, rolldownOptions: { external: id => !id.startsWith('.') && !path.isAbsolute(id) } } });
+    cache.set(source, import(pathToFileURL(path.join(output, 'module.js')).href));
+  }
+  return cache.get(source);
+}
+const render = (component, props) => renderToStaticMarkup(React.createElement(component, props));
+
+test('Combobox announces its dialog popup without changing names, IDs or disabled state', async () => {
+  const { Combobox } = await load('packages/ui/src/components/ui/combobox.tsx');
+  const html = render(Combobox, { options: [{ value: 'work', label: '업무' }], id: 'owner', 'aria-labelledby': 'owner-label', disabled: true });
+  assert.match(html, /role="combobox"/);
+  assert.match(html, /aria-haspopup="dialog"/);
+  assert.match(html, /aria-expanded="false"/);
+  assert.match(html, /id="owner"/);
+  assert.match(html, /aria-labelledby="owner-label"/);
+  assert.match(html, /disabled=""/);
+});
+
+for (const [name, file] of [['GNBUser', 'gnb/gnb'], ['LNBProfile', 'lnb/lnb']]) {
+  test(`${name} preserves visible text in its name and respects consumer labels`, async () => {
+    const component = (await load(`packages/ui/src/patterns/${file}.tsx`))[name];
+    const withDescription = render(component, { name: '김한맥', description: '프로젝트 관리자' });
+    assert.match(withDescription, /aria-label="김한맥 프로젝트 관리자 사용자 메뉴"/);
+    assert.match(withDescription, /김한맥 <\/(?:span|strong)>/);
+    assert.match(render(component, { name: '김한맥' }), /aria-label="김한맥 사용자 메뉴"/);
+    assert.match(render(component, { name: '김한맥', description: '프로젝트 관리자', 'aria-label': '김한맥 프로젝트 관리자 계정 설정' }), /aria-label="김한맥 프로젝트 관리자 계정 설정"/);
+    assert.match(render(component, { name: '김한맥', 'aria-labelledby': 'visible-account-label' }), /aria-labelledby="visible-account-label"/);
+  });
+}