From 3a43219140b24dde43b228167b919e86104d3992 Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Fri, 8 Nov 2024 15:30:41 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=E6=9C=80=E5=A4=A7=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E6=95=B0=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8=E3=81=AE?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E3=81=A8=E3=82=B9=E3=82=AF=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=83=B3=E3=83=AA=E3=83=BC=E3=83=80=E3=83=BC=E3=81=A7=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E3=81=99=E3=82=8B=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Textarea/Textarea.stories.tsx  | 121 ++++++++++++++++++
 .../src/components/Textarea/Textarea.tsx      |  90 ++++++++++---
 2 files changed, 194 insertions(+), 17 deletions(-)
 create mode 100644 packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000000..d9612b4c2e
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
@@ -0,0 +1,121 @@
+import { StoryFn } from '@storybook/react'
+import { userEvent, within } from '@storybook/test'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+import { FormControl } from '../FormControl'
+import { Stack } from '../Layout'
+
+import { Textarea } from './Textarea'
+
+export default {
+  title: 'Forms（フォーム）/Textarea',
+  component: Textarea,
+}
+
+const defaultValue = 'message👌'
+
+const Template: StoryFn = () => {
+  const [value1, setValue1] = useState(defaultValue)
+  const [value2, setValue2] = useState(defaultValue)
+  const [value3, setValue3] = useState(defaultValue)
+  return (
+    <ListStack>
+      <li>
+        <FormControl title="標準">
+          <Textarea name="default" />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="入力欄を自動で広げる（初期： 3行、最大： 10行）">
+          <Textarea name="auto_resize" cols={35} rows={3} maxRows={10} autoResize />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="幅指定">
+          <Textarea name="width" width="100%" />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="disabled">
+          <Textarea name="disabled" disabled={true} />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="エラー時" autoBindErrorInput={false}>
+          <Textarea name="error" error={true} />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="エラー時 with FormControl" errorMessages={['エラーメッセージ']}>
+          <Textarea name="error" />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="最大文字数 (defaultValue)">
+          <Textarea
+            name="max_length_with_default_value"
+            maxLetters={140}
+            defaultValue={defaultValue}
+          />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="最大文字数 (value)">
+          <Textarea
+            name="max_length_with_value"
+            maxLetters={140}
+            value={value1}
+            onChange={(e) => setValue1(e.target.value)}
+          />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="最大文字数 (value)">
+          <Textarea
+            name="max_length_with_value_over"
+            maxLetters={10}
+            value={value2}
+            onChange={(e) => setValue2(e.target.value)}
+          />
+        </FormControl>
+      </li>
+      <li>
+        <FormControl title="最大文字数 (decorators)">
+          <Textarea
+            name="max_length_with_value_and_decorators"
+            maxLetters={140}
+            value={value3}
+            onChange={(e) => setValue3(e.target.value)}
+            decorators={{
+              beforeMaxLettersCount: (txt) => `entry limit(${txt})`,
+              afterMaxLettersCount: (txt) => ` characters(${txt})`,
+              afterMaxLettersCountExceeded: (txt) => ` exceeded(${txt})`,
+            }}
+          />
+        </FormControl>
+      </li>
+    </ListStack>
+  )
+}
+
+export const All = Template.bind({})
+
+export const RegInput = Template.bind({})
+RegInput.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const notResizableTextarea = await canvas.findByLabelText('標準')
+  // デフォルトでは入力欄が広がらないことを確認する
+  await userEvent.type(notResizableTextarea, 'hoge\n'.repeat(3), { delay: 0.1 })
+
+  const resizableTextarea = await canvas.findByLabelText(
+    '入力欄を自動で広げる（初期： 3行、最大： 10行）',
+  )
+  // 11行入力し、入力欄が10行以上広がらないことを確認する
+  await userEvent.type(resizableTextarea, 'hoge\n'.repeat(11), { delay: 0.1 })
+}
+
+const ListStack = styled(Stack).attrs({ forwardedAs: 'ul', gap: 1.5 })`
+  padding: 0 24px;
+  list-style: none;
+`
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index f949730a4d..e55fb81246 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -17,6 +17,7 @@ import { tv } from 'tailwind-variants'
 import { debounce } from '../../libs/debounce'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
+import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
 import type { DecoratorsType } from '../../types'
 
@@ -36,7 +37,9 @@ type Props = {
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<'beforeMaxLettersCount' | 'afterMaxLettersCount'>
+  decorators?: DecoratorsType<
+    'beforeMaxLettersCount' | 'afterMaxLettersCount' | 'afterMaxLettersCountExceeded'
+  >
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -59,6 +62,7 @@ const getStringLength = (value: string | number | readonly string[]) => {
 
 const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
 const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
+const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = '超過'
 
 const textarea = tv({
   slots: {
@@ -72,16 +76,14 @@ const textarea = tv({
       'aria-[invalid]:shr-border-danger',
     ],
     counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm',
-    counterText: 'shr-font-bold',
+    counterText: 'shr-text-black',
+    srOnlyNotice: 'shr-sr-only',
   },
   variants: {
     error: {
       true: {
         counterText: 'shr-text-danger',
       },
-      false: {
-        counterText: 'shr-text-grey',
-      },
     },
   },
   defaultVariants: {
@@ -108,12 +110,21 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     ref,
   ) => {
     const maxLettersId = useId()
+    const maxLettersNoticeId = useId()
     const actualMaxLettersId = maxLetters ? maxLettersId : undefined
 
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const currentValue = props.defaultValue || props.value
     const [interimRows, setInterimRows] = useState(rows)
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
+    const [srCounterMessage, setSrCounterMessage] = useState('')
+
+    const maxLettersCountExceeded = useMemo(
+      () =>
+        decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) ||
+        TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED,
+      [decorators],
+    )
     const beforeMaxLettersCount = useMemo(
       () =>
         decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
@@ -127,6 +138,23 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [decorators],
     )
 
+    const getCounterMessage = useCallback(
+      (counterValue: number) => {
+        if (maxLetters === undefined) return
+
+        if (counterValue > maxLetters) {
+          // {count}文字超過
+          return `${counterValue - maxLetters}${afterMaxLettersCount}${maxLettersCountExceeded}`
+        }
+
+        // あと{count}文字
+        return `${beforeMaxLettersCount}${maxLetters - counterValue}${afterMaxLettersCount}`
+      },
+      [maxLetters, maxLettersCountExceeded, afterMaxLettersCount, beforeMaxLettersCount],
+    )
+
+    const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])
+
     useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
       ref,
       () => textareaRef.current,
@@ -140,7 +168,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedUpdateCount = useCallback(
-      debounce((value) => {
+      debounce((value: string) => {
         startTransition(() => {
           setCount(getStringLength(value))
         })
@@ -148,6 +176,21 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [],
     )
 
+    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージ更新遅延しています
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedUpdateSrCounterMessage = useCallback(
+      debounce((value: string) => {
+        startTransition(() => {
+          const counterText = getCounterMessage(getStringLength(value))
+
+          if (counterText) {
+            setSrCounterMessage(counterText)
+          }
+        })
+      }, 1000),
+      [getCounterMessage],
+    )
+
     const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (onChange) {
@@ -155,10 +198,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         }
 
         if (maxLetters) {
-          debouncedUpdateCount(event.currentTarget.value)
+          const inputValue = event.currentTarget.value
+          debouncedUpdateCount(inputValue)
+          debouncedUpdateSrCounterMessage(inputValue)
         }
       },
-      [debouncedUpdateCount, maxLetters, onChange],
+      [debouncedUpdateCount, maxLetters, onChange, debouncedUpdateSrCounterMessage],
     )
 
     const handleInput = useCallback(
@@ -191,26 +236,32 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [autoResize, maxRows, onInput, rows],
     )
     const { textareaStyleProps, counterStyle, counterTextStyle } = useMemo(() => {
-      const { textareaEl, counter, counterText } = textarea()
+      const { textareaEl, counter, counterText, srOnlyNotice } = textarea()
       return {
         textareaStyleProps: {
           className: textareaEl({ className }),
           style: { width: typeof width === 'number' ? `${width}px` : width },
         },
         counterStyle: counter(),
-        counterTextStyle: counterText({ error: !!(maxLetters && maxLetters - count <= 0) }),
+        counterTextStyle: counterText({ error: !!(maxLetters && maxLetters - count < 0) }),
+        srOnlyNoticeStyle: srOnlyNotice(),
       }
     }, [className, count, maxLetters, width])
 
+    const hasInputError = useMemo(() => {
+      const isCharLengthExceeded = maxLetters && count > maxLetters
+      return error || isCharLengthExceeded || undefined
+    }, [error, maxLetters, count])
+
     const body = (
       <textarea
         {...props}
         {...textareaStyleProps}
         data-smarthr-ui-input="true"
-        aria-describedby={actualMaxLettersId}
+        aria-describedby={`${maxLettersNoticeId} ${actualMaxLettersId}`}
         onChange={handleChange}
         ref={textareaRef}
-        aria-invalid={error || undefined}
+        aria-invalid={hasInputError || undefined}
         rows={interimRows}
         onInput={handleInput}
       />
@@ -219,13 +270,18 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     return maxLetters ? (
       <span>
         {body}
-        <span className={counterStyle} id={actualMaxLettersId}>
-          {beforeMaxLettersCount}
-          <span className={counterTextStyle}>
-            {maxLetters - count}/{maxLetters}
+        <span className={counterStyle}>
+          <span className={counterTextStyle} id={actualMaxLettersId} aria-hidden={true}>
+            {counterVisualMessage}
           </span>
-          {afterMaxLettersCount}
         </span>
+
+        <VisuallyHiddenText aria-live="polite" aria-atomic={true}>
+          {srCounterMessage}
+        </VisuallyHiddenText>
+        <VisuallyHiddenText id={maxLettersNoticeId}>
+          こちらは文字カウンター付きの入力欄です。最大{maxLetters}文字まで入力できます。
+        </VisuallyHiddenText>
       </span>
     ) : (
       body

From 4922f0616d437d9ec907edcd8f29e777a31ef672 Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Fri, 8 Nov 2024 19:24:04 +0900
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E4=B8=8D=E8=A6=81=E3=81=AA=E3=82=B3?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=AE=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index e55fb81246..d1a62d918d 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -77,7 +77,6 @@ const textarea = tv({
     ],
     counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm',
     counterText: 'shr-text-black',
-    srOnlyNotice: 'shr-sr-only',
   },
   variants: {
     error: {
@@ -236,7 +235,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [autoResize, maxRows, onInput, rows],
     )
     const { textareaStyleProps, counterStyle, counterTextStyle } = useMemo(() => {
-      const { textareaEl, counter, counterText, srOnlyNotice } = textarea()
+      const { textareaEl, counter, counterText } = textarea()
       return {
         textareaStyleProps: {
           className: textareaEl({ className }),
@@ -244,7 +243,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         },
         counterStyle: counter(),
         counterTextStyle: counterText({ error: !!(maxLetters && maxLetters - count < 0) }),
-        srOnlyNoticeStyle: srOnlyNotice(),
       }
     }, [className, count, maxLetters, width])
 
@@ -276,9 +274,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           </span>
         </span>
 
-        <VisuallyHiddenText aria-live="polite" aria-atomic={true}>
-          {srCounterMessage}
-        </VisuallyHiddenText>
+        <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
           こちらは文字カウンター付きの入力欄です。最大{maxLetters}文字まで入力できます。
         </VisuallyHiddenText>

From c0e7cd7cef6769eabfc3997b4eab7c12e9777764 Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Wed, 13 Nov 2024 19:37:31 +0900
Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=E4=B8=8D=E8=A6=81=E3=81=AEstory?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Textarea/Textarea.stories.tsx  | 121 ------------------
 1 file changed, 121 deletions(-)
 delete mode 100644 packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
deleted file mode 100644
index d9612b4c2e..0000000000
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.stories.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { StoryFn } from '@storybook/react'
-import { userEvent, within } from '@storybook/test'
-import React, { useState } from 'react'
-import styled from 'styled-components'
-
-import { FormControl } from '../FormControl'
-import { Stack } from '../Layout'
-
-import { Textarea } from './Textarea'
-
-export default {
-  title: 'Forms（フォーム）/Textarea',
-  component: Textarea,
-}
-
-const defaultValue = 'message👌'
-
-const Template: StoryFn = () => {
-  const [value1, setValue1] = useState(defaultValue)
-  const [value2, setValue2] = useState(defaultValue)
-  const [value3, setValue3] = useState(defaultValue)
-  return (
-    <ListStack>
-      <li>
-        <FormControl title="標準">
-          <Textarea name="default" />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="入力欄を自動で広げる（初期： 3行、最大： 10行）">
-          <Textarea name="auto_resize" cols={35} rows={3} maxRows={10} autoResize />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="幅指定">
-          <Textarea name="width" width="100%" />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="disabled">
-          <Textarea name="disabled" disabled={true} />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="エラー時" autoBindErrorInput={false}>
-          <Textarea name="error" error={true} />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="エラー時 with FormControl" errorMessages={['エラーメッセージ']}>
-          <Textarea name="error" />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="最大文字数 (defaultValue)">
-          <Textarea
-            name="max_length_with_default_value"
-            maxLetters={140}
-            defaultValue={defaultValue}
-          />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="最大文字数 (value)">
-          <Textarea
-            name="max_length_with_value"
-            maxLetters={140}
-            value={value1}
-            onChange={(e) => setValue1(e.target.value)}
-          />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="最大文字数 (value)">
-          <Textarea
-            name="max_length_with_value_over"
-            maxLetters={10}
-            value={value2}
-            onChange={(e) => setValue2(e.target.value)}
-          />
-        </FormControl>
-      </li>
-      <li>
-        <FormControl title="最大文字数 (decorators)">
-          <Textarea
-            name="max_length_with_value_and_decorators"
-            maxLetters={140}
-            value={value3}
-            onChange={(e) => setValue3(e.target.value)}
-            decorators={{
-              beforeMaxLettersCount: (txt) => `entry limit(${txt})`,
-              afterMaxLettersCount: (txt) => ` characters(${txt})`,
-              afterMaxLettersCountExceeded: (txt) => ` exceeded(${txt})`,
-            }}
-          />
-        </FormControl>
-      </li>
-    </ListStack>
-  )
-}
-
-export const All = Template.bind({})
-
-export const RegInput = Template.bind({})
-RegInput.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const notResizableTextarea = await canvas.findByLabelText('標準')
-  // デフォルトでは入力欄が広がらないことを確認する
-  await userEvent.type(notResizableTextarea, 'hoge\n'.repeat(3), { delay: 0.1 })
-
-  const resizableTextarea = await canvas.findByLabelText(
-    '入力欄を自動で広げる（初期： 3行、最大： 10行）',
-  )
-  // 11行入力し、入力欄が10行以上広がらないことを確認する
-  await userEvent.type(resizableTextarea, 'hoge\n'.repeat(11), { delay: 0.1 })
-}
-
-const ListStack = styled(Stack).attrs({ forwardedAs: 'ul', gap: 1.5 })`
-  padding: 0 24px;
-  list-style: none;
-`

From 6ae25f53d31525fb847ccc3c68b601f6a9fc48ac Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Thu, 14 Nov 2024 17:21:03 +0900
Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=E6=96=87=E8=A8=80=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index d1a62d918d..057f48104f 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -62,7 +62,7 @@ const getStringLength = (value: string | number | readonly string[]) => {
 
 const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
 const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
-const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = '超過'
+const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = 'オーバー'
 
 const textarea = tv({
   slots: {
@@ -255,8 +255,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       <textarea
         {...props}
         {...textareaStyleProps}
+        {...(maxLetters && { 'aria-describedby': `${maxLettersNoticeId} ${actualMaxLettersId}` })}
         data-smarthr-ui-input="true"
-        aria-describedby={`${maxLettersNoticeId} ${actualMaxLettersId}`}
         onChange={handleChange}
         ref={textareaRef}
         aria-invalid={hasInputError || undefined}
@@ -276,7 +276,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
 
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          こちらは文字カウンター付きの入力欄です。最大{maxLetters}文字まで入力できます。
+          最大{maxLetters}文字入力できます。
         </VisuallyHiddenText>
       </span>
     ) : (

From 25903ea72070d880ddface4f2621ae2b4f4b9b88 Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Thu, 21 Nov 2024 19:36:16 +0900
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20useId=E3=82=92prefix=E3=81=A8?=
 =?UTF-8?q?=E3=81=97=E3=81=A6=E5=86=8D=E5=88=A9=E7=94=A8=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 057f48104f..953abb0f8f 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -109,7 +109,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)
@@ -175,7 +175,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [],
     )
 
-    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージ更新遅延しています
+    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedUpdateSrCounterMessage = useCallback(
       debounce((value: string) => {
@@ -273,7 +273,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
             {counterVisualMessage}
           </span>
         </span>
-
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
           最大{maxLetters}文字入力できます。

From 22ba73e3e15278822761a48aa7723e2f93ff98af Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Tue, 26 Nov 2024 19:58:20 +0900
Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=E3=82=B9=E3=82=AF=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=83=B3=E3=83=AA=E3=83=BC=E3=83=80=E3=83=BC=E3=81=AE=E8=A3=9C?=
 =?UTF-8?q?=E8=B6=B3=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8=E3=81=AE?=
 =?UTF-8?q?decorator=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Textarea/Textarea.tsx      | 55 +++++++++++++------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 953abb0f8f..4d9f8134b3 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -38,7 +38,11 @@ type Props = {
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<
-    'beforeMaxLettersCount' | 'afterMaxLettersCount' | 'afterMaxLettersCountExceeded'
+    | 'beforeMaxLettersCount'
+    | 'afterMaxLettersCount'
+    | 'afterMaxLettersCountExceeded'
+    | 'beforeScreenReaderMaxLettersDescription'
+    | 'afterScreenReaderMaxLettersDescription'
   >
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
@@ -64,6 +68,9 @@ const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
 const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
 const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = 'オーバー'
 
+const SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION = '最大'
+const SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION = '文字入力できます'
+
 const textarea = tv({
   slots: {
     textareaEl: [
@@ -118,22 +125,32 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
     const [srCounterMessage, setSrCounterMessage] = useState('')
 
-    const maxLettersCountExceeded = useMemo(
-      () =>
-        decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) ||
-        TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED,
-      [decorators],
-    )
-    const beforeMaxLettersCount = useMemo(
-      () =>
-        decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
-        TEXT_BEFORE_MAXLETTERS_COUNT,
-      [decorators],
-    )
-    const afterMaxLettersCount = useMemo(
-      () =>
-        decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) ||
-        TEXT_AFTER_MAXLETTERS_COUNT,
+    const {
+      afterMaxLettersCount,
+      beforeMaxLettersCount,
+      maxLettersCountExceeded,
+      beforeScreenReaderMaxLettersDescription,
+      afterScreenReaderMaxLettersDescription,
+    } = useMemo(
+      () => ({
+        beforeMaxLettersCount:
+          decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
+          TEXT_BEFORE_MAXLETTERS_COUNT,
+        afterMaxLettersCount:
+          decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) ||
+          TEXT_AFTER_MAXLETTERS_COUNT,
+        maxLettersCountExceeded:
+          decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) ||
+          TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED,
+        beforeScreenReaderMaxLettersDescription:
+          decorators?.beforeScreenReaderMaxLettersDescription?.(
+            SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
+          ) || SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
+        afterScreenReaderMaxLettersDescription:
+          decorators?.afterScreenReaderMaxLettersDescription?.(
+            SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
+          ) || SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
+      }),
       [decorators],
     )
 
@@ -275,7 +292,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         </span>
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          最大{maxLetters}文字入力できます。
+          {beforeScreenReaderMaxLettersDescription}
+          {maxLetters}
+          {afterScreenReaderMaxLettersDescription}
         </VisuallyHiddenText>
       </span>
     ) : (

From 3377ec6a087e7289b05b0a6aee2759a89f6045ee Mon Sep 17 00:00:00 2001
From: Daichi Hashimura <dhashi92@gmail.com>
Date: Wed, 18 Dec 2024 10:05:25 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 4d9f8134b3..4080689d46 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -159,7 +159,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         if (maxLetters === undefined) return
 
         if (counterValue > maxLetters) {
-          // {count}文字超過
+          // {count}文字オーバー
           return `${counterValue - maxLetters}${afterMaxLettersCount}${maxLettersCountExceeded}`
         }