TextInput onFocus/onBlur, scroll indicator, and accessibilityLiveRegion fixes

change/react-native-windows-2020-02-06-10-15-05-accessibilityLiveRegionFix.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "comment": "Enable screen reader announcements for accessibilityLiveRegion",
+  "packageName": "react-native-windows",
+  "email": "jagorrin@microsoft.com",
+  "commit": "4571c3c9445b1e31fbb623393644aef9e9fe6c09",
+  "dependentChangeType": "patch",
+  "date": "2020-02-06T18:15:05.072Z"
+}

change/react-native-windows-2020-02-07-15-55-25-ScrollIndicatorFix.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "comment": "Fix scroll indicators being shown when not required",
+  "packageName": "react-native-windows",
+  "email": "jagorrin@microsoft.com",
+  "commit": "ffaa1051f2f2f154630e710596bae3dea5ae4aa1",
+  "dependentChangeType": "patch",
+  "date": "2020-02-07T23:55:25.611Z"
+}

change/react-native-windows-2020-02-11-12-03-45-touchable-focus-blur-events.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "comment": "Fix onFocus onBlur events",
+  "packageName": "react-native-windows",
+  "email": "kaigu@microsoft.com",
+  "commit": "38bc6cad5c3cdd7d1e00ac0e3a7185e12a2fa381",
+  "dependentChangeType": "patch",
+  "date": "2020-02-11T20:03:45.062Z"
+}

packages/E2ETest/app/Consts.ts

@@ -13,7 +13,9 @@ export const UNKNOWN_TESTPAGE = 'UnknownTestPage';
 export const TEXTINPUT_TESTPAGE = 'TextInputTestPage';
 
 export const TEXTINPUT_ON_TEXTINPUT = 'TextInput';
+export const CURTEXT_ON_TEXTINPUT = 'CurTextInput';
 export const PREVTEXT_ON_TEXTINPUT = 'PrevTextInput';
+export const PREV2TEXT_ON_TEXTINPUT = 'Prev2TextInput';
 export const ML_TEXTINPUT_ON_TEXTINPUT = 'TextInputMultiLine';
 export const CAP_TEXTINPUT_ON_TEXTINPUT = 'TextInputAutoCap';
 

packages/E2ETest/app/TextInputTestPage.tsx

@@ -6,7 +6,8 @@
 
 import React from 'react';
 import {Text, TextInput, View} from 'react-native';
-import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, PREVTEXT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT} from './Consts';
+import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, CURTEXT_ON_TEXTINPUT,
+  PREVTEXT_ON_TEXTINPUT, PREV2TEXT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT} from './Consts';
 
 interface ITextInputTestPageState {
   curText: string;
@@ -80,9 +81,9 @@ export class TextInputTestPage extends React.Component<
           autoCapitalize="characters"
         />
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-          <Text testID="CurText">curText: {this.state.curText}</Text>
+          <Text testID={CURTEXT_ON_TEXTINPUT}>curText: {this.state.curText}</Text>
           <Text testID={PREVTEXT_ON_TEXTINPUT}>prev: {this.state.prevText}</Text>
-          <Text testID="Prev2Text">prev2: {this.state.prev2Text})</Text>
+          <Text testID={PREV2TEXT_ON_TEXTINPUT}>prev2: {this.state.prev2Text})</Text>
           <Text testID="Prev3Text">prev3: {this.state.prev3Text}</Text>
         </View>
       </View>

packages/E2ETest/wdio/pages/TextInputTestPage.ts

@@ -9,13 +9,23 @@ import {
   ML_TEXTINPUT_ON_TEXTINPUT,
   CAP_TEXTINPUT_ON_TEXTINPUT,
   PREVTEXT_ON_TEXTINPUT,
+  PREV2TEXT_ON_TEXTINPUT,
+  CURTEXT_ON_TEXTINPUT,
 } from '../../app/Consts';
 
 class TextInputTestPage extends BasePage {
   isPageLoaded() {
     return super.isPageLoaded() && this.textInput.isDisplayed();
   }
 
+  clickTextInput() {
+    this.textInput.click();
+  }
+
+  clickMultilineTextInput() {
+    this.multiLineTextInput.click();
+  }
+
   clearAndTypeOnTextInput(text: string) {
     this.textInput.setValue(text);
   }
@@ -39,10 +49,18 @@ class TextInputTestPage extends BasePage {
     this.multiLineTextInput.addValue(text);
   }
 
+  getTextInputCurText() {
+    return this.curTextInput.getText();
+  }
+
   getTextInputPrevText() {
     return this.prevTextInput.getText();
   }
 
+  getTextInputPrev2Text() {
+    return this.prev2TextInput.getText();
+  }
+
   getTextInputText() {
     return this.textInput.getText();
   }
@@ -59,10 +77,18 @@ class TextInputTestPage extends BasePage {
     return By(TEXTINPUT_ON_TEXTINPUT);
   }
 
+  private get curTextInput() {
+    return By(CURTEXT_ON_TEXTINPUT);
+  }
+
   private get prevTextInput() {
     return By(PREVTEXT_ON_TEXTINPUT);
   }
 
+  private get prev2TextInput() {
+    return By(PREV2TEXT_ON_TEXTINPUT);
+  }
+
   private get multiLineTextInput() {
     return By(ML_TEXTINPUT_ON_TEXTINPUT);
   }

packages/E2ETest/wdio/test/testInput.spec.ts

@@ -13,9 +13,20 @@ beforeAll(() => {
 });
 
 describe('First', () => {
+  it('Click on TextInput to focus', () => {
+    TextInputTestPage.clickTextInput();
+    assert.ok(TextInputTestPage.getTextInputCurText().includes('onFocus'));
+  });
+
+  it('Click on multiline TextInput to move focus away from single line TextInput', () => {
+    TextInputTestPage.clickMultilineTextInput();
+    assert.ok(TextInputTestPage.getTextInputPrevText().includes('onBlur'));
+  });
+
   it('Type abc on TextInput', () => {
     TextInputTestPage.clearAndTypeOnTextInput('abc');
     assert.equal(TextInputTestPage.getTextInputText(), 'abc');
+    assert.ok(TextInputTestPage.getTextInputPrev2Text().includes('onKeyPress'));
   });
 
   it('Type def on TextInput', () => {

vnext/ReactUWP/Views/FrameworkElementViewManager.cpp

@@ -141,10 +141,10 @@ void FrameworkElementViewManager::TransferProperties(XamlView oldView, XamlView
 
 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")("accessibilityPosInSet", "number")(
-          "accessibilitySetSize", "number")("testID", "string")("tooltip", "string")("accessibilityActions", "array"));
+  props.update(folly::dynamic::object("accessible", "boolean")("accessibilityRole", "string")(
+      "accessibilityStates", "array")("accessibilityHint", "string")("accessibilityLabel", "string")(
+      "accessibilityPosInSet", "number")("accessibilitySetSize", "number")("testID", "string")("tooltip", "string")(
+      "accessibilityActions", "array")("accessibilityLiveRegion", "string"));
   return props;
 }
 

vnext/ReactUWP/Views/ScrollViewManager.cpp

@@ -449,8 +449,8 @@ folly::dynamic ScrollViewManager::GetExportedCustomDirectEventTypeConstants() co
 XamlView ScrollViewManager::CreateViewCore(int64_t tag) {
   const auto scrollViewer = winrt::ScrollViewer{};
 
-  scrollViewer.HorizontalScrollBarVisibility(winrt::ScrollBarVisibility::Visible);
-  scrollViewer.VerticalScrollBarVisibility(winrt::ScrollBarVisibility::Visible);
+  scrollViewer.HorizontalScrollBarVisibility(winrt::ScrollBarVisibility::Auto);
+  scrollViewer.VerticalScrollBarVisibility(winrt::ScrollBarVisibility::Auto);
   scrollViewer.VerticalSnapPointsAlignment(winrt::SnapPointsAlignment::Near);
   scrollViewer.VerticalSnapPointsType(winrt::SnapPointsType::Mandatory);
   scrollViewer.HorizontalSnapPointsType(winrt::SnapPointsType::Mandatory);

vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -318,6 +318,8 @@ const TouchableWithoutFeedback = ((createReactClass({
       onResponderMove: this.touchableHandleResponderMove,
       onResponderRelease: this.touchableHandleResponderRelease,
       onResponderTerminate: this.touchableHandleResponderTerminate,
+      onKeyUp: this._onKeyUp,
+      onKeyDown: this._onKeyDown,
       tooltip: this.props.tooltip, // TODO(macOS/win ISS#2323203)
       clickable:
         this.props.clickable !== false && this.props.onPress !== undefined, // TODO(android ISS)