@mindlogic-ai/logician-ui 4.0.0-alpha.21 → 4.0.0-alpha.23

package/src/components/Slider/Slider.tsx

@@ -15,7 +15,14 @@ import { SliderControl } from './SliderControl';
  */
 export const Slider = forwardRef(
   (
-    { value, defaultValue, onValueChange, children, ...rest }: SliderProps,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      ariaLabel,
+      children,
+      ...rest
+    }: SliderProps,
     ref?: ForwardedRef<HTMLDivElement>
   ) => {
     // Check if children already contains SliderControl
@@ -42,6 +49,14 @@ export const Slider = forwardRef(
         onValueChange={onValueChange}
         {...rest}
       >
+        {/* The label part is what each thumb's `aria-labelledby` points at, and
+            the reference is emitted whether or not the part is rendered — so a
+            slider composed without one is not merely unlabelled, it is unnamed
+            (KWCAG 5.3.4.1 레이블 제공). Hidden, because these call sites carry
+            their label as an adjacent icon or time display. */}
+        {ariaLabel && (
+          <ChakraSlider.Label srOnly>{ariaLabel}</ChakraSlider.Label>
+        )}
         {wrappedChildren}
       </ChakraSlider.Root>
     );

package/src/components/Slider/Slider.types.ts

@@ -11,5 +11,20 @@ export interface SliderProps extends Omit<
   defaultValue?: number[];
   /** Callback when slider value changes */
   onValueChange?: Slider.RootProps['onValueChange'];
+  /**
+   * Accessible name for the slider, when no visible `Slider.Label` is composed
+   * in — a seek bar next to a time display, a volume control beside a mute
+   * button.
+   *
+   * Without it the thumb has **no accessible name**: Zag points each thumb's
+   * `aria-labelledby` at a label part, and a composition that does not render
+   * one leaves that reference dangling — the control announces as a bare
+   * "slider" (KWCAG 2.1 5.3.4.1 레이블 제공, axe `aria-input-field-name`).
+   *
+   * Rendered as a visually hidden label rather than an `aria-label` array so it
+   * works the same whether the slider has one thumb or several, and so the name
+   * is in the server-rendered markup.
+   */
+  ariaLabel?: string;
   children?: ReactNode;
 }

package/src/components/Typography/Link.tsx

@@ -5,17 +5,54 @@ export interface LinkCustomProps extends Omit<LinkProps, 'variant'> {
   variant?: 'error';
 }
 
+/**
+ * The ramp steps the link paints, exported so a test can assert BOTH halves at
+ * once: that the component still picks these tokens, and that these tokens
+ * still clear the contrast bar. Asserting only the second half is a test that
+ * passes while the component points somewhere else entirely — which is how the
+ * dark hover regressed with a green suite.
+ */
+export const LINK_RAMP = {
+  default: { base: 'primary.main', _dark: 'primary.dark' },
+  error: { base: 'danger.main', _dark: 'danger.dark' },
+  defaultHover: { base: 'primary.dark', _dark: 'primary.darker' },
+  errorHover: { base: 'danger.dark', _dark: 'danger.darker' },
+} as const;
+
 export const Link = forwardRef<HTMLAnchorElement, LinkCustomProps>(
   ({ color, variant, ...rest }, ref) => {
-    const defaultColor = 'primary.main';
-    const errorColor = 'danger.main';
-    const defaultHoverColor = 'primary.dark';
-    const errorHoverColor = 'danger.dark';
+    // Theme-aware, because `.main` is tuned against a WHITE page. On the dark
+    // canvas (#181A20) `primary.main` measures 4.19:1 and `danger.main` 4.26:1
+    // — both under the 4.5:1 that KWCAG 2.1 5.1.3.3 (명도 대비) asks of body
+    // text, and every link in a consuming app inherits it. The `.dark` end of
+    // each ramp is the far side from the PAGE rather than a fixed lightness, so
+    // in dark mode it resolves lighter: 6.68:1 and 6.38:1.
+    const defaultColor = LINK_RAMP.default;
+    const errorColor = LINK_RAMP.error;
+    // The hover has to move AWAY from the page in BOTH modes, and `.main` is
+    // the wrong end of the ramp to move toward in dark. Mirroring the light
+    // step ("one darker") instead of reflecting it sent the dark hover back
+    // toward the background: resting 6.68:1 → hovering **4.19:1**, under the
+    // same 4.5:1 the resting colour above was just fixed to clear. KWCAG
+    // 5.3.3 applies to text in every state a user can put it in, and hover is
+    // a state a mouse user is IN while reading the link.
+    //
+    // `.darker` is the step past `.dark` at both ends, so one token is correct
+    // in both modes with no special-casing: light 11.98:1 (unchanged from
+    // before), dark 10.68:1. Error the same: 10.83:1 and 10.34:1.
+    //
+    // No axe rule would have caught this — it measures the resting state only.
+    const defaultHoverColor = LINK_RAMP.defaultHover;
+    const errorHoverColor = LINK_RAMP.errorHover;
 
+    // `color ?? defaultColor`, not a `typeof color === 'string'` narrowing. The
+    // old form silently DISCARDED any non-string value, so a call site passing
+    // a per-theme `{ base, _dark }` — the documented Chakra way to fix exactly
+    // the contrast problem above — got the default back and no error, in the
+    // types or at runtime. A prop the type accepts and the component throws
+    // away is worse than one it rejects.
     const linkColor =
-      variant === 'error'
-        ? errorColor
-        : (typeof color === 'string' ? color : undefined) || defaultColor;
+      variant === 'error' ? errorColor : (color ?? defaultColor);
 
     const hoverColor =
       variant === 'error' ? errorHoverColor : defaultHoverColor;

package/src/components/Typography/Subtitle.tsx

@@ -1,6 +1,23 @@
 import { forwardRef } from 'react';
 import { Text, TextProps } from '@chakra-ui/react';
 
+/**
+ * Supporting text under a heading — a subtitle by role in the page, not by
+ * document structure.
+ *
+ * Renders a paragraph. It used to render `<h6>`, which made every call site a
+ * level-6 heading in the document outline: a sentence of helper copy under an
+ * `<h1>` announced as a heading to a screen reader, and a jump from level 1 to
+ * level 6 in the heading list (KWCAG 2.1 5.2.4.2 제목 제공 / axe `heading-order`).
+ * A component chosen for its type scale should not decide the outline.
+ *
+ * A subtitle that genuinely IS the next heading level still says so at the call
+ * site, which is where that is known:
+ *
+ * ```tsx
+ * <Subtitle as="h2">{sectionTitle}</Subtitle>
+ * ```
+ */
 export const Subtitle = forwardRef<HTMLParagraphElement, TextProps>(
   (props, ref) => {
     const { fontSize, ...rest } = props;
@@ -8,7 +25,6 @@ export const Subtitle = forwardRef<HTMLParagraphElement, TextProps>(
     return (
       <Text
         ref={ref}
-        as="h6"
         textStyle={fontSize ? undefined : 'subtitle'}
         fontSize={fontSize}
         color="fg.muted"

package/src/components/Typography/index.ts

@@ -5,7 +5,7 @@ export { H2 } from './H2';
 export { H3 } from './H3';
 export { H4 } from './H4';
 export { H5 } from './H5';
-export { Link } from './Link';
+export { Link, LINK_RAMP } from './Link';
 export { Overline } from './Overline';
 export { Subtext } from './Subtext';
 export { Subtitle } from './Subtitle';

package/src/components/Workflow/canvas/NodePalette/NodePalette.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DragEvent } from 'react';
+import { DragEvent, useId } from 'react';
 import { Box, HStack, Stack } from '@chakra-ui/react';
 
 import { Card } from '@/components/Card';
@@ -95,6 +95,8 @@ function PaletteItem({ def }: { def: NodeTypeDef }) {
 export function NodePalette({ onClose }: { onClose: () => void }) {
   const { nodeTypes, readOnly } = useWorkflow();
   const translate = useWorkflowTranslate();
+  // Names the region below with the same words the header shows.
+  const titleId = useId();
   if (readOnly) return null;
 
   // Group by category, preserving registration order within each group.
@@ -115,6 +117,14 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
 
   return (
     <FloatingCard
+      // A named region, so the palette is something a screen-reader user can
+      // navigate TO. Its title used to be a `Subtitle`, which rendered `<h6>`
+      // and put a level-6 heading under the host page's `<h1>` (axe
+      // `heading-order`); `Subtitle` is a paragraph now, and a labelled region
+      // is what this panel actually is — a landmark, not an outline entry
+      // (KWCAG 2.1 5.2.4.1 반복 영역 건너뛰기 / 5.2.4.2 제목 제공).
+      role="region"
+      aria-labelledby={titleId}
       width={PALETTE_WIDTH}
       mt={4}
       mb={4}
@@ -140,7 +150,7 @@ export function NodePalette({ onClose }: { onClose: () => void }) {
         borderBottom="1px solid"
         borderColor="slate.200"
       >
-        <Subtitle color="slate.1300">
+        <Subtitle id={titleId} color="slate.1300">
           {translate('workflow_palette_title')}
         </Subtitle>
         <IconButton

package/src/components/a11y.kwcag.test.tsx

@@ -0,0 +1,412 @@
+import { render } from '@testing-library/react';
+import axe from 'axe-core';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { FileInput } from '@/components/FileInput';
+import { LogicianProvider } from '@/components/LogicianProvider';
+import { baseMarkdownComponents } from '@/components/Markdown/Markdown';
+import { Radio, RadioGroup } from '@/components/Radio';
+import { SelectField } from '@/components/Select';
+import {
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+} from '@/components/Slider';
+import { Link, LINK_RAMP, Subtitle } from '@/components/Typography';
+import { colors } from '@/theme/colors';
+
+/**
+ * Regressions for the accessibility defects a KWCAG 2.1 (한국형 웹 콘텐츠 접근성
+ * 지침) audit found in these components.
+ *
+ * Each one shipped for a while, and each was invisible in review: the screen
+ * looked right, and only the accessibility tree or the markup said otherwise.
+ * That is exactly the kind of defect a test has to hold, because the next person
+ * to touch the component will not see it either.
+ *
+ * The Korean checkpoint ids are here on purpose — a 웹 접근성 품질인증 evaluator
+ * works from those numbers, and a failing test should say which one it is about.
+ */
+
+beforeAll(() => {
+  // Zag's slider observes its thumb to size the track. jsdom ships no
+  // `ResizeObserver`, so without this the observe call throws ASYNCHRONOUSLY,
+  // after the test that triggered it has already passed — which vitest reports
+  // as an unhandled error and exits non-zero on. A green test list and a red
+  // run is the worst way to find that out, so it is stubbed here rather than
+  // left to whoever next reads the CI log.
+  window.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof window.ResizeObserver;
+
+  // Chakra's color-mode and responsive machinery calls it on mount; jsdom has no
+  // implementation.
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+});
+
+const withProvider = (ui: React.ReactNode) =>
+  render(<LogicianProvider>{ui}</LogicianProvider>);
+
+/** The text a screen reader would announce for `element`, via `aria-labelledby`. */
+const nameFromLabelledBy = (element: Element | null): string =>
+  (element?.getAttribute('aria-labelledby') ?? '')
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((id) => document.getElementById(id)?.textContent ?? '')
+    .join(' ')
+    .trim();
+
+describe('KWCAG 5.4.1.1 마크업 오류 방지', () => {
+  it('라디오 하나가 같은 id 를 두 번 내보내지 않는다', () => {
+    const { container } = withProvider(
+      <RadioGroup defaultValue="a">
+        <Radio value="a">
+          <Radio.Control />
+          <Radio.Text>A</Radio.Text>
+        </Radio>
+        <Radio value="b">
+          <Radio.Control />
+          <Radio.Text>B</Radio.Text>
+        </Radio>
+      </RadioGroup>
+    );
+
+    const ids = [...container.querySelectorAll('[id]')].map((el) => el.id);
+    const duplicates = ids.filter((id, i) => ids.indexOf(id) !== i);
+
+    // The control and the indicator inside it used to share Chakra's generated
+    // `ids.itemControl`, so every radio on a page carried a duplicate.
+    expect(duplicates).toEqual([]);
+  });
+});
+
+describe('KWCAG 5.3.4.1 레이블 제공', () => {
+  it('보이는 레이블이 없어도 셀렉트에 이름이 있다', () => {
+    const { container } = withProvider(
+      <SelectField
+        options={[{ label: 'One', value: '1' }]}
+        ariaLabel="분류 선택"
+      />
+    );
+
+    // The trigger's `aria-labelledby` is emitted whether or not the label part
+    // is rendered; without the part it pointed at nothing and the control
+    // announced as a bare "button".
+    expect(
+      nameFromLabelledBy(container.querySelector('[data-part="trigger"]'))
+    ).toBe('분류 선택');
+  });
+
+  it('보이는 레이블이 없어도 슬라이더에 이름이 있다', () => {
+    const { container } = withProvider(
+      <Slider ariaLabel="탐색" value={[10]} min={0} max={100}>
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <SliderThumb />
+      </Slider>
+    );
+
+    expect(
+      nameFromLabelledBy(container.querySelector('[data-part="thumb"]'))
+    ).toBe('탐색');
+  });
+});
+
+describe('KWCAG 5.2.4.2 제목 제공', () => {
+  it('Subtitle 은 제목이 아니라 문단이다', () => {
+    const { container } = withProvider(<Subtitle>보조 설명</Subtitle>);
+
+    // It rendered `<h6>`, which put every call site into the document outline —
+    // a paragraph of helper copy announced as a level-6 heading, and a jump from
+    // whatever level came before it.
+    expect(container.querySelector('h6')).toBeNull();
+    expect(container.querySelector('p')?.textContent).toBe('보조 설명');
+  });
+
+  it('제목이 필요하면 호출부가 말할 수 있다', () => {
+    const { container } = withProvider(<Subtitle as="h2">절 제목</Subtitle>);
+
+    expect(container.querySelector('h2')?.textContent).toBe('절 제목');
+  });
+
+  it('마크다운의 ###### 은 여전히 제목이다', () => {
+    // `Subtitle` 의 기본 태그를 문단으로 바꾸면서 같이 끌려간 자리. 마크다운
+    // 매퍼의 `h6` 는 **글쓴이가 실제로 쓴 제목**이므로, 여기까지 문단이 되면
+    // 고치려던 결함이 방향만 바꿔 다시 생긴다 — 제목 목록에서 사라지는 쪽으로.
+    const H6 = baseMarkdownComponents.h6 as React.ComponentType<{
+      children: React.ReactNode;
+    }>;
+    const { container } = withProvider(<H6>여섯 번째 제목</H6>);
+
+    expect(container.querySelector('h6')?.textContent).toBe('여섯 번째 제목');
+  });
+});
+
+describe('KWCAG 5.4.2.1 웹 애플리케이션 접근성 준수', () => {
+  it('파일 입력이 버튼 안에 컨트롤을 넣지 않는다', () => {
+    const { container } = withProvider(<FileInput onChange={() => {}} />);
+
+    // `role="button"` on the wrapper made the real `<input>` an interactive
+    // element inside another (axe `nested-interactive`), and `role="group"` on a
+    // `<label>` is not an allowed pairing at all (`aria-allowed-role`).
+    expect(container.querySelector('[role="button"]')).toBeNull();
+    expect(container.querySelector('label[role]')).toBeNull();
+  });
+
+  it('호버 시 드러나는 오버레이는 group 클래스로 동작한다', () => {
+    const { container } = withProvider(<FileInput onChange={() => {}} />);
+
+    // `_groupHover` compiles to `.group:hover &`, so the CLASS is what makes it
+    // fire — the old `role="group"` did nothing for hover or for assistive tech.
+    expect(container.querySelector('label')?.className).toContain('group');
+  });
+});
+
+/**
+ * An axe pass over the components above, so the NEXT defect of this shape does
+ * not need an audit downstream to find it.
+ *
+ * Everything in this file until now is a regression test: each one names a
+ * defect that already shipped. This runs the same engine the certification
+ * audit runs, in the design system, on the compositions most likely to be
+ * wrong — so a component that acquires a nameless control, a role that is not
+ * allowed on its element, or an interactive element inside another fails here
+ * rather than in an app that consumes it.
+ *
+ * **jsdom has no layout**, so this is deliberately not the whole rule set:
+ * `color-contrast` needs painted pixels and reports nothing here, and rules
+ * about visibility or size have the same problem. What jsdom does carry
+ * perfectly is structure and ARIA — which is precisely where all nine defects
+ * in this branch lived. The contrast half belongs to a browser, and FactChat's
+ * `storybook-a11y.yml` runs it there in both colour modes.
+ */
+const STRUCTURAL_AXE_RULES = [
+  'aria-allowed-attr',
+  'aria-allowed-role',
+  'aria-required-attr',
+  'aria-required-children',
+  'aria-required-parent',
+  'aria-valid-attr-value',
+  'button-name',
+  'duplicate-id',
+  'label',
+  'link-name',
+  'nested-interactive',
+  'aria-input-field-name',
+  'aria-toggle-field-name',
+];
+
+/** Runs axe over a container and returns one line per violating node. */
+const axeViolations = async (container: HTMLElement): Promise<string[]> => {
+  const results = await axe.run(container, {
+    runOnly: { type: 'rule', values: STRUCTURAL_AXE_RULES },
+    // The default reporter walks the whole document for a summary this does
+    // not use, and jsdom makes that slow for no gain.
+    resultTypes: ['violations'],
+  });
+  return results.violations.flatMap((v) =>
+    v.nodes.map((n) => `${v.id}: ${n.html.replace(/\s+/g, ' ').slice(0, 120)}`)
+  );
+};
+
+describe('KWCAG 5.1.3.3 텍스트 콘텐츠의 명도 대비', () => {
+  it('링크 색은 테마에 따라 갈린다', () => {
+    // `.main` is tuned against a white page: on the dark canvas `primary.main`
+    // is 4.19:1, under the 4.5:1 body text needs. Every link in a consuming app
+    // inherits this default, so it is the single highest-reach instance of that
+    // defect in the package.
+    const { container } = withProvider(<Link href="#">링크</Link>);
+    const cls = container.querySelector('a')?.className ?? '';
+
+    // Emotion compiles the conditional into a class; a flat string value would
+    // not produce a `_dark` variant at all.
+    expect(cls).not.toBe('');
+  });
+
+  it('호출부가 준 색을 버리지 않는다', () => {
+    // The old implementation narrowed with `typeof color === 'string'` and
+    // dropped anything else — so a per-theme `{ base, _dark }`, which is the
+    // documented way to fix a contrast problem, was silently replaced by the
+    // default. Accepted by the type, discarded at runtime, no error either way.
+    const custom = { base: 'danger.main', _dark: 'danger.dark' };
+    const { container } = withProvider(
+      <Link href="#" color={custom}>
+        링크
+      </Link>
+    );
+    const withCustom = container.querySelector('a')?.className ?? '';
+
+    const { container: plain } = withProvider(<Link href="#">링크</Link>);
+    const withDefault = plain.querySelector('a')?.className ?? '';
+
+    expect(withCustom).not.toBe(withDefault);
+  });
+});
+
+describe('axe — 구조·ARIA 규칙', () => {
+  it.each([
+    [
+      '이름이 있는 셀렉트',
+      <SelectField
+        key="select"
+        options={[{ label: 'One', value: '1' }]}
+        ariaLabel="분류 선택"
+      />,
+    ],
+    [
+      '이름이 있는 슬라이더',
+      <Slider key="slider" ariaLabel="탐색" value={[10]} min={0} max={100}>
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <SliderThumb />
+      </Slider>,
+    ],
+    [
+      '라디오 그룹',
+      <RadioGroup key="radio" defaultValue="a">
+        <Radio value="a">
+          <Radio.Control />
+          <Radio.Text>A</Radio.Text>
+        </Radio>
+        <Radio value="b">
+          <Radio.Control />
+          <Radio.Text>B</Radio.Text>
+        </Radio>
+      </RadioGroup>,
+    ],
+    ['파일 입력', <FileInput key="file" onChange={() => {}} />],
+  ])('%s', async (_name, ui) => {
+    const { container } = withProvider(ui);
+    expect(await axeViolations(container)).toEqual([]);
+  });
+});
+
+/**
+ * The link ramp's HOVER states, measured rather than rendered.
+ *
+ * The resting colour has a test above; the hover did not, and that is exactly
+ * where the defect got in. `defaultHoverColor` was written as "one step darker"
+ * — correct against a white page, and backwards on a dark one, where darker
+ * means *toward* the background. The dark hover landed on 4.19:1 while the
+ * resting colour it replaced had just been fixed to clear 4.5:1.
+ *
+ * No scanner catches this: axe measures the resting state only, and jsdom
+ * cannot resolve an emotion conditional into a colour. So this asserts the
+ * palette arithmetic directly, against the raw scale — which also holds if
+ * someone re-pegs `blue.100` or `rose.100` later for an unrelated reason.
+ *
+ * KWCAG 2.2 5.3.3 텍스트 콘텐츠의 명도 대비 applies to text in every state a
+ * user can put it in, and hover is a state a mouse user is IN while reading.
+ */
+describe('Link 색 대비 — 링크 램프의 hover 상태', () => {
+  const relativeLuminance = (hex: string) => {
+    const n = hex.replace('#', '');
+    const channels = [0, 2, 4].map(
+      (i) => parseInt(n.slice(i, i + 2), 16) / 255
+    );
+    const [r, g, b] = channels.map((c) =>
+      c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+    );
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const contrast = (a: string, b: string) => {
+    const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort(
+      (x, y) => y - x
+    );
+    return (hi + 0.05) / (lo + 0.05);
+  };
+
+  /** The canvas each mode's text is read against (`bg.surface`). */
+  const LIGHT_CANVAS = '#FFFFFF';
+  const DARK_CANVAS = '#181A20';
+  const AA_BODY_TEXT = 4.5;
+
+  /**
+   * Semantic token → raw hex, per mode. Only the steps this ramp uses; kept
+   * literal so the test breaks loudly if the semantic layer is re-pointed
+   * rather than silently measuring the wrong colour.
+   */
+  const RESOLVED: Record<string, { base: string; _dark: string }> = {
+    'primary.main': {
+      base: colors.blue[500].value,
+      _dark: colors.blue[300].value,
+    },
+    'primary.dark': {
+      base: colors.blue[700].value,
+      _dark: colors.blue[200].value,
+    },
+    'primary.darker': {
+      base: colors.blue[900].value,
+      _dark: colors.blue[100].value,
+    },
+    'danger.main': {
+      base: colors.rose[500].value,
+      _dark: colors.rose[300].value,
+    },
+    'danger.dark': {
+      base: colors.rose[700].value,
+      _dark: colors.rose[200].value,
+    },
+    'danger.darker': {
+      base: colors.rose[900].value,
+      _dark: colors.rose[100].value,
+    },
+  };
+
+  const resolve = (token: string, mode: 'base' | '_dark') => {
+    const entry = RESOLVED[token];
+    if (!entry) throw new Error(`토큰 ${token} 의 원색이 이 표에 없다`);
+    return entry[mode];
+  };
+
+  it.each([
+    ['기본 링크', LINK_RAMP.default],
+    ['기본 링크 hover', LINK_RAMP.defaultHover],
+    ['오류 링크', LINK_RAMP.error],
+    ['오류 링크 hover', LINK_RAMP.errorHover],
+  ])('%s 가 라이트·다크 양쪽에서 4.5:1 을 넘는다', (_what, ramp) => {
+    // Reads the tokens the COMPONENT actually uses. A version of this test that
+    // hardcoded the expected steps passed just fine with the hover pointing at
+    // `primary.main` — measuring the right arithmetic about the wrong colour.
+    expect(
+      contrast(resolve(ramp.base, 'base'), LIGHT_CANVAS)
+    ).toBeGreaterThanOrEqual(AA_BODY_TEXT);
+    expect(
+      contrast(resolve(ramp._dark, '_dark'), DARK_CANVAS)
+    ).toBeGreaterThanOrEqual(AA_BODY_TEXT);
+  });
+
+  it('hover 가 배경 반대쪽으로 간다 — 양쪽 모드에서', () => {
+    // The invariant the defect broke: hovering must make the link stand out
+    // MORE. "One step darker" is correct on a white page and backwards on a
+    // dark one, where darker means toward the background.
+    for (const [mode, canvas] of [
+      ['base', LIGHT_CANVAS],
+      ['_dark', DARK_CANVAS],
+    ] as const) {
+      const resting = contrast(resolve(LINK_RAMP.default[mode], mode), canvas);
+      const hover = contrast(
+        resolve(LINK_RAMP.defaultHover[mode], mode),
+        canvas
+      );
+      expect(
+        hover,
+        `${mode} 에서 hover 가 resting 보다 흐리다`
+      ).toBeGreaterThan(resting);
+    }
+  });
+});