pl-fe: a11y: add explanation to character counter

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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>

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",