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

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Box, Flex, VStack } from '@chakra-ui/react';
 
 import { useTranslate } from '@/hooks/useTranslate';
@@ -20,6 +21,8 @@ export function ErrorFallback({
 }: ErrorFallbackProps) {
   const translate = useTranslate();
   const showToast = useToast();
+  // Names the landmark below with the same words the card shows as its title.
+  const titleId = useId();
 
   const errorInfo = {
     errorId:
@@ -61,7 +64,22 @@ User Agent: ${errorInfo.userAgent}`;
   };
 
   return (
-    <Flex minH="100vh" align="center" justify="center" p={8}>
+    // A landmark, and a named one. This card replaces whatever failed — often
+    // the whole page, so the host's `<main>` goes with it — and a screen-reader
+    // user then has nothing to navigate by: axe reports every node under
+    // `region`, and there is no landmark to jump to (KWCAG 2.1 5.2.4.1 반복
+    // 영역 건너뛰기). A `<section>` labelled by the error title is a region
+    // landmark wherever it renders, which `<main>` would not be — a segment-level
+    // boundary leaves the host's `<main>` in place, and two of those is its own
+    // failure.
+    <Flex
+      as="section"
+      aria-labelledby={titleId}
+      minH="100vh"
+      align="center"
+      justify="center"
+      p={8}
+    >
       <Container disableResponsive maxW="container.sm">
         <Card
           p={12}
@@ -83,7 +101,12 @@ User Agent: ${errorInfo.userAgent}`;
 
             {/* Error Title */}
             <VStack gap={3} align="center" w="full">
-              <H1 color="fg.default" textStyle="h2" fontWeight="bold">
+              <H1
+                id={titleId}
+                color="fg.default"
+                textStyle="h2"
+                fontWeight="bold"
+              >
                 {translate('error_boundary_title')}
               </H1>
               <Subtitle color="fg.muted" textStyle="h5" maxW="md">
@@ -115,7 +138,11 @@ User Agent: ${errorInfo.userAgent}`;
               p={6}
               w="full"
             >
-              <H4 color="primary.dark" mb={4} textAlign="center">
+              {/* `as="h2"`: `H4` is the type size wanted here, but this block
+                  sits directly under the card's `<h1>` — an `<h4>` there skips
+                  two levels and tells a screen-reader user there are sections
+                  they missed (KWCAG 5.2.4.2 제목 제공). */}
+              <H4 as="h2" color="primary.dark" mb={4} textAlign="center">
                 {translate('support_information')}
               </H4>
               <VStack gap={2} align="stretch" mb={4}>

package/src/components/FileInput/FileInput.tsx

@@ -27,8 +27,12 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
     };
 
     return (
+      // No `role="button"` on this wrapper. It is not a button — the `<label>`
+      // inside is what activates the file input — and claiming the role put an
+      // interactive element inside another (axe `nested-interactive`), which is
+      // a state screen readers have no sensible way to announce
+      // (KWCAG 2.1 5.4.2.1 웹 애플리케이션 접근성 준수).
       <Flex
-        role="button"
         w="100%"
         h="100%"
         maxH={32}
@@ -42,8 +46,13 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
         borderRadius="md"
         {...containerStyle}
       >
+        {/* `className="group"`, not `role="group"`. The role was doing nothing for
+            assistive tech (a `<label>` may not be a group — axe
+            `aria-allowed-role`) and nothing for the hover effect either: Chakra's
+            `_groupHover` compiles to `.group:hover &`, so it needs the CLASS.
+            The reveal-on-hover below has therefore never fired. */}
         <label
-          role="group"
+          className="group"
           style={{ width: '100%', height: '100%', cursor: 'pointer' }}
         >
           {bgImage && (

package/src/components/Markdown/Markdown.tsx

@@ -22,7 +22,12 @@ const H2Wrapper = (props: any) => <H2 {...props} />;
 const H3Wrapper = (props: any) => <H3 {...props} />;
 const H4Wrapper = (props: any) => <H4 {...props} />;
 const H5Wrapper = (props: any) => <H5 {...props} />;
-const SubtitleWrapper = (props: any) => <Subtitle {...props} />;
+// `as="h6"` explicitly. `Subtitle` renders a paragraph by default now (its call
+// sites are overwhelmingly helper copy that was never a heading), but this
+// wrapper is markdown's `h6` — a heading the author actually wrote. Inheriting
+// the new default here would silently drop `###### 제목` out of the document
+// outline, which is the same KWCAG 5.2.4.2 (제목 제공) defect inverted.
+const SubtitleWrapper = (props: any) => <Subtitle as="h6" {...props} />;
 const TheadWrapper = (props: any) => <Thead {...props} />;
 const TbodyWrapper = (props: any) => <Tbody {...props} />;
 const TrWrapper = (props: any) => <Tr {...props} />;

package/src/components/Pagination/Pagination.tsx

@@ -81,6 +81,11 @@ export const Pagination = ({
             <SelectField<number>
               size="sm"
               width="5.5rem"
+              // The visible label for this control is the "개씩 보기" text beside
+              // it, which the select itself cannot claim — so it carries the
+              // same words as its own hidden label rather than shipping
+              // nameless (KWCAG 5.3.4.1 레이블 제공).
+              ariaLabel={translate('pagination_items_per_page') as string}
               options={itemsPerPageOptions.map((option) => ({
                 label: option.toString(),
                 value: option,

package/src/components/Radio/RadioControl.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import { RadioGroup, RadioGroupItemControlProps } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
@@ -6,9 +6,23 @@ import { focusRing } from '@/utils/focusRing';
 export const RadioControl = forwardRef<
   HTMLDivElement,
   RadioGroupItemControlProps
->((props, ref) => (
-  <RadioGroup.ItemControl ref={ref} {...focusRing} {...props}>
-    <RadioGroup.ItemIndicator />
-  </RadioGroup.ItemControl>
-));
+>((props, ref) => {
+  // Chakra derives the indicator's id from the same `ids.itemControl` it gives
+  // the control it sits inside, so every radio on the page shipped TWO elements
+  // with one id — a markup error under KWCAG 2.1 5.4.1.1 마크업 오류 방지, which
+  // Korean evaluators still count even though WCAG 2.2 dropped SC 4.1.1. It also
+  // breaks anything that resolves the control by id, since `getElementById`
+  // returns whichever came first.
+  //
+  // Nothing references the indicator — it is the dot inside the control — so any
+  // unique value fixes it, and `useId` is the one that stays stable across
+  // server and client render.
+  const indicatorId = useId();
+
+  return (
+    <RadioGroup.ItemControl ref={ref} {...focusRing} {...props}>
+      <RadioGroup.ItemIndicator id={indicatorId} />
+    </RadioGroup.ItemControl>
+  );
+});
 RadioControl.displayName = 'Radio.Control';

package/src/components/Select/ComboboxField.tsx

@@ -19,6 +19,7 @@ export function ComboboxField<T = string>({
   onChange,
   placeholder,
   label,
+  ariaLabel,
   size = 'md',
   invalid,
   disabled,
@@ -60,7 +61,16 @@ export function ComboboxField<T = string>({
       }}
       onInputValueChange={(details) => filter(details.inputValue)}
     >
-      {label != null && <Combobox.Label>{label}</Combobox.Label>}
+      {/* Same as `SelectField`: the label part is the target of the input's
+          `aria-labelledby`, so omitting it leaves the control unnamed rather
+          than unlabelled (KWCAG 5.3.4.1 레이블 제공). */}
+      {label != null ? (
+        <Combobox.Label>{label}</Combobox.Label>
+      ) : (
+        (ariaLabel ?? placeholder) && (
+          <Combobox.Label srOnly>{ariaLabel ?? placeholder}</Combobox.Label>
+        )
+      )}
       <Combobox.Control>
         <Combobox.Input placeholder={placeholder} />
         <Combobox.IndicatorGroup>

package/src/components/Select/Select.types.ts

@@ -20,6 +20,22 @@ interface FieldBaseProps<T> {
   placeholder?: string;
   /** Optional label rendered above the control. */
   label?: ReactNode;
+  /**
+   * Accessible name for the trigger when no visible `label` is rendered — a
+   * field labelled by a table column header, a `FieldRow`, or the sentence
+   * around it.
+   *
+   * Without one of `label` / `ariaLabel` / `placeholder` the trigger has **no
+   * accessible name at all**: the composition points `aria-labelledby` at a
+   * label part that is not rendered, the reference dangles, and the control
+   * announces as a bare "button" however much text it shows (KWCAG 2.1
+   * 5.3.4.1 레이블 제공, axe `button-name`).
+   *
+   * Rendered as a visually hidden label rather than an `aria-label` so the name
+   * is in the server-rendered markup — an attribute applied after hydration
+   * leaves a window in which the control is nameless.
+   */
+  ariaLabel?: string;
   size?: SelectSize;
   invalid?: boolean;
   disabled?: boolean;

package/src/components/Select/SelectField.tsx

@@ -19,6 +19,7 @@ export function SelectField<T = string>({
   onChange,
   placeholder,
   label,
+  ariaLabel,
   size = 'md',
   invalid,
   disabled,
@@ -61,7 +62,19 @@ export function SelectField<T = string>({
       }}
     >
       <Select.HiddenSelect />
-      {label != null && <Select.Label>{label}</Select.Label>}
+      {/* The label part is what the trigger's `aria-labelledby` points at, and
+          Chakra emits that reference whether or not the part is rendered. Leave
+          it out and the reference dangles, so the trigger resolves to no name —
+          a "button" to a screen reader, whatever the selected option says
+          (KWCAG 5.3.4.1 레이블 제공). So it is always rendered: visibly when the
+          field has a label, hidden when the name lives elsewhere on screen. */}
+      {label != null ? (
+        <Select.Label>{label}</Select.Label>
+      ) : (
+        (ariaLabel ?? placeholder) && (
+          <Select.Label srOnly>{ariaLabel ?? placeholder}</Select.Label>
+        )
+      )}
       <Select.Control>
         <Select.Trigger>
           <Select.ValueText placeholder={placeholder} />

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

@@ -7,15 +7,25 @@ export interface LinkCustomProps extends Omit<LinkProps, 'variant'> {
 
 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 = { base: 'primary.main', _dark: 'primary.dark' };
+    const errorColor = { base: 'danger.main', _dark: 'danger.dark' };
+    const defaultHoverColor = { base: 'primary.dark', _dark: 'primary.main' };
+    const errorHoverColor = { base: 'danger.dark', _dark: 'danger.main' };
 
+    // `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/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