From 781fdd69f39b3913f5a3dd297b25dc2b3c3064eb Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Wed, 15 Apr 2020 15:23:53 -0700 Subject: [PATCH 1/8] Implement AccessibilityState --- .../Views/FrameworkElementViewManager.cpp | 49 +++++++++++-------- .../View/ReactNativeViewViewConfig.windows.js | 1 - .../AccessibilityExampleWindows.tsx | 22 ++++----- 3 files changed, 39 insertions(+), 33 deletions(-) diff --git a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp index f1c223c7632..e1e19477d58 100644 --- a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp +++ b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp @@ -141,10 +141,18 @@ void FrameworkElementViewManager::TransferProperties(XamlView oldView, XamlView } } +static folly::dynamic GetAccessibilityStateProps() { + folly::dynamic props = folly::dynamic::object(); + + // TODO: "checked" is spec'd as being either a boolean or the string "mixed". How do we handle "mixed"? + props.update(folly::dynamic::object("selected", "boolean")("disabled", "boolean")("checked", "boolean")( + "busy", "boolean")("expanded", "boolean")); + return props; +} folly::dynamic FrameworkElementViewManager::GetNativeProps() const { folly::dynamic props = Super::GetNativeProps(); props.update(folly::dynamic::object("accessible", "boolean")("accessibilityRole", "string")( - "accessibilityStates", "array")("accessibilityHint", "string")("accessibilityLabel", "string")( + "accessibilityState", GetAccessibilityStateProps())("accessibilityHint", "string")("accessibilityLabel", "string")( "accessibilityPosInSet", "number")("accessibilitySetSize", "number")("testID", "string")("tooltip", "string")( "accessibilityActions", "array")("accessibilityLiveRegion", "string")); return props; @@ -385,28 +393,27 @@ bool FrameworkElementViewManager::UpdateProperty( } else if (propertyValue.isNull()) { element.ClearValue(DynamicAutomationProperties::AccessibilityRoleProperty()); } - } else if (propertyName == "accessibilityStates") { + } else if (propertyName == "accessibilityState") { bool states[static_cast(winrt::react::uwp::AccessibilityStates::CountStates)] = {}; - if (propertyValue.isArray()) { - for (const auto &state : propertyValue) { - if (!state.isString()) - continue; - - if (state.getString() == "selected") - states[static_cast(winrt::react::uwp::AccessibilityStates::Selected)] = true; - else if (state.getString() == "disabled") - states[static_cast(winrt::react::uwp::AccessibilityStates::Disabled)] = true; - else if (state.getString() == "checked") - states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)] = true; - else if (state.getString() == "unchecked") - states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)] = true; - else if (state.getString() == "busy") - states[static_cast(winrt::react::uwp::AccessibilityStates::Busy)] = true; - else if (state.getString() == "expanded") - states[static_cast(winrt::react::uwp::AccessibilityStates::Expanded)] = true; - else if (state.getString() == "collapsed") - states[static_cast(winrt::react::uwp::AccessibilityStates::Collapsed)] = true; + if (propertyValue.isObject()) { + for (const auto &pair : propertyValue.items()) { + const std::string &innerName = pair.first.getString(); + const folly::dynamic &innerValue = pair.second; + + if (innerName == "selected") + states[static_cast(winrt::react::uwp::AccessibilityStates::Selected)] = innerValue.getBool(); + else if (innerName == "disabled") + states[static_cast(winrt::react::uwp::AccessibilityStates::Disabled)] = innerValue.getBool(); + else if (innerName == "checked") { + states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)] = innerValue.getBool(); + states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)] = !innerValue.getBool(); + } else if (innerName == "busy") + states[static_cast(winrt::react::uwp::AccessibilityStates::Busy)] = innerValue.getBool(); + else if (innerName == "expanded") { + states[static_cast(winrt::react::uwp::AccessibilityStates::Expanded)] = innerValue.getBool(); + states[static_cast(winrt::react::uwp::AccessibilityStates::Collapsed)] = !innerValue.getBool(); + } } } diff --git a/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js b/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js index 62680847d37..189b639d43c 100644 --- a/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js +++ b/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js @@ -140,7 +140,6 @@ const ReactNativeViewConfig = { accessibilityLabel: true, accessibilityLiveRegion: true, accessibilityRole: true, - accessibilityStates: true, // TODO: Can be removed after next release accessibilityState: true, accessibilityValue: true, accessibilityViewIsModal: true, diff --git a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx index 69d4a64fa4b..726358ef885 100644 --- a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx +++ b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx @@ -294,7 +294,7 @@ class AccessibilityStateExamples extends React.Component { backgroundColor: this.state.viewDisabled ? 'gray' : 'lightskyblue', }} accessibilityRole="none" - accessibilityStates={this.state.viewDisabled ? ['disabled'] : []}> + accessibilityState={{disabled:this.state.viewDisabled}}> This View should be{' '} {this.state.viewDisabled ? 'disabled' : 'enabled'} according to UIA @@ -318,9 +318,9 @@ class AccessibilityStateExamples extends React.Component { }} accessibilityRole="button" accessibilityLabel={'Selectable item ' + (item.index + 1)} - accessibilityStates={ - this.state.itemsSelected[item.index] ? ['selected'] : [] - } + accessibilityState={{ + selected: this.state.itemsSelected[item.index] + }} onPress={() => this.selectPress(item.index)}> {this.state.itemsSelected[item.index] @@ -348,9 +348,9 @@ class AccessibilityStateExamples extends React.Component { //@ts-ignore accessibilityRole="checkbox" //@ts-ignore - accessibilityStates={ - this.state.viewChecked ? ['checked'] : ['unchecked'] - }> + accessibilityState={{ + checked: this.state.viewChecked + }}> This View should be{' '} {this.state.viewChecked ? 'Checked' : 'Unchecked'} according to UIA @@ -372,7 +372,7 @@ class AccessibilityStateExamples extends React.Component { }} accessibilityRole="none" //@ts-ignore - accessibilityStates={this.state.viewBusy ? ['busy'] : []}> + accessibilityState={{busy: this.state.viewBusy}}> This View should be {this.state.viewBusy ? 'Busy' : 'Not Busy'}{' '} according to UIA @@ -395,9 +395,9 @@ class AccessibilityStateExamples extends React.Component { }} accessibilityRole="none" //@ts-ignore - accessibilityStates={ - this.state.viewCollapsed ? ['collapsed'] : ['expanded'] - }> + accessibilityState={{ + expanded: !this.state.viewCollapsed + }}> This View should be{' '} {this.state.viewCollapsed ? 'Collapsed' : 'Expanded'} according to From cda68d87ade9784eceab4620a380b0bcf7eea7e5 Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Wed, 15 Apr 2020 15:25:01 -0700 Subject: [PATCH 2/8] formatting --- vnext/ReactUWP/Views/FrameworkElementViewManager.cpp | 6 +++--- .../Accessibility/AccessibilityExampleWindows.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp index e1e19477d58..9771845ce15 100644 --- a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp +++ b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp @@ -152,9 +152,9 @@ static folly::dynamic GetAccessibilityStateProps() { folly::dynamic FrameworkElementViewManager::GetNativeProps() const { folly::dynamic props = Super::GetNativeProps(); props.update(folly::dynamic::object("accessible", "boolean")("accessibilityRole", "string")( - "accessibilityState", GetAccessibilityStateProps())("accessibilityHint", "string")("accessibilityLabel", "string")( - "accessibilityPosInSet", "number")("accessibilitySetSize", "number")("testID", "string")("tooltip", "string")( - "accessibilityActions", "array")("accessibilityLiveRegion", "string")); + "accessibilityState", GetAccessibilityStateProps())("accessibilityHint", "string")( + "accessibilityLabel", "string")("accessibilityPosInSet", "number")("accessibilitySetSize", "number")( + "testID", "string")("tooltip", "string")("accessibilityActions", "array")("accessibilityLiveRegion", "string")); return props; } diff --git a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx index 726358ef885..4c42dce3a94 100644 --- a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx +++ b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx @@ -294,7 +294,7 @@ class AccessibilityStateExamples extends React.Component { backgroundColor: this.state.viewDisabled ? 'gray' : 'lightskyblue', }} accessibilityRole="none" - accessibilityState={{disabled:this.state.viewDisabled}}> + accessibilityState={{disabled: this.state.viewDisabled}}> This View should be{' '} {this.state.viewDisabled ? 'disabled' : 'enabled'} according to UIA @@ -319,7 +319,7 @@ class AccessibilityStateExamples extends React.Component { accessibilityRole="button" accessibilityLabel={'Selectable item ' + (item.index + 1)} accessibilityState={{ - selected: this.state.itemsSelected[item.index] + selected: this.state.itemsSelected[item.index], }} onPress={() => this.selectPress(item.index)}> @@ -349,7 +349,7 @@ class AccessibilityStateExamples extends React.Component { accessibilityRole="checkbox" //@ts-ignore accessibilityState={{ - checked: this.state.viewChecked + checked: this.state.viewChecked, }}> This View should be{' '} @@ -396,7 +396,7 @@ class AccessibilityStateExamples extends React.Component { accessibilityRole="none" //@ts-ignore accessibilityState={{ - expanded: !this.state.viewCollapsed + expanded: !this.state.viewCollapsed, }}> This View should be{' '} From e4aa9a7365a9d3e1d3c1035a023b7c16a950d7b4 Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Wed, 15 Apr 2020 15:25:43 -0700 Subject: [PATCH 3/8] Change files --- ...ve-windows-2020-04-15-15-25-43-AccessibilityState.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/react-native-windows-2020-04-15-15-25-43-AccessibilityState.json diff --git a/change/react-native-windows-2020-04-15-15-25-43-AccessibilityState.json b/change/react-native-windows-2020-04-15-15-25-43-AccessibilityState.json new file mode 100644 index 00000000000..6099cacb2eb --- /dev/null +++ b/change/react-native-windows-2020-04-15-15-25-43-AccessibilityState.json @@ -0,0 +1,8 @@ +{ + "type": "prerelease", + "comment": "implement accessibilityState", + "packageName": "react-native-windows", + "email": "kmelmon@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-04-15T22:25:43.418Z" +} \ No newline at end of file From fcfd04a461adb6359c4e55f81ed0185dbe5016c7 Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Wed, 15 Apr 2020 15:58:45 -0700 Subject: [PATCH 4/8] bring back accessibilityStates to port back to 0.61 --- .../Views/FrameworkElementViewManager.cpp | 46 +++++++++++++++++-- .../View/ReactNativeViewViewConfig.windows.js | 1 + 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp index 9771845ce15..d98172deafe 100644 --- a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp +++ b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp @@ -152,9 +152,10 @@ static folly::dynamic GetAccessibilityStateProps() { folly::dynamic FrameworkElementViewManager::GetNativeProps() const { folly::dynamic props = Super::GetNativeProps(); props.update(folly::dynamic::object("accessible", "boolean")("accessibilityRole", "string")( - "accessibilityState", GetAccessibilityStateProps())("accessibilityHint", "string")( - "accessibilityLabel", "string")("accessibilityPosInSet", "number")("accessibilitySetSize", "number")( - "testID", "string")("tooltip", "string")("accessibilityActions", "array")("accessibilityLiveRegion", "string")); + "accessibilityStates", "array")("accessibilityState", GetAccessibilityStateProps())( + "accessibilityHint", "string")("accessibilityLabel", "string")("accessibilityPosInSet", "number")( + "accessibilitySetSize", "number")("testID", "string")("tooltip", "string")("accessibilityActions", "array")( + "accessibilityLiveRegion", "string")); return props; } @@ -393,6 +394,45 @@ bool FrameworkElementViewManager::UpdateProperty( } else if (propertyValue.isNull()) { element.ClearValue(DynamicAutomationProperties::AccessibilityRoleProperty()); } + } else if (propertyName == "accessibilityStates") { + bool states[static_cast(winrt::react::uwp::AccessibilityStates::CountStates)] = {}; + + if (propertyValue.isArray()) { + for (const auto &state : propertyValue) { + if (!state.isString()) + continue; + + if (state.getString() == "selected") + states[static_cast(winrt::react::uwp::AccessibilityStates::Selected)] = true; + else if (state.getString() == "disabled") + states[static_cast(winrt::react::uwp::AccessibilityStates::Disabled)] = true; + else if (state.getString() == "checked") + states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)] = true; + else if (state.getString() == "unchecked") + states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)] = true; + else if (state.getString() == "busy") + states[static_cast(winrt::react::uwp::AccessibilityStates::Busy)] = true; + else if (state.getString() == "expanded") + states[static_cast(winrt::react::uwp::AccessibilityStates::Expanded)] = true; + else if (state.getString() == "collapsed") + states[static_cast(winrt::react::uwp::AccessibilityStates::Collapsed)] = true; + } + } + + DynamicAutomationProperties::SetAccessibilityStateSelected( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Selected)]); + DynamicAutomationProperties::SetAccessibilityStateDisabled( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Disabled)]); + DynamicAutomationProperties::SetAccessibilityStateChecked( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)]); + DynamicAutomationProperties::SetAccessibilityStateUnchecked( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)]); + DynamicAutomationProperties::SetAccessibilityStateBusy( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Busy)]); + DynamicAutomationProperties::SetAccessibilityStateExpanded( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Expanded)]); + DynamicAutomationProperties::SetAccessibilityStateCollapsed( + element, states[static_cast(winrt::react::uwp::AccessibilityStates::Collapsed)]); } else if (propertyName == "accessibilityState") { bool states[static_cast(winrt::react::uwp::AccessibilityStates::CountStates)] = {}; diff --git a/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js b/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js index 189b639d43c..62680847d37 100644 --- a/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js +++ b/vnext/src/Libraries/Components/View/ReactNativeViewViewConfig.windows.js @@ -140,6 +140,7 @@ const ReactNativeViewConfig = { accessibilityLabel: true, accessibilityLiveRegion: true, accessibilityRole: true, + accessibilityStates: true, // TODO: Can be removed after next release accessibilityState: true, accessibilityValue: true, accessibilityViewIsModal: true, From d2fdaf3d805e4a389cd2add331a575a3b04713d6 Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Wed, 15 Apr 2020 19:15:26 -0700 Subject: [PATCH 5/8] formatting --- vnext/ReactUWP/Views/FrameworkElementViewManager.cpp | 1 + 1 file changed, 1 insertion(+) diff --git a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp index d98172deafe..38ebf14edae 100644 --- a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp +++ b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp @@ -149,6 +149,7 @@ static folly::dynamic GetAccessibilityStateProps() { "busy", "boolean")("expanded", "boolean")); return props; } + folly::dynamic FrameworkElementViewManager::GetNativeProps() const { folly::dynamic props = Super::GetNativeProps(); props.update(folly::dynamic::object("accessible", "boolean")("accessibilityRole", "string")( From 561338cd385f09fd3588b1ae178610b674112a3c Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Wed, 15 Apr 2020 23:49:11 -0700 Subject: [PATCH 6/8] handle mixed state --- .../ReactUWP/Views/FrameworkElementViewManager.cpp | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp index 38ebf14edae..542d30427c3 100644 --- a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp +++ b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp @@ -144,8 +144,7 @@ void FrameworkElementViewManager::TransferProperties(XamlView oldView, XamlView static folly::dynamic GetAccessibilityStateProps() { folly::dynamic props = folly::dynamic::object(); - // TODO: "checked" is spec'd as being either a boolean or the string "mixed". How do we handle "mixed"? - props.update(folly::dynamic::object("selected", "boolean")("disabled", "boolean")("checked", "boolean")( + props.update(folly::dynamic::object("selected", "boolean")("disabled", "boolean")("checked", "string")( "busy", "boolean")("expanded", "boolean")); return props; } @@ -446,9 +445,14 @@ bool FrameworkElementViewManager::UpdateProperty( states[static_cast(winrt::react::uwp::AccessibilityStates::Selected)] = innerValue.getBool(); else if (innerName == "disabled") states[static_cast(winrt::react::uwp::AccessibilityStates::Disabled)] = innerValue.getBool(); - else if (innerName == "checked") { - states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)] = innerValue.getBool(); - states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)] = !innerValue.getBool(); + else if (innerName == "checked") { + states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)] = + innerValue.isBool() && innerValue.getBool(); + states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)] = + innerValue.isBool() && !innerValue.getBool(); + // If the state is "mixed" we'll just set both Checked and Unchecked to false, + // then later in the IToggleProvider implementation it will return the Intermediate state + // due to both being set to false (see DynamicAutomationPeer::ToggleState()). } else if (innerName == "busy") states[static_cast(winrt::react::uwp::AccessibilityStates::Busy)] = innerValue.getBool(); else if (innerName == "expanded") { From 934bbdc93d50100b8fd57c75209fa076832e8c26 Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Thu, 16 Apr 2020 00:26:00 -0700 Subject: [PATCH 7/8] update test --- .../Views/FrameworkElementViewManager.cpp | 2 +- .../AccessibilityExampleWindows.tsx | 20 +++++++++++-------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp index 542d30427c3..4beb3492efc 100644 --- a/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp +++ b/vnext/ReactUWP/Views/FrameworkElementViewManager.cpp @@ -445,7 +445,7 @@ bool FrameworkElementViewManager::UpdateProperty( states[static_cast(winrt::react::uwp::AccessibilityStates::Selected)] = innerValue.getBool(); else if (innerName == "disabled") states[static_cast(winrt::react::uwp::AccessibilityStates::Disabled)] = innerValue.getBool(); - else if (innerName == "checked") { + else if (innerName == "checked") { states[static_cast(winrt::react::uwp::AccessibilityStates::Checked)] = innerValue.isBool() && innerValue.getBool(); states[static_cast(winrt::react::uwp::AccessibilityStates::Unchecked)] = diff --git a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx index 4c42dce3a94..b113cbb39bf 100644 --- a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx +++ b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx @@ -270,7 +270,7 @@ class AccessibilityStateExamples extends React.Component { public state = { viewDisabled: false, itemsSelected: [false, false, false], - viewChecked: false, + viewChecked: 0, viewBusy: false, viewCollapsed: false, }; @@ -332,8 +332,8 @@ class AccessibilityStateExamples extends React.Component { keyExtractor={(item, index) => index.toString()} /> - The following TouchableHighlight toggles accessibilityState.checked - and accessibilityState.unchecked for the View under it: + The following TouchableHighlight cycles accessibilityState.checked + through unchecked/checked/mixed for the View under it: This View should be{' '} - {this.state.viewChecked ? 'Checked' : 'Unchecked'} according to UIA + {this.state.viewChecked === 0 ? 'Unchecked' : this.state.viewChecked === 1 ? 'Checked' : 'Mixed'} according to UIA - The following TouchableHighlight toggles accessibilityState.busy for + The following TouchableHighlight toggles the acessibilityState.busy for the View under it: { - this.setState({viewChecked: !this.state.viewChecked}); + let newChecked = this.state.viewChecked + 1; + if (newChecked === 3) { + newChecked = 0; + } + this.setState({viewChecked: newChecked}); }; private busyPress = () => { From 1e88f05f98ec7e1c62cce5d5f14859436fd961aa Mon Sep 17 00:00:00 2001 From: Keith Melmon Date: Thu, 16 Apr 2020 10:51:12 -0700 Subject: [PATCH 8/8] prettier fixes --- .../AccessibilityExampleWindows.tsx | 25 +++++++++++++++---- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx index b113cbb39bf..d9c5ac0f559 100644 --- a/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx +++ b/vnext/src/RNTester/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx @@ -343,22 +343,37 @@ class AccessibilityStateExamples extends React.Component { This View should be{' '} - {this.state.viewChecked === 0 ? 'Unchecked' : this.state.viewChecked === 1 ? 'Checked' : 'Mixed'} according to UIA + {this.state.viewChecked === 0 + ? 'Unchecked' + : this.state.viewChecked === 1 + ? 'Checked' + : 'Mixed'}{' '} + according to UIA - The following TouchableHighlight toggles the acessibilityState.busy for - the View under it: + The following TouchableHighlight toggles the acessibilityState.busy + for the View under it: