feat: 入力要素のエラー表示を、aria-invalidをベースにした計算方法に修正する

kufu · Sep 17, 2024 · 5168188 · 5168188
1 parent f25b69f
commit 5168188
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
@@ -206,7 +206,6 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
       }
     }
   }, [managedHtmlFor])
-
   useEffect(() => {
     const inputWrapper = inputWrapperRef?.current
 
@@ -223,6 +222,27 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
       }
     }
   }, [describedbyIds])
+  useEffect(() => {
+    if (!autoBindErrorInput) {
+      return
+    }
+
+    const inputWrapper = inputWrapperRef?.current
+
+    if (inputWrapper) {
+      const input = inputWrapper.querySelector('[data-smarthr-ui-input="true"]')
+
+      if (!input) {
+        return
+      }
+
+      if (actualErrorMessages.length > 0) {
+        input.setAttribute('aria-invalid', 'true')
+      } else {
+        input.removeAttribute('aria-invalid')
+      }
+    }
+  }, [actualErrorMessages.length, autoBindErrorInput])
 
   return (
     <Stack
@@ -252,9 +272,7 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
         errorIconStyle={errorIconStyle}
       />
       <div className={childrenWrapperStyle} ref={inputWrapperRef}>
-        {decorateFirstInputElement(children, {
-          error: autoBindErrorInput && actualErrorMessages.length > 0,
-        })}
+        {children}
       </div>
       <SupplementaryMessageText
         supplementaryMessage={supplementaryMessage}

diff --git a/packages/smarthr-ui/src/components/Input/Input.tsx b/packages/smarthr-ui/src/components/Input/Input.tsx
@@ -51,12 +51,13 @@ const wrapper = tv({
     'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
     'contrast-more:shr-border-high-contrast',
     'focus-within:shr-focus-indicator',
+    '[&_[aria-invalid]]:shr-border-danger',
   ],
   variants: {
     disabled: {
       true: 'shr-pointer-events-none shr-bg-white-darken [&&&]:shr-border-default/50',
     },
-    error: {
+    actualError: {
       true: '[&]:shr-border-danger',
     },
     readOnly: {
@@ -96,6 +97,13 @@ export const Input = forwardRef<HTMLInputElement, Props & ElementProps>(
     ref,
   ) => {
     const innerRef = useRef<HTMLInputElement>(null)
+    const actualError = useMemo(() => {
+      if (error === undefined && innerRef.current) {
+        return innerRef.current.getAttribute('aria-invalid') ? true : undefined
+      }
+
+      return error
+    }, [error])
 
     useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
       ref,
@@ -132,7 +140,7 @@ export const Input = forwardRef<HTMLInputElement, Props & ElementProps>(
     const { backgroundColor } = useTheme()
 
     const wrapperStyleProps = useMemo(() => {
-      const wrapperStyle = wrapper({ disabled, error, readOnly, className })
+      const wrapperStyle = wrapper({ disabled, actualError, readOnly, className })
       const color = bgColor
         ? backgroundColor[bgColors[bgColor] as keyof typeof backgroundColor]
         : undefined
@@ -144,7 +152,7 @@ export const Input = forwardRef<HTMLInputElement, Props & ElementProps>(
           width: typeof width === 'number' ? `${width}px` : width,
         },
       }
-    }, [backgroundColor, bgColor, className, disabled, error, readOnly, width])
+    }, [backgroundColor, bgColor, className, disabled, actualError, readOnly, width])
     const { input, affix } = inner()
 
     return (
@@ -162,7 +170,7 @@ export const Input = forwardRef<HTMLInputElement, Props & ElementProps>(
           disabled={disabled}
           readOnly={readOnly}
           ref={innerRef}
-          aria-invalid={error || undefined}
+          aria-invalid={actualError}
           className={input()}
         />
         {suffix && (