Skip to content

chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cpojer merged 1 commit into from
Apr 17, 2019
Merged

chore: remove accessibilityComponentType and accessibilityTraits props #873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 0 additions & 47 deletions docs/accessibility.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down
69 changes: 6 additions & 63 deletions docs/view.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
> > > > > > > Stashed changes

@charpenicharpeniApr 18, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?

- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
> > > > > > > Stashed changes

@charpenicharpeniApr 18, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?

- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
chore: remove accessibilityComponentType and accessibilityTraits props by estevaolucas · Pull Request #873 · react/react-native-website · GitHub
Skip to content
chore: remove accessibilityComponentType and accessibilityTraits props#873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cpojer
merged 1 commit into

from

Apr 17, 2019
 Merged


chore: remove accessibilityComponentType and accessibilityTraits props
#873
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


47 changes: 0 additions & 47 deletions
docs/accessibility.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,8 +75,6 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP

#### accessibilityRole (iOS, Android)

> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings:

- **none** Used when the element has no role.
Expand All@@ -93,41 +91,13 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A

#### accessibilityStates (iOS, Android)

> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.

To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.

#### accessibilityTraits (iOS)

> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.

To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:

- **none** Used when the element has no traits.
- **button** Used when the element should be treated as a button.
- **link** Used when the element should be treated as a link.
- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- **search** Used when the text field element should also be treated as a search field.
- **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
- **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- **plays** Used when the element plays its own sound when activated.
- **key** Used when the element acts as a keyboard key.
- **text** Used when the element should be treated as static text that cannot change.
- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- **disabled** Used when the control is not enabled and does not respond to user input.
- **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
- **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

#### accessibilityViewIsModal (iOS)

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand All@@ -152,23 +122,6 @@ Assign this property to a custom function which will be called when someone perf

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

#### accessibilityComponentType (Android)

> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’.

```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
 onPress={this._onPress}>
 <View style={styles.button}>
 <Text style={styles.buttonText}>Press me!</Text>
 </View>
</TouchableWithoutFeedback>
```

In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.

#### accessibilityLiveRegion (Android)

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
Expand Down

69 changes: 6 additions & 63 deletions
docs/view.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,16 +69,18 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event
- [`pointerEvents`](view.md#pointerevents)
- [`removeClippedSubviews`](view.md#removeclippedsubviews)
- [`style`](view.md#style)
- [`testID`](view.md#testid)
- [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
- [`testID`](view.md#testid) <<<<<<< Updated upstream
- # [`accessibilityComponentType`](view.md#accessibilitycomponenttype)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityLiveRegion`](view.md#accessibilityliveregion)
- [`collapsable`](view.md#collapsable)
- [`importantForAccessibility`](view.md#importantforaccessibility)
- [`needsOffscreenAlphaCompositing`](view.md#needsoffscreenalphacompositing)
- [`renderToHardwareTextureAndroid`](view.md#rendertohardwaretextureandroid)
- [`accessibilityRole`](view.md#accessibilityrole)
- [`accessibilityStates`](view.md#accessibilitystates)
- [`accessibilityTraits`](view.md#accessibilitytraits)
- [`accessibilityStates`](view.md#accessibilitystates) <<<<<<< Updated upstream
- # [`accessibilityTraits`](view.md#accessibilitytraits)
 > > > > > > > Stashed changes
@charpenicharpeniApr 18, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right, @elucaswork can you look at this?
- [`accessibilityViewIsModal`](view.md#accessibilityviewismodal)
- [`accessibilityElementsHidden`](view.md#accessibilityElementsHidden)
- [`accessibilityIgnoresInvertColors`](view.md#accessibilityIgnoresInvertColors)
Expand DownExpand Up@@ -376,25 +378,6 @@ Used to locate this view in end-to-end tests.

---

### `accessibilityComponentType`

_> Note: `accessibilityComponentType`will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Indicates to accessibility services to treat UI component like a native one. Works for Android only.

Possible values are one of:

- `'none'`
- `'button'`
- `'radiobutton_checked'`
- `'radiobutton_unchecked'`

| Type | Required | Platform |
| --------------------------- | -------- | -------- |
| AccessibilityComponentTypes | No | Android |

---

### `accessibilityLiveRegion`

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
Expand DownExpand Up@@ -466,8 +449,6 @@ On Android, this is useful for animations and interactions that only modify opac

### `accessibilityRole`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

Tells the screen reader to treat the currently focused on element as having a specific role.

Possible values for `AccessibilityRole` is one of:
Expand DownExpand Up@@ -496,8 +477,6 @@ On Android, these roles have similar functionality on TalkBack as adding Accessi

### `accessibilityStates`

_> Note: `AccessibilityRole` and `AccessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`._

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']
Expand All@@ -513,42 +492,6 @@ Possible values for `AccessibilityStates` are:

---

### `accessibilityTraits`

_> Note: `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead._

Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.

You can provide one trait or an array of many traits.

Possible values for `AccessibilityTraits` are:

- `'none'` - The element has no traits.
- `'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.
- `'selected'` - The element is selected.
- `'plays'` - The element plays sound.
- `'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.
- `'disabled'` - The element is disabled.
- `'frequentUpdates'` - The element frequently changes its value.
- `'startsMedia'` - The element starts a media session.
- `'adjustable'` - The element allows adjustment over a range of values.
- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.

See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.

| Type | Required | Platform |
| -------------------------------------------------- | -------- | -------- |
| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS |

---

### `accessibilityViewIsModal`

A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
Expand Down