From 8dd657a043ded83117402e38306c1e4ae46eba9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sat, 28 Jun 2025 13:49:45 +0200
Subject: [PATCH] pl-fe: a11y: add explanation to character counter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../compose/components/text-character-counter.tsx         | 8 ++++++++
 packages/pl-fe/src/locales/en.json                        | 1 +
 2 files changed, 9 insertions(+)

diff --git a/packages/pl-fe/src/features/compose/components/text-character-counter.tsx b/packages/pl-fe/src/features/compose/components/text-character-counter.tsx
index ce696b753..6ef20d836 100644
--- a/packages/pl-fe/src/features/compose/components/text-character-counter.tsx
+++ b/packages/pl-fe/src/features/compose/components/text-character-counter.tsx
@@ -1,19 +1,27 @@
 import clsx from 'clsx';
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { length } from 'stringz';
 
+const messages = defineMessages({
+  characterCount: { id: 'compose_form.remaining_character_count', defaultMessage: 'Remaining characters: {value} of {max}' },
+});
+
 interface ITextCharacterCounter {
   max: number;
   text: string;
 }
 
 const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) => {
+  const intl = useIntl();
+
   const checkRemainingText = (diff: number) => (
     <span
       className={clsx('text-sm font-medium', {
         'text-gray-700': diff >= 0,
         'text-secondary-600': diff < 0,
       })}
+      title={intl.formatMessage(messages.characterCount, { value: diff, max })}
     >
       {diff}
     </span>
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json
index 996de2f10..94c74be6a 100644
--- a/packages/pl-fe/src/locales/en.json
+++ b/packages/pl-fe/src/locales/en.json
@@ -537,6 +537,7 @@
   "compose_form.preview_label": "Preview",
   "compose_form.publish": "Post",
   "compose_form.publish_loud": "{publish}!",
+  "compose_form.remaining_character_count": "Remaining characters: {value} of {max}",
   "compose_form.save_changes": "Save changes",
   "compose_form.schedule": "Schedule",
   "compose_form.sensitive.marked": "Media is marked as sensitive",