fix: スクリーンリーダーの補足メッセージのdecorator対応

kufu · Nov 26, 2024 · cdfa61e · cdfa61e
1 parent f5cd719
commit cdfa61e
Showing 1 changed file with 37 additions and 18 deletions.
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -36,7 +36,11 @@ type Props = {
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<
-    'beforeMaxLettersCount' | 'afterMaxLettersCount' | 'afterMaxLettersCountExceeded'
+    | 'beforeMaxLettersCount'
+    | 'afterMaxLettersCount'
+    | 'afterMaxLettersCountExceeded'
+    | 'beforeScreenReaderMaxLettersDescription'
+    | 'afterScreenReaderMaxLettersDescription'
   >
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
@@ -62,6 +66,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: [
@@ -116,22 +123,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],
     )
 
@@ -273,7 +290,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         </span>
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          最大{maxLetters}文字入力できます。
+          {beforeScreenReaderMaxLettersDescription}
+          {maxLetters}
+          {afterScreenReaderMaxLettersDescription}
         </VisuallyHiddenText>
       </span>
     ) : (