mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 9de3efbd5e05c92658740dafbb3a816c346fe471
This commit is contained in:
@@ -103,9 +103,6 @@
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityignoresinvertcolorsios"></a><a href="#accessibilityignoresinvertcolorsios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityIgnoresInvertColors(iOS)</h4>
|
||||
<p>Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityrole-ios-android"></a><a href="#accessibilityrole-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityRole (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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 <code>accessibilityRole</code> property to one of the following strings:</p>
|
||||
<ul>
|
||||
<li><strong>none</strong> Used when the element has no role.</li>
|
||||
@@ -121,40 +118,12 @@
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityStates (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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 <code>selected</code> or <code>disabled</code> or both:</p>
|
||||
<ul>
|
||||
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
|
||||
</ul>
|
||||
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityTraits (iOS)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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 <code>accessibilityTraits</code>.</p>
|
||||
<p>To use, set the <code>accessibilityTraits</code> property to one of (or an array of) accessibility trait strings:</p>
|
||||
<ul>
|
||||
<li><strong>none</strong> Used when the element has no traits.</li>
|
||||
<li><strong>button</strong> Used when the element should be treated as a button.</li>
|
||||
<li><strong>link</strong> Used when the element should be treated as a link.</li>
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>search</strong> Used when the text field element should also be treated as a search field.</li>
|
||||
<li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
|
||||
<li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li>
|
||||
<li><strong>plays</strong> Used when the element plays its own sound when activated.</li>
|
||||
<li><strong>key</strong> Used when the element acts as a keyboard key.</li>
|
||||
<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li>
|
||||
<li><strong>summary</strong> 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.</li>
|
||||
<li><strong>disabled</strong> Used when the control is not enabled and does not respond to user input.</li>
|
||||
<li><strong>frequentUpdates</strong> 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.</li>
|
||||
<li><strong>startsMedia</strong> 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.</li>
|
||||
<li><strong>adjustable</strong> Used when an element can be "adjusted" (e.g. a slider).</li>
|
||||
<li><strong>allowsDirectInteraction</strong> Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).</li>
|
||||
<li><strong>pageTurn</strong> Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityviewismodal-ios"></a><a href="#accessibilityviewismodal-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityViewIsModal (iOS)</h4>
|
||||
<p>A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p>
|
||||
<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>A</code>. On the other hand, if view <code>B</code> contains a child view <code>C</code> and you set <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>C</code>, VoiceOver does not ignore the elements in view <code>A</code>.</p>
|
||||
@@ -167,19 +136,6 @@
|
||||
<p>Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an <code>onMagicTap</code> function, the system will traverse up the view hierarchy until it finds a view that does.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="onaccessibilityescape-ios"></a><a href="#onaccessibilityescape-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>onAccessibilityEscape (iOS)</h4>
|
||||
<p>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 <code>onAccessibilityEscape</code> 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.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype-android"></a><a href="#accessibilitycomponenttype-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityComponentType (Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityComponentType</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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’.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="token operator"><</span>TouchableWithoutFeedback accessibilityComponentType<span class="token operator">=</span>”button”
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Press me<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityliveregion-android"></a><a href="#accessibilityliveregion-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityLiveRegion (Android)</h4>
|
||||
<p>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’:</p>
|
||||
<ul>
|
||||
|
||||
@@ -103,9 +103,6 @@
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityignoresinvertcolorsios"></a><a href="#accessibilityignoresinvertcolorsios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityIgnoresInvertColors(iOS)</h4>
|
||||
<p>Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityrole-ios-android"></a><a href="#accessibilityrole-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityRole (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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 <code>accessibilityRole</code> property to one of the following strings:</p>
|
||||
<ul>
|
||||
<li><strong>none</strong> Used when the element has no role.</li>
|
||||
@@ -121,40 +118,12 @@
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitystates-ios-android"></a><a href="#accessibilitystates-ios-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityStates (iOS, Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityRole</code> and <code>accessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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 <code>selected</code> or <code>disabled</code> or both:</p>
|
||||
<ul>
|
||||
<li><strong>selected</strong> Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><strong>disabled</strong> Used when the element is disabled and cannot be interacted with.</li>
|
||||
</ul>
|
||||
<p>To use, set the <code>accessibilityStates</code> to an array containing either <code>selected</code>, <code>disabled</code>, or both.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitytraits-ios"></a><a href="#accessibilitytraits-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityTraits (iOS)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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 <code>accessibilityTraits</code>.</p>
|
||||
<p>To use, set the <code>accessibilityTraits</code> property to one of (or an array of) accessibility trait strings:</p>
|
||||
<ul>
|
||||
<li><strong>none</strong> Used when the element has no traits.</li>
|
||||
<li><strong>button</strong> Used when the element should be treated as a button.</li>
|
||||
<li><strong>link</strong> Used when the element should be treated as a link.</li>
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>search</strong> Used when the text field element should also be treated as a search field.</li>
|
||||
<li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
|
||||
<li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li>
|
||||
<li><strong>plays</strong> Used when the element plays its own sound when activated.</li>
|
||||
<li><strong>key</strong> Used when the element acts as a keyboard key.</li>
|
||||
<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li>
|
||||
<li><strong>summary</strong> 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.</li>
|
||||
<li><strong>disabled</strong> Used when the control is not enabled and does not respond to user input.</li>
|
||||
<li><strong>frequentUpdates</strong> 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.</li>
|
||||
<li><strong>startsMedia</strong> 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.</li>
|
||||
<li><strong>adjustable</strong> Used when an element can be "adjusted" (e.g. a slider).</li>
|
||||
<li><strong>allowsDirectInteraction</strong> Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).</li>
|
||||
<li><strong>pageTurn</strong> Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityviewismodal-ios"></a><a href="#accessibilityviewismodal-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityViewIsModal (iOS)</h4>
|
||||
<p>A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p>
|
||||
<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>A</code>. On the other hand, if view <code>B</code> contains a child view <code>C</code> and you set <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>C</code>, VoiceOver does not ignore the elements in view <code>A</code>.</p>
|
||||
@@ -167,19 +136,6 @@
|
||||
<p>Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an <code>onMagicTap</code> function, the system will traverse up the view hierarchy until it finds a view that does.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="onaccessibilityescape-ios"></a><a href="#onaccessibilityescape-ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>onAccessibilityEscape (iOS)</h4>
|
||||
<p>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 <code>onAccessibilityEscape</code> 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.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype-android"></a><a href="#accessibilitycomponenttype-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityComponentType (Android)</h4>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> > <code>accessibilityComponentType</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</p>
|
||||
</blockquote>
|
||||
<p>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’.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="token operator"><</span>TouchableWithoutFeedback accessibilityComponentType<span class="token operator">=</span>”button”
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">></span>Press me<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="accessibilityliveregion-android"></a><a href="#accessibilityliveregion-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityLiveRegion (Android)</h4>
|
||||
<p>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’:</p>
|
||||
<ul>
|
||||
|
||||
+34
-59
@@ -121,16 +121,46 @@
|
||||
<li><a href="/react-native/docs/next/view#pointerevents"><code>pointerEvents</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#removeclippedsubviews"><code>removeClippedSubviews</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitycomponenttype"><code>accessibilityComponentType</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#testid"><code>testID</code></a> <<<<<<< Updated upstream</li>
|
||||
<li><h1><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype-react-native-docs-next-view-accessibilitycomponenttype"></a><a href="#accessibilitycomponenttype-react-native-docs-next-view-accessibilitycomponenttype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="/react-native/docs/next/view#accessibilitycomponenttype"><code>accessibilityComponentType</code></a></h1>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<p>Stashed changes</p>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityliveregion"><code>accessibilityLiveRegion</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#collapsable"><code>collapsable</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#importantforaccessibility"><code>importantForAccessibility</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#needsoffscreenalphacompositing"><code>needsOffscreenAlphaCompositing</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#rendertohardwaretextureandroid"><code>renderToHardwareTextureAndroid</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityrole"><code>accessibilityRole</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitystates"><code>accessibilityStates</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitytraits"><code>accessibilityTraits</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitystates"><code>accessibilityStates</code></a> <<<<<<< Updated upstream</li>
|
||||
<li><h1><a class="anchor" aria-hidden="true" id="accessibilitytraits-react-native-docs-next-view-accessibilitytraits"></a><a href="#accessibilitytraits-react-native-docs-next-view-accessibilitytraits" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="/react-native/docs/next/view#accessibilitytraits"><code>accessibilityTraits</code></a></h1>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<p>Stashed changes</p>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityviewismodal"><code>accessibilityViewIsModal</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityElementsHidden"><code>accessibilityElementsHidden</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityIgnoresInvertColors"><code>accessibilityIgnoresInvertColors</code></a></li>
|
||||
@@ -438,25 +468,6 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype"></a><a href="#accessibilitycomponenttype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityComponentType</code></h3>
|
||||
<p><em>> Note: <code>accessibilityComponentType</code>will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead.</em></p>
|
||||
<p>Indicates to accessibility services to treat UI component like a native one. Works for Android only.</p>
|
||||
<p>Possible values are one of:</p>
|
||||
<ul>
|
||||
<li><code>'none'</code></li>
|
||||
<li><code>'button'</code></li>
|
||||
<li><code>'radiobutton_checked'</code></li>
|
||||
<li><code>'radiobutton_unchecked'</code></li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>AccessibilityComponentTypes</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilityliveregion"></a><a href="#accessibilityliveregion" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityLiveRegion</code></h3>
|
||||
<p>Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:</p>
|
||||
<ul>
|
||||
@@ -529,7 +540,6 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilityrole"></a><a href="#accessibilityrole" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityRole</code></h3>
|
||||
<p><em>> Note: <code>AccessibilityRole</code> and <code>AccessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</em></p>
|
||||
<p>Tells the screen reader to treat the currently focused on element as having a specific role.</p>
|
||||
<p>Possible values for <code>AccessibilityRole</code> is one of:</p>
|
||||
<ul>
|
||||
@@ -557,7 +567,6 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitystates"></a><a href="#accessibilitystates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityStates</code></h3>
|
||||
<p><em>> Note: <code>AccessibilityRole</code> and <code>AccessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</em></p>
|
||||
<p>Tells the screen reader to treat the currently focused on element as being in a specific state.</p>
|
||||
<p>You can provide one state, no state, or both states. The states must be passed in through an array. Ex: ['selected'] or ['selected', 'disabled']</p>
|
||||
<p>Possible values for <code>AccessibilityStates</code> are:</p>
|
||||
@@ -574,40 +583,6 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitytraits"></a><a href="#accessibilitytraits" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityTraits</code></h3>
|
||||
<p><em>> Note: <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead.</em></p>
|
||||
<p>Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.</p>
|
||||
<p>You can provide one trait or an array of many traits.</p>
|
||||
<p>Possible values for <code>AccessibilityTraits</code> are:</p>
|
||||
<ul>
|
||||
<li><code>'none'</code> - The element has no traits.</li>
|
||||
<li><code>'button'</code> - The element should be treated as a button.</li>
|
||||
<li><code>'link'</code> - The element should be treated as a link.</li>
|
||||
<li><code>'header'</code> - The element is a header that divides content into sections.</li>
|
||||
<li><code>'search'</code> - The element should be treated as a search field.</li>
|
||||
<li><code>'image'</code> - The element should be treated as an image.</li>
|
||||
<li><code>'selected'</code> - The element is selected.</li>
|
||||
<li><code>'plays'</code> - The element plays sound.</li>
|
||||
<li><code>'key'</code> - The element should be treated like a keyboard key.</li>
|
||||
<li><code>'text'</code> - The element should be treated as text.</li>
|
||||
<li><code>'summary'</code> - The element provides app summary information.</li>
|
||||
<li><code>'disabled'</code> - The element is disabled.</li>
|
||||
<li><code>'frequentUpdates'</code> - The element frequently changes its value.</li>
|
||||
<li><code>'startsMedia'</code> - The element starts a media session.</li>
|
||||
<li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li>
|
||||
<li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li>
|
||||
<li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li>
|
||||
</ul>
|
||||
<p>See the <a href="/react-native/docs/next/accessibility#accessibilitytraits-ios">Accessibility guide</a> for more information.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>AccessibilityTraits, ,array of AccessibilityTraits</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilityviewismodal"></a><a href="#accessibilityviewismodal" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityViewIsModal</code></h3>
|
||||
<p>A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is <code>false</code>.</p>
|
||||
<p>See the <a href="/react-native/docs/next/accessibility#accessibilityviewismodal-ios">Accessibility guide</a> for more information.</p>
|
||||
|
||||
+34
-59
@@ -121,16 +121,46 @@
|
||||
<li><a href="/react-native/docs/next/view#pointerevents"><code>pointerEvents</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#removeclippedsubviews"><code>removeClippedSubviews</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitycomponenttype"><code>accessibilityComponentType</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#testid"><code>testID</code></a> <<<<<<< Updated upstream</li>
|
||||
<li><h1><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype-react-native-docs-next-view-accessibilitycomponenttype"></a><a href="#accessibilitycomponenttype-react-native-docs-next-view-accessibilitycomponenttype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="/react-native/docs/next/view#accessibilitycomponenttype"><code>accessibilityComponentType</code></a></h1>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<p>Stashed changes</p>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityliveregion"><code>accessibilityLiveRegion</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#collapsable"><code>collapsable</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#importantforaccessibility"><code>importantForAccessibility</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#needsoffscreenalphacompositing"><code>needsOffscreenAlphaCompositing</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#rendertohardwaretextureandroid"><code>renderToHardwareTextureAndroid</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityrole"><code>accessibilityRole</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitystates"><code>accessibilityStates</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitytraits"><code>accessibilityTraits</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilitystates"><code>accessibilityStates</code></a> <<<<<<< Updated upstream</li>
|
||||
<li><h1><a class="anchor" aria-hidden="true" id="accessibilitytraits-react-native-docs-next-view-accessibilitytraits"></a><a href="#accessibilitytraits-react-native-docs-next-view-accessibilitytraits" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="/react-native/docs/next/view#accessibilitytraits"><code>accessibilityTraits</code></a></h1>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<blockquote>
|
||||
<p>Stashed changes</p>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote>
|
||||
</blockquote></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityviewismodal"><code>accessibilityViewIsModal</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityElementsHidden"><code>accessibilityElementsHidden</code></a></li>
|
||||
<li><a href="/react-native/docs/next/view#accessibilityIgnoresInvertColors"><code>accessibilityIgnoresInvertColors</code></a></li>
|
||||
@@ -438,25 +468,6 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitycomponenttype"></a><a href="#accessibilitycomponenttype" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityComponentType</code></h3>
|
||||
<p><em>> Note: <code>accessibilityComponentType</code>will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead.</em></p>
|
||||
<p>Indicates to accessibility services to treat UI component like a native one. Works for Android only.</p>
|
||||
<p>Possible values are one of:</p>
|
||||
<ul>
|
||||
<li><code>'none'</code></li>
|
||||
<li><code>'button'</code></li>
|
||||
<li><code>'radiobutton_checked'</code></li>
|
||||
<li><code>'radiobutton_unchecked'</code></li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>AccessibilityComponentTypes</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilityliveregion"></a><a href="#accessibilityliveregion" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityLiveRegion</code></h3>
|
||||
<p>Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:</p>
|
||||
<ul>
|
||||
@@ -529,7 +540,6 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilityrole"></a><a href="#accessibilityrole" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityRole</code></h3>
|
||||
<p><em>> Note: <code>AccessibilityRole</code> and <code>AccessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</em></p>
|
||||
<p>Tells the screen reader to treat the currently focused on element as having a specific role.</p>
|
||||
<p>Possible values for <code>AccessibilityRole</code> is one of:</p>
|
||||
<ul>
|
||||
@@ -557,7 +567,6 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitystates"></a><a href="#accessibilitystates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityStates</code></h3>
|
||||
<p><em>> Note: <code>AccessibilityRole</code> and <code>AccessibilityStates</code> are meant to be a cross-platform solution to replace <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>, which will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead of <code>accessibilityTraits</code> and <code>accessibilityComponentType</code>.</em></p>
|
||||
<p>Tells the screen reader to treat the currently focused on element as being in a specific state.</p>
|
||||
<p>You can provide one state, no state, or both states. The states must be passed in through an array. Ex: ['selected'] or ['selected', 'disabled']</p>
|
||||
<p>Possible values for <code>AccessibilityStates</code> are:</p>
|
||||
@@ -574,40 +583,6 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilitytraits"></a><a href="#accessibilitytraits" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityTraits</code></h3>
|
||||
<p><em>> Note: <code>accessibilityTraits</code> will soon be deprecated. When possible, use <code>accessibilityRole</code> and <code>accessibilityStates</code> instead.</em></p>
|
||||
<p>Provides additional traits to screen reader. By default no traits are provided unless specified otherwise in element.</p>
|
||||
<p>You can provide one trait or an array of many traits.</p>
|
||||
<p>Possible values for <code>AccessibilityTraits</code> are:</p>
|
||||
<ul>
|
||||
<li><code>'none'</code> - The element has no traits.</li>
|
||||
<li><code>'button'</code> - The element should be treated as a button.</li>
|
||||
<li><code>'link'</code> - The element should be treated as a link.</li>
|
||||
<li><code>'header'</code> - The element is a header that divides content into sections.</li>
|
||||
<li><code>'search'</code> - The element should be treated as a search field.</li>
|
||||
<li><code>'image'</code> - The element should be treated as an image.</li>
|
||||
<li><code>'selected'</code> - The element is selected.</li>
|
||||
<li><code>'plays'</code> - The element plays sound.</li>
|
||||
<li><code>'key'</code> - The element should be treated like a keyboard key.</li>
|
||||
<li><code>'text'</code> - The element should be treated as text.</li>
|
||||
<li><code>'summary'</code> - The element provides app summary information.</li>
|
||||
<li><code>'disabled'</code> - The element is disabled.</li>
|
||||
<li><code>'frequentUpdates'</code> - The element frequently changes its value.</li>
|
||||
<li><code>'startsMedia'</code> - The element starts a media session.</li>
|
||||
<li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li>
|
||||
<li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li>
|
||||
<li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li>
|
||||
</ul>
|
||||
<p>See the <a href="/react-native/docs/next/accessibility#accessibilitytraits-ios">Accessibility guide</a> for more information.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>AccessibilityTraits, ,array of AccessibilityTraits</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibilityviewismodal"></a><a href="#accessibilityviewismodal" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>accessibilityViewIsModal</code></h3>
|
||||
<p>A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is <code>false</code>.</p>
|
||||
<p>See the <a href="/react-native/docs/next/accessibility#accessibilityviewismodal-ios">Accessibility guide</a> for more information.</p>
|
||||
|
||||
Reference in New Issue
Block a user