-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement AccessibilityAction (#3475)
- Loading branch information
Showing
17 changed files
with
629 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"type": "none", | ||
"comment": "Implement accessibilityAction", | ||
"packageName": "react-native-windows", | ||
"email": "licanhua@live.com", | ||
"commit": "e931062bbaef57538e8e7ea06c6f1fb929f7b024", | ||
"date": "2019-10-21T23:17:08.915Z", | ||
"file": "F:\\repo\\react-native-windows\\change\\react-native-windows-2019-10-21-16-17-09-action.json" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,59 @@ | ||
import { View, Text } from 'react-native' | ||
/** | ||
* Copyright (c) Microsoft Corporation. All rights reserved. | ||
* Licensed under the MIT License. | ||
*/ | ||
|
||
import { View, Text, ViewProps } from 'react-native' | ||
import React, { useState } from 'react'; | ||
|
||
// MyView is a workaround. Currently in typescript, accessibilityAction doesn't allow name to be any string. | ||
const MyView = (props: any) => (<View {...props as ViewProps} />); | ||
|
||
export function AccessibilityTestPage() { | ||
const [pressedCountNested, setPressedCountNested] = useState(0); | ||
const [pressedCount, setPressedCount] = useState(0); | ||
const [accessibilityAction, setAccessibilityAction] = useState(''); | ||
|
||
return ( | ||
<View> | ||
<Text accessible={true} accessibilityLiveRegion="polite" style={{fontWeight: "bold"}}> | ||
I'm bold | ||
<Text style={{color: 'red'}} onPress={() => setPressedCountNested(pressedCountNested + 1)} accessible={true} accessibilityLiveRegion="polite">Pressed {pressedCountNested} times</Text> | ||
</Text> | ||
<Text style={{color: 'green'}} onPress={() => setPressedCount(pressedCount + 1)} accessible={true} accessibilityLiveRegion="polite">Pressed {pressedCount} times</Text> | ||
<View> | ||
<Text accessible={true} accessibilityLiveRegion="polite" style={{ fontWeight: "bold" }}> | ||
I'm bold | ||
<Text style={{ color: 'red' }} onPress={() => setPressedCountNested(pressedCountNested + 1)} accessible={true} accessibilityLiveRegion="polite">Pressed {pressedCountNested} times</Text> | ||
</Text> | ||
<Text style={{ color: 'green' }} onPress={() => setPressedCount(pressedCount + 1)} accessible={true} accessibilityLiveRegion="polite">Pressed {pressedCount} times</Text> | ||
</View> | ||
<View> | ||
<MyView | ||
accessible={true} | ||
accessibilityLabel='AccessibilityAction' | ||
accessibilityRole='CheckBox' | ||
accessibilityStates={['checked', 'expanded']} | ||
accessibilityActions={[ | ||
{ name: 'toggle', label: 'toggle' }, | ||
{ name: 'invoke', label: 'invoke' }, | ||
{ name: 'expand', label: 'expand' }, | ||
{ name: 'collapse', label: 'collapseIt' }, | ||
]} | ||
onAccessibilityAction={(event: { nativeEvent: { actionName: any; }; }) => { | ||
switch (event.nativeEvent.actionName) { | ||
case 'toggle': | ||
setAccessibilityAction('toggle action success'); | ||
break; | ||
case 'invoke': | ||
setAccessibilityAction('invoke action success'); | ||
break; | ||
case 'expand': | ||
setAccessibilityAction('expand action success'); | ||
break; | ||
case 'collapseIt': | ||
setAccessibilityAction('collapseIt action success'); | ||
break; | ||
} | ||
}} | ||
> | ||
<Text>accessibilityAction:{accessibilityAction}</Text> | ||
</MyView> | ||
</View> | ||
</View>) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
// Copyright (c) Microsoft Corporation. All rights reserved. | ||
// Licensed under the MIT License. | ||
|
||
// Note: This is just a workaround should be removed in the future. | ||
// Currently there are two folders which hold idl files: ABI/idl and Views/cppwinrt | ||
// ABI/idl is compiled by MidlRT target, but Views/cppwinrt is built by buildcppwinrt. | ||
// Views/cppwinrt is not merged into ReactUWP.Winmd, but ABI/idl is merged. | ||
// so it hits without this file: Exception thrown at 0x7646EF12 (KernelBase.dll) in ReactUWPTestApp.exe: WinRT originate error - 0x80131522 : 'System.TypeLoadException: Could not find Windows Runtime type 'react.uwp.AccessibilityAction' | ||
// This file has the same 'struct AccessibilityAction' in Views/cppwinrt/AccessibilityAction.idl. | ||
|
||
import "inspectable.idl"; | ||
|
||
namespace react.uwp | ||
{ | ||
[version(1)] | ||
|
||
struct AccessibilityAction { | ||
String Name; | ||
String Label; | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.