From 1e5dce7f47e20a235b3842bb9766ca1706969805 Mon Sep 17 00:00:00 2001 From: yotamts Date: Wed, 10 Dec 2025 13:13:47 +0200 Subject: [PATCH 1/8] a11y improved for charCounter --- src/components/textField/CharCounter.tsx | 4 +++- src/components/textField/Input.tsx | 30 ++++++++++++++++++++++-- src/components/textField/index.tsx | 1 + 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/components/textField/CharCounter.tsx b/src/components/textField/CharCounter.tsx index eb5a99308b..aa6e0fbbf9 100644 --- a/src/components/textField/CharCounter.tsx +++ b/src/components/textField/CharCounter.tsx @@ -8,12 +8,14 @@ import {CharCounterProps} from './types'; const CharCounter = ({maxLength, charCounterStyle, testID}: CharCounterProps) => { const {value} = useContext(FieldContext); const length = value?.length ?? 0; + const ch = length === 1 ? 'character' : 'characters'; + const accessibilityLabel = `${length} ${ch} out of ${maxLength}`; if (_.isUndefined(maxLength)) { return null; } return ( - + {`${length}/${maxLength}`} ); diff --git a/src/components/textField/Input.tsx b/src/components/textField/Input.tsx index 9e650476a7..1e99ea4001 100644 --- a/src/components/textField/Input.tsx +++ b/src/components/textField/Input.tsx @@ -1,5 +1,5 @@ import React, {useContext, useMemo} from 'react'; -import {StyleSheet, Platform} from 'react-native'; +import {StyleSheet, Platform, View} from 'react-native'; import {TextInput as RNTextInput} from './textInput'; import {Constants, ForwardRefInjectedProps} from '../../commons/new'; import {InputProps} from './types'; @@ -48,6 +48,16 @@ const Input = ({ const disabled = props.editable === false || readonly; const shouldRenderIndication = context.isMandatory && showMandatoryIndication; + const getAccessibilityLabel = () => { + if (value) return undefined; + + const parts = []; + if (props.placeholder) parts.push(placeholder); + if (props.accessibilityLabel) parts.push(props.accessibilityLabel); + + return parts.join(', '); + } + const TextInput = useMemo(() => { if (useGestureHandlerInput) { const { @@ -59,7 +69,7 @@ const Input = ({ } }, [useGestureHandlerInput]); - return ( + const textInputElement = ( ); + + if (props.multiline) { + return ( + + {textInputElement} + + ); + } + + return textInputElement; }; const styles = StyleSheet.create({ diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx index 1e61189909..05b53c0410 100644 --- a/src/components/textField/index.tsx +++ b/src/components/textField/index.tsx @@ -206,6 +206,7 @@ const TextField = (props: InternalTextFieldProps) => { placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} + accessibilityLabel={showCharCounter ? `you can enter up to ${props.maxLength} characters` : undefined} /> )} From 4026949442c42dab23aeab1a52fc6a6bb0db23c4 Mon Sep 17 00:00:00 2001 From: yotamts Date: Wed, 10 Dec 2025 13:16:29 +0200 Subject: [PATCH 2/8] yml change --- .yarnrc.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index c0c7634561..8be2b1c502 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -8,8 +8,3 @@ nmMode: hardlinks-local nodeLinker: node-modules -npmRegistryServer: "https://registry.npmjs.org/" -npmMinimalAgeGate: "14d" -npmPreapprovedPackages: ["@wix/*"] - -yarnPath: .yarn/releases/yarn-4.12.0.cjs From 4a42af2d0097c3f1c91f962d2a43280413358b28 Mon Sep 17 00:00:00 2001 From: yotamts Date: Wed, 10 Dec 2025 13:33:40 +0200 Subject: [PATCH 3/8] created a backwards value read in different component --- src/components/textField/Input.tsx | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/src/components/textField/Input.tsx b/src/components/textField/Input.tsx index 1e99ea4001..802bc75b38 100644 --- a/src/components/textField/Input.tsx +++ b/src/components/textField/Input.tsx @@ -1,5 +1,5 @@ import React, {useContext, useMemo} from 'react'; -import {StyleSheet, Platform, View} from 'react-native'; +import {StyleSheet, Platform} from 'react-native'; import {TextInput as RNTextInput} from './textInput'; import {Constants, ForwardRefInjectedProps} from '../../commons/new'; import {InputProps} from './types'; @@ -52,7 +52,7 @@ const Input = ({ if (value) return undefined; const parts = []; - if (props.placeholder) parts.push(placeholder); + if (props.placeholder && !props.multiline) parts.push(placeholder); if (props.accessibilityLabel) parts.push(props.accessibilityLabel); return parts.join(', '); @@ -69,7 +69,7 @@ const Input = ({ } }, [useGestureHandlerInput]); - const textInputElement = ( + return ( ); - - if (props.multiline) { - return ( - - {textInputElement} - - ); - } - - return textInputElement; }; const styles = StyleSheet.create({ From dd6ffe9cb45c00517b5176e42a94746401194a38 Mon Sep 17 00:00:00 2001 From: yotamts Date: Wed, 10 Dec 2025 14:59:22 +0200 Subject: [PATCH 4/8] switched to logic of [label], [charCounter text] --- src/components/textField/Input.tsx | 10 +++++----- src/components/textField/index.tsx | 6 +++++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/textField/Input.tsx b/src/components/textField/Input.tsx index 802bc75b38..4ffd36c280 100644 --- a/src/components/textField/Input.tsx +++ b/src/components/textField/Input.tsx @@ -51,12 +51,12 @@ const Input = ({ const getAccessibilityLabel = () => { if (value) return undefined; - const parts = []; - if (props.placeholder && !props.multiline) parts.push(placeholder); - if (props.accessibilityLabel) parts.push(props.accessibilityLabel); + if (props.accessibilityLabel) { + return props.accessibilityLabel; + } - return parts.join(', '); - } + return props.placeholder; + }; const TextInput = useMemo(() => { if (useGestureHandlerInput) { diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx index 05b53c0410..40aab37a88 100644 --- a/src/components/textField/index.tsx +++ b/src/components/textField/index.tsx @@ -206,7 +206,11 @@ const TextField = (props: InternalTextFieldProps) => { placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} - accessibilityLabel={showCharCounter ? `you can enter up to ${props.maxLength} characters` : undefined} + accessibilityLabel={ + showCharCounter + ? `${label ? `${label}, ` : ''}you can enter up to ${props.maxLength} characters` + : label + } /> )} From aaf78738d0cc6f055d6e0db09848ce34cafb3485 Mon Sep 17 00:00:00 2001 From: yotamts Date: Mon, 22 Dec 2025 11:00:10 +0200 Subject: [PATCH 5/8] Improved a11y label, unified all parts of textField into one, added useMemo hook usage --- src/components/textField/CharCounter.tsx | 5 ++-- src/components/textField/index.tsx | 33 +++++++++++++++++++----- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/textField/CharCounter.tsx b/src/components/textField/CharCounter.tsx index aa6e0fbbf9..e4615ed7e4 100644 --- a/src/components/textField/CharCounter.tsx +++ b/src/components/textField/CharCounter.tsx @@ -8,14 +8,13 @@ import {CharCounterProps} from './types'; const CharCounter = ({maxLength, charCounterStyle, testID}: CharCounterProps) => { const {value} = useContext(FieldContext); const length = value?.length ?? 0; - const ch = length === 1 ? 'character' : 'characters'; - const accessibilityLabel = `${length} ${ch} out of ${maxLength}`; + if (_.isUndefined(maxLength)) { return null; } return ( - + {`${length}/${maxLength}`} ); diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx index 40aab37a88..f77e45c476 100644 --- a/src/components/textField/index.tsx +++ b/src/components/textField/index.tsx @@ -138,9 +138,35 @@ const TextField = (props: InternalTextFieldProps) => { [typographyStyle, colorStyle, others.style, centeredTextStyle, hasValue]); const dummyPlaceholderStyle = useMemo(() => [inputStyle, styles.dummyPlaceholder], [inputStyle]); + const accessibilityLabel = useMemo(() => { + const parts: string[] = []; + + if (label) { + parts.push(label); + } + + if (context.isMandatory) { + parts.push('required'); + } + + parts.push('textField'); + + if (helperText) { + parts.push(helperText); + } else if (placeholder) { + parts.push(placeholder); + } + + if (showCharCounter && others.maxLength) { + parts.push(`you can enter up to ${others.maxLength} characters`); + } + + return parts.join(', '); + }, [label, context.isMandatory, helperText, placeholder, showCharCounter, others.maxLength]); + return ( - + )} From bc133c7231fec30d8bd0c2f6d682d152e4e288b6 Mon Sep 17 00:00:00 2001 From: yotamts Date: Mon, 22 Dec 2025 11:02:42 +0200 Subject: [PATCH 6/8] removed previous implementation of a11y in textField --- src/components/textField/Input.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/textField/Input.tsx b/src/components/textField/Input.tsx index 4ffd36c280..813af81eea 100644 --- a/src/components/textField/Input.tsx +++ b/src/components/textField/Input.tsx @@ -48,15 +48,17 @@ const Input = ({ const disabled = props.editable === false || readonly; const shouldRenderIndication = context.isMandatory && showMandatoryIndication; - const getAccessibilityLabel = () => { - if (value) return undefined; + // const getAccessibilityLabel = () => { + // if (value) { + // return undefined; + // } - if (props.accessibilityLabel) { - return props.accessibilityLabel; - } + // if (props.accessibilityLabel) { + // return props.accessibilityLabel; + // } - return props.placeholder; - }; + // return props.placeholder; + // }; const TextInput = useMemo(() => { if (useGestureHandlerInput) { @@ -83,8 +85,6 @@ const Input = ({ underlineColorAndroid="transparent" accessibilityState={{disabled}} pointerEvents={disabled ? 'none' : pointerEvents} - accessibilityValue={!value ? {text: ' '} : undefined} - accessibilityLabel={getAccessibilityLabel()} /> ); }; From 9603ac8f82179e0158f17c77bb77197ed295c6eb Mon Sep 17 00:00:00 2001 From: yotamts Date: Mon, 22 Dec 2025 11:05:45 +0200 Subject: [PATCH 7/8] removed comments and unnecessary spaces --- .yarnrc.yml | 5 +++++ src/components/textField/CharCounter.tsx | 1 - src/components/textField/Input.tsx | 12 ------------ 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index 8be2b1c502..4496c98dd3 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -8,3 +8,8 @@ nmMode: hardlinks-local nodeLinker: node-modules +npmRegistryServer: "https://registry.npmjs.org/" +npmMinimalAgeGate: "14d" +npmPreapprovedPackages: ["@wix/*"] + +yarnPath: .yarn/releases/yarn-4.12.0.cjs \ No newline at end of file diff --git a/src/components/textField/CharCounter.tsx b/src/components/textField/CharCounter.tsx index e4615ed7e4..eb5a99308b 100644 --- a/src/components/textField/CharCounter.tsx +++ b/src/components/textField/CharCounter.tsx @@ -8,7 +8,6 @@ import {CharCounterProps} from './types'; const CharCounter = ({maxLength, charCounterStyle, testID}: CharCounterProps) => { const {value} = useContext(FieldContext); const length = value?.length ?? 0; - if (_.isUndefined(maxLength)) { return null; } diff --git a/src/components/textField/Input.tsx b/src/components/textField/Input.tsx index 813af81eea..9e650476a7 100644 --- a/src/components/textField/Input.tsx +++ b/src/components/textField/Input.tsx @@ -48,18 +48,6 @@ const Input = ({ const disabled = props.editable === false || readonly; const shouldRenderIndication = context.isMandatory && showMandatoryIndication; - // const getAccessibilityLabel = () => { - // if (value) { - // return undefined; - // } - - // if (props.accessibilityLabel) { - // return props.accessibilityLabel; - // } - - // return props.placeholder; - // }; - const TextInput = useMemo(() => { if (useGestureHandlerInput) { const { From 65b7afd61a5bdd8fc6dfcef7d2bcfc1cc1fa3159 Mon Sep 17 00:00:00 2001 From: yotam-wix Date: Thu, 25 Dec 2025 13:34:12 +0200 Subject: [PATCH 8/8] Update .yarnrc.yml Co-authored-by: Lidor Dafna <66782556+lidord-wix@users.noreply.github.com> --- .yarnrc.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index 4496c98dd3..c0c7634561 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -12,4 +12,4 @@ npmRegistryServer: "https://registry.npmjs.org/" npmMinimalAgeGate: "14d" npmPreapprovedPackages: ["@wix/*"] -yarnPath: .yarn/releases/yarn-4.12.0.cjs \ No newline at end of file +yarnPath: .yarn/releases/yarn-4.12.0.cjs