From 4ca3edbda07ebdfc36d1779f74f77df25886b4c4 Mon Sep 17 00:00:00 2001 From: raajnadar Date: Tue, 21 May 2019 17:26:20 +0530 Subject: [PATCH 1/6] fix: sort props in alphabetic order --- docs/text.md | 196 +++++++++++++++++++++++++-------------------------- 1 file changed, 98 insertions(+), 98 deletions(-) diff --git a/docs/text.md b/docs/text.md index 4f1437d275d..419148e85bb 100644 --- a/docs/text.md +++ b/docs/text.md @@ -188,28 +188,28 @@ We believe that this more constrained way to style text will yield better apps: ### Props -- [`selectable`](text.md#selectable) - [`accessibilityHint`](text.md#accessibilityhint) - [`accessibilityLabel`](text.md#accessibilitylabel) - [`accessible`](text.md#accessible) +- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`dataDetectorType`](text.md#datadetectortype) +- [`disabled`](text.md#disabled) - [`ellipsizeMode`](text.md#ellipsizemode) +- [`maxFontSizeMultiplier`](text.md#maxfontsizemultiplier) +- [`minimumFontScale`](text.md#minimumfontscale) - [`nativeID`](text.md#nativeid) - [`numberOfLines`](text.md#numberoflines) - [`onLayout`](text.md#onlayout) - [`onLongPress`](text.md#onlongpress) - [`onPress`](text.md#onpress) - [`pressRetentionOffset`](text.md#pressretentionoffset) -- [`allowFontScaling`](text.md#allowfontscaling) -- [`maxFontSizeMultiplier`](text.md#maxfontsizemultiplier) +- [`selectable`](text.md#selectable) +- [`selectionColor`](text.md#selectioncolor) - [`style`](text.md#style) +- [`suppressHighlighting`](text.md#suppresshighlighting) - [`testID`](text.md#testid) -- [`disabled`](text.md#disabled) -- [`selectionColor`](text.md#selectioncolor) - [`textBreakStrategy`](text.md#textbreakstrategy) -- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) -- [`minimumFontScale`](text.md#minimumfontscale) -- [`suppressHighlighting`](text.md#suppresshighlighting) -- [`dataDetectorType`](text.md#datadetectortype) --- @@ -217,16 +217,6 @@ We believe that this more constrained way to style text will yield better apps: ## Props -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - ### `accessibilityHint` An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. @@ -259,6 +249,56 @@ See the [Accessibility guide](accessibility.md#accessible-ios-android) for more --- +### `adjustsFontSizeToFit` + +Specifies whether font should be scaled down automatically to fit given style constraints. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + +### `allowFontScaling` + +Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `dataDetectorType` + +Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. + +You can provide only one type. + +Possible values for `dataDetectorType` are: + +- `'phoneNumber'` +- `'link'` +- `'email'` +- `'none'` +- `'all'` + +| Type | Required | Platform | +| --------------------------------------------------- | -------- | -------- | +| enum('phoneNumber', 'link', 'email', 'none', 'all') | No | Android | + +--- + +### `disabled` + +Specifies the disabled state of the text view for testing purposes + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | Android | + +--- + ### `ellipsizeMode` When `numberOfLines` is set, this prop defines how text will be truncated. `numberOfLines` must be set in conjunction with this prop. @@ -278,6 +318,30 @@ The default is `tail`. --- +### `maxFontSizeMultiplier` + +Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values: + +- `null/undefined` (default): inherit from the parent node or the global default (0) +- `0`: no max, ignore parent/global default +- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value + +| Type | Required | +| ------ | -------- | +| number | No | + +--- + +### `minimumFontScale` + +Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). + +| Type | Required | Platform | +| ------ | -------- | -------- | +| number | No | iOS | + +--- + ### `nativeID` Used to locate this view from native code. @@ -346,9 +410,9 @@ When the scroll view is disabled, this defines how far your touch may move off o --- -### `allowFontScaling` +### `selectable` -Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. +Lets the user select text, to use the native copy and paste functionality. | Type | Required | | ---- | -------- | @@ -356,17 +420,13 @@ Specifies whether fonts should scale to respect Text Size accessibility settings --- -### `maxFontSizeMultiplier` - -Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values: +### `selectionColor` -- `null/undefined` (default): inherit from the parent node or the global default (0) -- `0`: no max, ignore parent/global default -- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value +The highlight color of the text. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | Platform | +| ------------------ | -------- | -------- | +| [color](colors.md) | No | Android | --- @@ -430,33 +490,23 @@ Specifies largest possible scale a font can reach when `allowFontScaling` is ena --- -### `testID` - -Used to locate this view in end-to-end tests. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `disabled` +### `suppressHighlighting` -Specifies the disabled state of the text view for testing purposes +When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. | Type | Required | Platform | | ---- | -------- | -------- | -| bool | No | Android | +| bool | No | iOS | --- -### `selectionColor` +### `testID` -The highlight color of the text. +Used to locate this view in end-to-end tests. -| Type | Required | Platform | -| ------------------ | -------- | -------- | -| [color](colors.md) | No | Android | +| Type | Required | +| ------ | -------- | +| string | No | --- @@ -468,56 +518,6 @@ Set text break strategy on Android API Level 23+, possible values are `simple`, | ----------------------------------------- | -------- | -------- | | enum('simple', 'highQuality', 'balanced') | No | Android | ---- - -### `adjustsFontSizeToFit` - -Specifies whether font should be scaled down automatically to fit given style constraints. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - ---- - -### `minimumFontScale` - -Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). - -| Type | Required | Platform | -| ------ | -------- | -------- | -| number | No | iOS | - ---- - -### `suppressHighlighting` - -When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | - # Known issues - [react-native#22811](https://github.com/facebook/react-native/issues/22811): Nested Text elements do not support `numberOfLines` attribute - -### `dataDetectorType` - -Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. - -You can provide only one type. - -Possible values for `dataDetectorType` are: - -- `'phoneNumber'` -- `'link'` -- `'email'` -- `'none'` -- `'all'` - -| Type | Required | Platform | -| --------------------------------------------------- | -------- | -------- | -| enum('phoneNumber', 'link', 'email', 'none', 'all') | No | Android | - ---- From 04d32374f9694f4f4e2ea52a143f5b755841bdf2 Mon Sep 17 00:00:00 2001 From: raajnadar Date: Tue, 21 May 2019 21:23:58 +0530 Subject: [PATCH 2/6] fix: add new apis --- docs/text.md | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) diff --git a/docs/text.md b/docs/text.md index 419148e85bb..45e183fa165 100644 --- a/docs/text.md +++ b/docs/text.md @@ -190,6 +190,8 @@ We believe that this more constrained way to style text will yield better apps: - [`accessibilityHint`](text.md#accessibilityhint) - [`accessibilityLabel`](text.md#accessibilitylabel) +- [`accessibilityRole`](text.md#accessibilityRole) +- [`accessibilityStates`](text.md#accessibilityStates) - [`accessible`](text.md#accessible) - [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) - [`allowFontScaling`](text.md#allowfontscaling) @@ -202,7 +204,15 @@ We believe that this more constrained way to style text will yield better apps: - [`numberOfLines`](text.md#numberoflines) - [`onLayout`](text.md#onlayout) - [`onLongPress`](text.md#onlongpress) +- [`onMoveShouldSetResponder`](text.md#onMoveShouldSetResponder) - [`onPress`](text.md#onpress) +- [`onResponderGrant`](text.md#onResponderGrant) +- [`onResponderMove`](text.md#onResponderMove) +- [`onResponderRelease`](text.md#onResponderRelease) +- [`onResponderTerminate`](text.md#onResponderTerminate) +- [`onResponderTerminationRequest`](text.md#onResponderTerminationRequest) +- [`onStartShouldSetResponder`](text.md#onStartShouldSetResponder) +- [`onTextLayout`](text.md#onTextLayout) - [`pressRetentionOffset`](text.md#pressretentionoffset) - [`selectable`](text.md#selectable) - [`selectionColor`](text.md#selectioncolor) @@ -237,6 +247,51 @@ Overrides the text that's read by the screen reader when the user interacts with --- +### `accessibilityRole` + +Tells the screen reader to treat the currently focused on element as having a specific role. + +Possible values for `AccessibilityRole` is one of: + +- `'none'` - The element has no role. +- `'button'` - The element should be treated as a button. +- `'link'` - The element should be treated as a link. +- `'header'` - The element is a header that divides content into sections. +- `'search'` - The element should be treated as a search field. +- `'image'` - The element should be treated as an image. +- `'key'` - The element should be treated like a keyboard key. +- `'text'` - The element should be treated as text. +- `'summary'` - The element provides app summary information. +- `'imagebutton'` - The element has the role of both an image and also a button. +- `'adjustable'` - The element allows adjustment over a range of values. + +On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information. + +On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS + +| Type | Required | +| ----------------- | -------- | +| AccessibilityRole | No | + +--- + +### `accessibilityStates` + +Tells the screen reader to treat the currently focused on element as being in a specific state. + +You can provide one state, no state, or both states. The states must be passed in through an array. Ex: ['selected'] or ['selected', 'disabled'] + +Possible values for `AccessibilityStates` are: + +- `'selected'` - The element is in a selected state. +- `'disabled'` - The element is in a disabled state. + +| Type | Required | +| --------------------------- | -------- | +| array of AccessibilitStates | No | + +--- + ### `accessible` When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`. @@ -388,6 +443,18 @@ e.g., `onLongPress={this.increaseSize}>` --- +### `onMoveShouldSetResponder` + +Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder. + +`View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + ### `onPress` This function is called on press. @@ -400,6 +467,82 @@ e.g., `onPress={() => console.log('1st')}` --- +### `onResponderGrant` + +The View is now responding for touch events. This is the time to highlight and show the user what is happening. + +`View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onResponderMove` + +The user is moving their finger. + +`View.props.onResponderMove: (event) => {}`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onResponderRelease` + +Fired at the end of the touch. + +`View.props.onResponderRelease: (event) => {}`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onResponderTerminate` + +The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS) + +`View.props.onResponderTerminate: (event) => {}`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onResponderTerminationRequest` + +Some other `View` wants to become responder and is asking this `View` to release its responder. Returning `true` allows its release. + +`View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onStartShouldSetResponderCapture` + +If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, it should have this handler which returns `true`. + +`View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a synthetic touch event as described above. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onTextLayout` + +I don't know about this api + ### `pressRetentionOffset` When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations. From 7c78befb790e434bc0269ba4e06951335ca2c14b Mon Sep 17 00:00:00 2001 From: raajnadar Date: Tue, 21 May 2019 21:52:17 +0530 Subject: [PATCH 3/6] fix: scroll link issue --- docs/text.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/text.md b/docs/text.md index 45e183fa165..86ad1459deb 100644 --- a/docs/text.md +++ b/docs/text.md @@ -190,8 +190,8 @@ We believe that this more constrained way to style text will yield better apps: - [`accessibilityHint`](text.md#accessibilityhint) - [`accessibilityLabel`](text.md#accessibilitylabel) -- [`accessibilityRole`](text.md#accessibilityRole) -- [`accessibilityStates`](text.md#accessibilityStates) +- [`accessibilityRole`](text.md#accessibilityrole) +- [`accessibilityStates`](text.md#accessibilitystates) - [`accessible`](text.md#accessible) - [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) - [`allowFontScaling`](text.md#allowfontscaling) @@ -204,15 +204,15 @@ We believe that this more constrained way to style text will yield better apps: - [`numberOfLines`](text.md#numberoflines) - [`onLayout`](text.md#onlayout) - [`onLongPress`](text.md#onlongpress) -- [`onMoveShouldSetResponder`](text.md#onMoveShouldSetResponder) +- [`onMoveShouldSetResponder`](text.md#onmoveshouldsetresponder) - [`onPress`](text.md#onpress) -- [`onResponderGrant`](text.md#onResponderGrant) -- [`onResponderMove`](text.md#onResponderMove) -- [`onResponderRelease`](text.md#onResponderRelease) -- [`onResponderTerminate`](text.md#onResponderTerminate) -- [`onResponderTerminationRequest`](text.md#onResponderTerminationRequest) -- [`onStartShouldSetResponder`](text.md#onStartShouldSetResponder) -- [`onTextLayout`](text.md#onTextLayout) +- [`onResponderGrant`](text.md#onrespondergrant) +- [`onResponderMove`](text.md#onrespondermove) +- [`onResponderRelease`](text.md#onresponderrelease) +- [`onResponderTerminate`](text.md#onresponderterminate) +- [`onResponderTerminationRequest`](text.md#onresponderterminationrequest) +- [`onStartShouldSetResponder`](text.md#onstartshouldsetresponder) +- [`onTextLayout`](text.md#ontextlayout) - [`pressRetentionOffset`](text.md#pressretentionoffset) - [`selectable`](text.md#selectable) - [`selectionColor`](text.md#selectioncolor) From e6f07e16c35d065169692008e109dc98c716acde Mon Sep 17 00:00:00 2001 From: Christoph Nakazawa Date: Thu, 30 May 2019 11:37:31 +0100 Subject: [PATCH 4/6] Update text.md --- docs/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/text.md b/docs/text.md index 86ad1459deb..a63eedc5933 100644 --- a/docs/text.md +++ b/docs/text.md @@ -541,7 +541,7 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a ### `onTextLayout` -I don't know about this api +TODO. ### `pressRetentionOffset` From ed1d8bc45b17453eb4f5ca98199090b40babfd8f Mon Sep 17 00:00:00 2001 From: Christoph Nakazawa Date: Thu, 30 May 2019 11:38:20 +0100 Subject: [PATCH 5/6] Update text.md --- docs/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/text.md b/docs/text.md index a63eedc5933..9b944a35323 100644 --- a/docs/text.md +++ b/docs/text.md @@ -306,7 +306,7 @@ See the [Accessibility guide](accessibility.md#accessible-ios-android) for more ### `adjustsFontSizeToFit` -Specifies whether font should be scaled down automatically to fit given style constraints. +Specifies whether fonts should be scaled down automatically to fit given style constraints. | Type | Required | Platform | | ---- | -------- | -------- | From 041784726e33627a5330a4997a3fdd3ce211160d Mon Sep 17 00:00:00 2001 From: Christoph Nakazawa Date: Thu, 30 May 2019 11:40:01 +0100 Subject: [PATCH 6/6] Update text.md --- docs/text.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/text.md b/docs/text.md index 9b944a35323..85e40993465 100644 --- a/docs/text.md +++ b/docs/text.md @@ -191,7 +191,7 @@ We believe that this more constrained way to style text will yield better apps: - [`accessibilityHint`](text.md#accessibilityhint) - [`accessibilityLabel`](text.md#accessibilitylabel) - [`accessibilityRole`](text.md#accessibilityrole) -- [`accessibilityStates`](text.md#accessibilitystates) +- [`accessibilityState`](text.md#accessibilitystate) - [`accessible`](text.md#accessible) - [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) - [`allowFontScaling`](text.md#allowfontscaling) @@ -275,20 +275,20 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi --- -### `accessibilityStates` +### `accessibilityState` Tells the screen reader to treat the currently focused on element as being in a specific state. -You can provide one state, no state, or both states. The states must be passed in through an array. Ex: ['selected'] or ['selected', 'disabled'] +You can provide one state, no state, or multiple states. The states must be passed in through an object. Ex: `{selected: true, disabled: true}`. -Possible values for `AccessibilityStates` are: +Possible values for `AccessibilityState` are: - `'selected'` - The element is in a selected state. - `'disabled'` - The element is in a disabled state. -| Type | Required | -| --------------------------- | -------- | -| array of AccessibilitStates | No | +| Type | Required | +| ------ | -------- | +| object | No | ---