fix: useIdをprefixとして再利用する

kufu · Nov 26, 2024 · f5cd719 · f5cd719
1 parent 6bfc5e6
commit f5cd719
Showing 1 changed file with 2 additions and 3 deletions.
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -107,7 +107,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     ref,
   ) => {
     const maxLettersId = useId()
-    const maxLettersNoticeId = useId()
+    const maxLettersNoticeId = `${maxLettersId}-notice`
     const actualMaxLettersId = maxLetters ? maxLettersId : undefined
 
     const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -173,7 +173,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [],
     )
 
-    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージ更新遅延しています
+    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedUpdateSrCounterMessage = useCallback(
       debounce((value: string) => {
@@ -271,7 +271,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
             {counterVisualMessage}
           </span>
         </span>
-
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
           最大{maxLetters}文字入力できます。