Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on 884e242922
This commit is contained in:
Website Deployment Script
2018-02-12 17:22:29 +00:00
parent 884e242922
commit 52a8caed5e
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/accessibility.html
+15 -8
View File
@@ -11,7 +11,7 @@
<h3><a class="anchor" aria-hidden="true" name="accessibility-properties"></a><a href="#accessibility-properties" aria-hidden="true" class="hash-link" ><svg 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 properties</h3>
<h4><a class="anchor" aria-hidden="true" name="accessible-ios-android"></a><a href="#accessible-ios-android" aria-hidden="true" class="hash-link" ><svg 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>accessible (iOS, Android)</h4>
<p>When <code>true</code>, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.</p>
<p>On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.</p>
<p>On Android, <code>accessible={true}</code> property for a react-native View will be translated into native <code>focusable={true}</code>.</p>
<pre><code class="hljs css javascript">&lt;View accessible={true}&gt;
&lt;Text&gt;text one&lt;/Text&gt;
&lt;Text&gt;text two&lt;/Text&gt;
@@ -105,13 +105,20 @@
<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.html">AccessibilityInfo documentation</a> for details.</p>
<h3><a class="anchor" aria-hidden="true" name="sending-accessibility-events-android"></a><a href="#sending-accessibility-events-android" aria-hidden="true" class="hash-link" ><svg 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>
<p>Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.</p>
<pre><code class="hljs css javascript">_onPress: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">this</span>.state.radioButton = <span class="hljs-keyword">this</span>.state.radioButton === “radiobutton_checked” ?
“radiobutton_unchecked” : “radiobutton_checked”;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state.radioButton === “radiobutton_checked”) {
RCTUIManager.sendAccessibilityEvent(
ReactNative.findNodeHandle(<span class="hljs-keyword">this</span>),
RCTUIManager.AccessibilityEventTypes.typeViewClicked);
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { UIManager, findNodeHandle } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
_onPress: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">const</span> radioButton = <span class="hljs-keyword">this</span>.state.radioButton === <span class="hljs-string">'radiobutton_checked'</span> ?
<span class="hljs-string">'radiobutton_unchecked'</span> : <span class="hljs-string">'radiobutton_checked'</span>
<span class="hljs-keyword">this</span>.setState({
<span class="hljs-attr">radioButton</span>: radioButton
});
<span class="hljs-keyword">if</span> (radioButton === <span class="hljs-string">'radiobutton_checked'</span>) {
UIManager.sendAccessibilityEvent(
findNodeHandle(<span class="hljs-keyword">this</span>),
UIManager.AccessibilityEventTypes.typeViewClicked);
}
}