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 043abd5ad3edf6bc3b2d582223b5f0186d479fe4
This commit is contained in:
Website Deployment Script
@@ -109,7 +109,8 @@
|
||||
<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>
|
||||
<p>Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the purpose or role of a given element. To use, set the <code>accessibilityRole</code> property to one of the following strings:</p>
|
||||
<p><code>accessibilityRole</code> communicates the purpose of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityRole</code> can be one of the following:</p>
|
||||
<ul>
|
||||
<li><strong>none</strong> Used when the element has no role.</li>
|
||||
<li><strong>button</strong> Used when the element should be treated as a button.</li>
|
||||
@@ -140,7 +141,8 @@
|
||||
<li><strong>toolbar</strong> Used to represent a tool bar (a container of action buttons or components).</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>
|
||||
<p>Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of an element. The state of the element can be set either to <code>selected</code> or <code>disabled</code> or both:</p>
|
||||
<p>Describes the current state of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityStates</code> is an array of values, and may include any of the following:</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>
|
||||
@@ -194,6 +196,56 @@
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-actions"></a><a href="#accessibility-actions" 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>Accessibility Actions</h3>
|
||||
<p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:</p>
|
||||
<ul>
|
||||
<li>Define the list of actions it supports via the <code>accessibilityActions</code> property.</li>
|
||||
<li>Implement an <code>onAccessibilityAction</code> function to handle action requests.</li>
|
||||
</ul>
|
||||
<p>The <code>accessibilityActions</code> property should contain a list of action objects. Each action object should contain the following fields:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>name</td><td>string</td><td>Yes</td></tr>
|
||||
<tr><td>label</td><td>string</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Actions either represent standard actions, such as clicking a button or adjusting a slider, or custom actions specific to a given component such as deleting an email message. The <code>name</code> field is required for both standard and custom actions, but <code>label</code> is optional for standard actions.</p>
|
||||
<p>When adding support for standard actions, <code>name</code> must be one of the following:</p>
|
||||
<ul>
|
||||
<li><code>'magicTap'</code> - iOS only - While VoiceOver focus is on or inside the component, the user double tapped with two fingers.</li>
|
||||
<li><code>'escape'</code> - iOS only - While VoiceOver focus is on or inside the component, the user performed a two finger scrub gesture (left, right, left).</li>
|
||||
<li><code>'activate'</code> - Activate the component. Typically this should perform the same action as when the user touches or clicks the component when not using an assistive technology. This is generated when a screen reader user double taps the component.</li>
|
||||
<li><code>'increment'</code> - Increment an adjustable component. On iOS, VoiceOver generates this action when the component has a role of <code>'adjustable'</code> and the user places focus on it and swipes upward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume up button.</li>
|
||||
<li><code>'decrement'</code> - Decrement an adjustable component. On iOS, VoiceOver generates this action when the component has a role of <code>'adjustable'</code> and the user places focus on it and swipes downward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume down button.</li>
|
||||
<li><code>'longpress'</code> - Android only - This action is generated when the user places accessibility focus on the component and double tap and holds one finger on the screen. Typically, this should perform the same action as when the user holds down one finger on the component while not using an assistive technology.</li>
|
||||
</ul>
|
||||
<p>The <code>label</code> field is optional for standard actions, and is often unused by assistive technologies. For custom actions, it is a localized string containing a description of the action to be presented to the user.</p>
|
||||
<p>To handle action requests, a component must implement an <code>onAccessibilityAction</code> function. The only argument to this function is an event containing the name of the action to perform. The below example from RNTester shows how to create a component which defines and handles several custom actions.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="token operator"><</span>View
|
||||
accessible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
||||
accessibilityActions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'cut'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'copy'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'paste'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
onAccessibilityAction<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>actionName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'cut action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'copy action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'paste action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="checking-if-a-screen-reader-is-enabled"></a><a href="#checking-if-a-screen-reader-is-enabled" 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>Checking if a Screen Reader is Enabled</h3>
|
||||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/next/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="sending-accessibility-events-android"></a><a href="#sending-accessibility-events-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>Sending Accessibility Events (Android)</h3>
|
||||
|
||||
@@ -109,7 +109,8 @@
|
||||
<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>
|
||||
<p>Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the purpose or role of a given element. To use, set the <code>accessibilityRole</code> property to one of the following strings:</p>
|
||||
<p><code>accessibilityRole</code> communicates the purpose of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityRole</code> can be one of the following:</p>
|
||||
<ul>
|
||||
<li><strong>none</strong> Used when the element has no role.</li>
|
||||
<li><strong>button</strong> Used when the element should be treated as a button.</li>
|
||||
@@ -140,7 +141,8 @@
|
||||
<li><strong>toolbar</strong> Used to represent a tool bar (a container of action buttons or components).</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>
|
||||
<p>Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of an element. The state of the element can be set either to <code>selected</code> or <code>disabled</code> or both:</p>
|
||||
<p>Describes the current state of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityStates</code> is an array of values, and may include any of the following:</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>
|
||||
@@ -194,6 +196,56 @@
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="accessibility-actions"></a><a href="#accessibility-actions" 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>Accessibility Actions</h3>
|
||||
<p>Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:</p>
|
||||
<ul>
|
||||
<li>Define the list of actions it supports via the <code>accessibilityActions</code> property.</li>
|
||||
<li>Implement an <code>onAccessibilityAction</code> function to handle action requests.</li>
|
||||
</ul>
|
||||
<p>The <code>accessibilityActions</code> property should contain a list of action objects. Each action object should contain the following fields:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>name</td><td>string</td><td>Yes</td></tr>
|
||||
<tr><td>label</td><td>string</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Actions either represent standard actions, such as clicking a button or adjusting a slider, or custom actions specific to a given component such as deleting an email message. The <code>name</code> field is required for both standard and custom actions, but <code>label</code> is optional for standard actions.</p>
|
||||
<p>When adding support for standard actions, <code>name</code> must be one of the following:</p>
|
||||
<ul>
|
||||
<li><code>'magicTap'</code> - iOS only - While VoiceOver focus is on or inside the component, the user double tapped with two fingers.</li>
|
||||
<li><code>'escape'</code> - iOS only - While VoiceOver focus is on or inside the component, the user performed a two finger scrub gesture (left, right, left).</li>
|
||||
<li><code>'activate'</code> - Activate the component. Typically this should perform the same action as when the user touches or clicks the component when not using an assistive technology. This is generated when a screen reader user double taps the component.</li>
|
||||
<li><code>'increment'</code> - Increment an adjustable component. On iOS, VoiceOver generates this action when the component has a role of <code>'adjustable'</code> and the user places focus on it and swipes upward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume up button.</li>
|
||||
<li><code>'decrement'</code> - Decrement an adjustable component. On iOS, VoiceOver generates this action when the component has a role of <code>'adjustable'</code> and the user places focus on it and swipes downward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume down button.</li>
|
||||
<li><code>'longpress'</code> - Android only - This action is generated when the user places accessibility focus on the component and double tap and holds one finger on the screen. Typically, this should perform the same action as when the user holds down one finger on the component while not using an assistive technology.</li>
|
||||
</ul>
|
||||
<p>The <code>label</code> field is optional for standard actions, and is often unused by assistive technologies. For custom actions, it is a localized string containing a description of the action to be presented to the user.</p>
|
||||
<p>To handle action requests, a component must implement an <code>onAccessibilityAction</code> function. The only argument to this function is an event containing the name of the action to perform. The below example from RNTester shows how to create a component which defines and handles several custom actions.</p>
|
||||
<pre><code class="hljs css language-javascript"><span class="token operator"><</span>View
|
||||
accessible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
||||
accessibilityActions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'cut'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'copy'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'paste'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
onAccessibilityAction<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>actionName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'cut action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'copy action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'paste action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="checking-if-a-screen-reader-is-enabled"></a><a href="#checking-if-a-screen-reader-is-enabled" 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>Checking if a Screen Reader is Enabled</h3>
|
||||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/next/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="sending-accessibility-events-android"></a><a href="#sending-accessibility-events-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>Sending Accessibility Events (Android)</h3>
|
||||
|
||||
+38
-18
@@ -520,20 +520,36 @@
|
||||
</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>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>
|
||||
<p><code>accessibilityRole</code> communicates the purpose of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityRole</code> can be one of the following:</p>
|
||||
<ul>
|
||||
<li><code>'none'</code> - The element has no role.</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>'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>'imagebutton'</code> - The element has the role of both an image and also a button.</li>
|
||||
<li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li>
|
||||
<li><code>'none'</code> - Used when the element has no role.</li>
|
||||
<li><code>'button'</code> - Used when the element should be treated as a button.</li>
|
||||
<li><code>'link'</code> - Used when the element should be treated as a link.</li>
|
||||
<li><code>'search'</code> - Used when the text field element should also be treated as a search field.</li>
|
||||
<li><code>'image'</code> - Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
|
||||
<li><code>'keyboardkey'</code> - Used when the element acts as a keyboard key.</li>
|
||||
<li><code>'text'</code> - Used when the element should be treated as static text that cannot change.</li>
|
||||
<li><code>'adjustable'</code> - Used when an element can be "adjusted" (e.g. a slider).</li>
|
||||
<li><code>'imagebutton'</code> - Used when the element should be treated as a button and is also an image.</li>
|
||||
<li><code>'header'</code> - Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><code>'summary'</code> - Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
<li><code>'alert'</code> - Used when an element contains important text to be presented to the user.</li>
|
||||
<li><code>'checkbox'</code> - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.</li>
|
||||
<li><code>'combobox'</code> - Used when an element represents a combo box, which allows the user to select among several choices.</li>
|
||||
<li><code>'menu'</code> - Used when the component is a menu of choices.</li>
|
||||
<li><code>'menubar'</code> - Used when a component is a container of multiple menus.</li>
|
||||
<li><code>'menuitem'</code> - Used to represent an item within a menu.</li>
|
||||
<li><code>'progressbar'</code> - Used to represent a component which indicates progress of a task.</li>
|
||||
<li><code>'radio'</code> - Used to represent a radio button.</li>
|
||||
<li><code>'radiogroup'</code> - Used to represent a group of radio buttons.</li>
|
||||
<li><code>'scrollbar'</code> - Used to represent a scroll bar.</li>
|
||||
<li><code>'spinbutton'</code> - Used to represent a button which opens a list of choices.</li>
|
||||
<li><code>'switch'</code> - Used to represent a switch which can be turned on and off.</li>
|
||||
<li><code>'tab'</code> - Used to represent a tab.</li>
|
||||
<li><code>'tablist'</code> - Used to represent a list of tabs.</li>
|
||||
<li><code>'timer'</code> - Used to represent a timer.</li>
|
||||
<li><code>'toolbar'</code> - Used to represent a tool bar (a container of action buttons or components).</li>
|
||||
</ul>
|
||||
<p>On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the <a href="/react-native/docs/next/accessibility#accessibilitytraits-ios">Accessibility guide</a> for more information.</p>
|
||||
<p>On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS</p>
|
||||
@@ -547,12 +563,16 @@
|
||||
</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>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>
|
||||
<p>Describes the current state of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityStates</code> is an array of values, and may include any of the following:</p>
|
||||
<ul>
|
||||
<li><code>'selected'</code> - The element is in a selected state.</li>
|
||||
<li><code>'disabled'</code> - The element is in a disabled state.</li>
|
||||
<li><code>'selected'</code> - Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><code>'disabled'</code> - Used when the element is disabled and cannot be manipulated.</li>
|
||||
<li><code>'checked'</code> - Used to indicate that a checkable element is currently checked.</li>
|
||||
<li><code>'unchecked'</code> - Used to indicate that a checkable element is not currently checked.</li>
|
||||
<li><code>'busy'</code> - Used to indicate that an element is currently busy.</li>
|
||||
<li><code>'expanded'</code> - Used to indicate that an expandable element is currently expanded.</li>
|
||||
<li><code>'collapsed'</code> - Used to indicate that an expandable element is currently collapsed.</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
+38
-18
@@ -520,20 +520,36 @@
|
||||
</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>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>
|
||||
<p><code>accessibilityRole</code> communicates the purpose of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityRole</code> can be one of the following:</p>
|
||||
<ul>
|
||||
<li><code>'none'</code> - The element has no role.</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>'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>'imagebutton'</code> - The element has the role of both an image and also a button.</li>
|
||||
<li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li>
|
||||
<li><code>'none'</code> - Used when the element has no role.</li>
|
||||
<li><code>'button'</code> - Used when the element should be treated as a button.</li>
|
||||
<li><code>'link'</code> - Used when the element should be treated as a link.</li>
|
||||
<li><code>'search'</code> - Used when the text field element should also be treated as a search field.</li>
|
||||
<li><code>'image'</code> - Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
|
||||
<li><code>'keyboardkey'</code> - Used when the element acts as a keyboard key.</li>
|
||||
<li><code>'text'</code> - Used when the element should be treated as static text that cannot change.</li>
|
||||
<li><code>'adjustable'</code> - Used when an element can be "adjusted" (e.g. a slider).</li>
|
||||
<li><code>'imagebutton'</code> - Used when the element should be treated as a button and is also an image.</li>
|
||||
<li><code>'header'</code> - Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><code>'summary'</code> - Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.</li>
|
||||
<li><code>'alert'</code> - Used when an element contains important text to be presented to the user.</li>
|
||||
<li><code>'checkbox'</code> - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.</li>
|
||||
<li><code>'combobox'</code> - Used when an element represents a combo box, which allows the user to select among several choices.</li>
|
||||
<li><code>'menu'</code> - Used when the component is a menu of choices.</li>
|
||||
<li><code>'menubar'</code> - Used when a component is a container of multiple menus.</li>
|
||||
<li><code>'menuitem'</code> - Used to represent an item within a menu.</li>
|
||||
<li><code>'progressbar'</code> - Used to represent a component which indicates progress of a task.</li>
|
||||
<li><code>'radio'</code> - Used to represent a radio button.</li>
|
||||
<li><code>'radiogroup'</code> - Used to represent a group of radio buttons.</li>
|
||||
<li><code>'scrollbar'</code> - Used to represent a scroll bar.</li>
|
||||
<li><code>'spinbutton'</code> - Used to represent a button which opens a list of choices.</li>
|
||||
<li><code>'switch'</code> - Used to represent a switch which can be turned on and off.</li>
|
||||
<li><code>'tab'</code> - Used to represent a tab.</li>
|
||||
<li><code>'tablist'</code> - Used to represent a list of tabs.</li>
|
||||
<li><code>'timer'</code> - Used to represent a timer.</li>
|
||||
<li><code>'toolbar'</code> - Used to represent a tool bar (a container of action buttons or components).</li>
|
||||
</ul>
|
||||
<p>On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the <a href="/react-native/docs/next/accessibility#accessibilitytraits-ios">Accessibility guide</a> for more information.</p>
|
||||
<p>On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS</p>
|
||||
@@ -547,12 +563,16 @@
|
||||
</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>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>
|
||||
<p>Describes the current state of a component to the user of an assistive technology.</p>
|
||||
<p><code>accessibilityStates</code> is an array of values, and may include any of the following:</p>
|
||||
<ul>
|
||||
<li><code>'selected'</code> - The element is in a selected state.</li>
|
||||
<li><code>'disabled'</code> - The element is in a disabled state.</li>
|
||||
<li><code>'selected'</code> - Used when the element is in a selected state. For example, a button is selected.</li>
|
||||
<li><code>'disabled'</code> - Used when the element is disabled and cannot be manipulated.</li>
|
||||
<li><code>'checked'</code> - Used to indicate that a checkable element is currently checked.</li>
|
||||
<li><code>'unchecked'</code> - Used to indicate that a checkable element is not currently checked.</li>
|
||||
<li><code>'busy'</code> - Used to indicate that an element is currently busy.</li>
|
||||
<li><code>'expanded'</code> - Used to indicate that an expandable element is currently expanded.</li>
|
||||
<li><code>'collapsed'</code> - Used to indicate that an expandable element is currently collapsed.</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
Reference in New Issue
Block a user