From 17b30aceb2c631071f5b8bb56e3f680b6fc9e3dd Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 12 Jul 2016 11:03:31 -0700
Subject: [PATCH] [fix] default DOM element for 'View' (part 2)

First patch: 41159bcb1098182edabbb67ac741c3f7dee0ca83

@chriskjaer mentioned that changing from 'div' to 'span' introduces
different validation errors, e.g., <span><form>a</form></span>.

This patch uses 'context' to switch to a 'span' element if a 'View' is
being rendered within a 'button' element.
---
 src/components/View/__tests__/index-test.js | 14 +++++++++++++-
 src/components/View/index.js                | 16 +++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/View/__tests__/index-test.js b/src/components/View/__tests__/index-test.js
index cc3dd18e..0d8d90cb 100644
--- a/src/components/View/__tests__/index-test.js
+++ b/src/components/View/__tests__/index-test.js
@@ -7,8 +7,20 @@ import View from '../'
 import { mount, shallow } from 'enzyme'
 
 suite('components/View', () => {
+  suite('rendered element', () => {
+    test('is a "div" by default', () => {
+      const view = shallow(<View />)
+      assert.equal(view.is('div'), true)
+    })
+
+    test('is a "span" when inside <View accessibilityRole="button" />', () => {
+      const view = mount(<View accessibilityRole='button'><View /></View>)
+      assert.equal(view.find('span').length, 1)
+    })
+  })
+
   test('prop "children"', () => {
-    const children = 'children'
+    const children = <View testID='1' />
     const view = shallow(<View>{children}</View>)
     assert.equal(view.prop('children'), children)
   })
diff --git a/src/components/View/index.js b/src/components/View/index.js
index 38adb1ea..0456530b 100644
--- a/src/components/View/index.js
+++ b/src/components/View/index.js
@@ -50,9 +50,18 @@ class View extends Component {
     style: {}
   };
 
-  constructor(props, context) {
-    super(props, context)
-    this._normalizeEventForHandler = this._normalizeEventForHandler.bind(this)
+  static childContextTypes = {
+    isInAButtonView: PropTypes.bool
+  };
+
+  static contextTypes = {
+    isInAButtonView: PropTypes.bool
+  };
+
+  getChildContext() {
+    return {
+      isInAButtonView: this.props.accessibilityRole === 'button'
+    }
   }
 
   render() {
@@ -72,6 +81,7 @@ class View extends Component {
 
     const props = {
       ...other,
+      component: this.context.isInAButtonView ? 'span' : 'div',
       onClick: this._normalizeEventForHandler(this.props.onClick),
       onClickCapture: this._normalizeEventForHandler(this.props.onClickCapture),
       onTouchCancel: this._normalizeEventForHandler(this.props.onTouchCancel),