fix(TextField): avoid right helper text from wrapping, fix spacing an…

…d aria label for maxCount text when multiline is true (#1272) Issues: - [WEB-2009](https://jira.tid.es/browse/WEB-2009) - [WEB-2070](https://jira.tid.es/browse/WEB-2070)
Telefonica · Oct 21, 2024 · 85fcb31 · 85fcb31 · github-actions · Oct 21, 2024
1 parent 374f863
commit 85fcb31
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 4 deletions.
diff --git a/...t-test-tsx-text-field-multiline-and-max-length-with-long-helper-text-1-snap.png b/...t-test-tsx-text-field-multiline-and-max-length-with-long-helper-text-1-snap.png
diff --git a/src/__screenshot_tests__/input-fields-screenshot-test.tsx b/src/__screenshot_tests__/input-fields-screenshot-test.tsx
@@ -65,6 +65,24 @@ test('TextField - multiline and maxLength', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('TextField - multiline and maxLength with long helperText', async () => {
+    await openStoryPage({
+        id: 'components-input-fields-textfield--uncontrolled',
+        device: 'MOBILE_IOS',
+        args: {
+            defaultValue: '',
+            maxLength: true,
+            multiline: true,
+            helperText: 'This is a very long helper text to test that the maxLength text is not wrapping',
+        },
+    });
+
+    const fieldWrapper = await screen.findByTestId('text-field');
+    const image = await fieldWrapper.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('TextField - long label', async () => {
     await openStoryPage({
         id: 'components-input-fields-textfield--uncontrolled',

diff --git a/src/text-field-base.tsx b/src/text-field-base.tsx
@@ -217,7 +217,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
         },
         ref
     ) => {
-        const {preventCopyInFormFields} = useTheme();
+        const {preventCopyInFormFields, texts, t} = useTheme();
         preventCopy = preventCopy ?? preventCopyInFormFields;
         const reactId = React.useId();
         const id = idProp || reactId;
@@ -319,6 +319,14 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                         leftText={helperText}
                         id={helperTextid}
                         rightText={multiline && maxLength ? `${characterCount}/${maxLength}` : undefined}
+                        rightTextLabel={
+                            multiline && maxLength
+                                ? texts.formTextMultilineMaxCount ||
+                                  t(tokens.formTextMultilineMaxCount)
+                                      .replace('1$s', String(characterCount))
+                                      .replace('2$s', String(maxLength))
+                                : undefined
+                        }
                     />
                 }
                 multiline={multiline}

diff --git a/src/text-field-components.css.ts b/src/text-field-components.css.ts
@@ -126,6 +126,8 @@ export const leftHelperText = style([
     },
 ]);
 
+export const rightHelperText = sprinkles({paddingLeft: 16});
+
 export const helperText = sprinkles({
     flexGrow: 1,
     paddingTop: 4,

diff --git a/src/text-field-components.tsx b/src/text-field-components.tsx
@@ -9,6 +9,7 @@ import {vars} from './skins/skin-contract.css';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as tokens from './text-tokens';
 import IconWarningRegular from './generated/mistica-icons/icon-warning-regular';
+import ScreenReaderOnly from './screen-reader-only';
 
 import type {DataAttributes} from './utils/types';
 
@@ -77,12 +78,19 @@ export const Label = ({
 type HelperTextProps = {
     leftText?: string;
     rightText?: string;
+    rightTextLabel?: string;
     error?: boolean;
     id?: string;
     children?: void;
 };
 
-export const HelperText = ({leftText, rightText, error, id}: HelperTextProps): JSX.Element => {
+export const HelperText = ({
+    leftText,
+    rightText,
+    rightTextLabel,
+    error,
+    id,
+}: HelperTextProps): JSX.Element => {
     const isInverse = useIsInverseOrMediaVariant();
     const leftColor = isInverse
         ? vars.colors.textPrimaryInverse
@@ -106,8 +114,20 @@ export const HelperText = ({leftText, rightText, error, id}: HelperTextProps): J
                 </p>
             )}
             {rightText && (
-                <div className={classnames(styles.helperText)}>
-                    <Text1 color={rightColor} regular as="p" textAlign="right">
+                <div className={classnames(styles.helperText, {[styles.rightHelperText]: !!leftText})}>
+                    {rightTextLabel && (
+                        <ScreenReaderOnly>
+                            <span>{rightTextLabel}</span>
+                        </ScreenReaderOnly>
+                    )}
+                    <Text1
+                        color={rightColor}
+                        regular
+                        as="p"
+                        textAlign="right"
+                        wordBreak={false}
+                        aria-hidden={rightTextLabel !== undefined}
+                    >
                         {rightText}
                     </Text1>
                 </div>

diff --git a/src/text-tokens.tsx b/src/text-tokens.tsx
@@ -26,6 +26,7 @@ export type Dictionary = {
     formDateOutOfRangeError: string;
     formEmailError: string;
     formIbanError: string;
+    formTextMultilineMaxCount: string;
     closeButtonLabel: string;
     formSearchClear: string;
     menuLabelSuffix: string;
@@ -248,6 +249,13 @@ export const formIbanError: TextToken = {
     pt: 'IBAN incorreto',
 };
 
+export const formTextMultilineMaxCount: TextToken = {
+    es: '1$s de 2$s caracteres',
+    en: '1$s of 2$s characters',
+    de: '1$s von 2$s Zeichen',
+    pt: '1$s de 2$s caracteres',
+};
+
 export const closeButtonLabel: TextToken = {
     es: 'Cerrar',
     en: 'Close',

diff --git a/src/text.tsx b/src/text.tsx
@@ -103,6 +103,7 @@ export interface TextPresetProps {
     role?: string;
     'aria-level'?: number;
     'aria-label'?: string;
+    'aria-hidden'?: React.HTMLAttributes<HTMLDivElement>['aria-hidden'];
     dataAttributes?: DataAttributes;
     forceMobileSizes?: boolean;
     textShadow?: string;
@@ -150,6 +151,7 @@ export const Text = ({
     role,
     'aria-level': ariaLevel,
     'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
     dataAttributes,
 }: TextProps): JSX.Element | null => {
     const {skinName} = useTheme();
@@ -195,6 +197,7 @@ export const Text = ({
             role,
             'aria-level': ariaLevel,
             'aria-label': ariaLabel,
+            'aria-hidden': ariaHidden,
             ...getPrefixedDataAttributes(dataAttributes, 'Text'),
             style: {
                 ...sizeVars,