View: additional accessibility props

* Add `accessibilityLiveRegion` for `aria-live` support.
* Add `accessibilityRole` for `role` support.

Fix #11

src/components/View/index.js

@@ -31,15 +31,12 @@ const styles = {
 class View extends React.Component {
   static propTypes = {
     accessibilityLabel: PropTypes.string,
+    accessibilityLiveRegion: PropTypes.oneOf(['assertive', 'off', 'polite']),
+    accessibilityRole: PropTypes.string,
     accessible: PropTypes.bool,
     children: PropTypes.any,
     component: CoreComponent.propTypes.component,
-    pointerEvents: PropTypes.oneOf([
-      'auto',
-      'box-none',
-      'box-only',
-      'none'
-    ]),
+    pointerEvents: PropTypes.oneOf(['auto', 'box-none', 'box-only', 'none']),
     style: PropTypes.shape(ViewStylePropTypes),
     testID: CoreComponent.propTypes.testID
   }
@@ -53,7 +50,17 @@ class View extends React.Component {
   }
 
   render() {
-    const { accessible, accessibilityLabel, pointerEvents, style, testID, ...other } = this.props
+    const {
+      accessibilityLabel,
+      accessibilityLiveRegion,
+      accessibilityRole,
+      accessible,
+      pointerEvents,
+      style,
+      testID,
+      ...other
+    } = this.props
+
     const pointerEventsStyle = pointerEvents && { pointerEvents }
     const resolvedStyle = pickProps(style, viewStyleKeys)
 
@@ -62,7 +69,9 @@ class View extends React.Component {
         {...other}
         aria-hidden={accessible ? null : true}
         aria-label={accessibilityLabel}
+        aria-live={accessibilityLiveRegion}
         className={'View'}
+        role={accessibilityRole}
         style={{
           ...(styles.initial),
           ...resolvedStyle,

src/components/View/index.spec.js

@@ -11,6 +11,14 @@ suite('View', () => {
     assertProps.accessibilityLabel(View)
   })
 
+  test('prop "accessibilityLiveRegion"', () => {
+    assertProps.accessibilityLiveRegion(View)
+  })
+
+  test('prop "accessibilityRole"', () => {
+    assertProps.accessibilityRole(View)
+  })
+
   test('prop "accessible"', () => {
     assertProps.accessible(View)
   })

src/modules/specHelpers/index.js

@@ -14,6 +14,26 @@ export const assertProps = {
     assert.equal(dom.getAttribute('aria-label'), accessibilityLabel)
   },
 
+  accessibilityLiveRegion: function (Component) {
+    // no live
+    let dom = renderToDOM(<Component />)
+    assert.equal(dom.getAttribute('aria-live'), null)
+    // with live
+    const accessibilityLiveRegion = 'polite'
+    dom = renderToDOM(<Component accessibilityLiveRegion={accessibilityLiveRegion} />)
+    assert.equal(dom.getAttribute('aria-live'), accessibilityLiveRegion)
+  },
+
+  accessibilityRole: function (Component) {
+    // no role
+    let dom = renderToDOM(<Component />)
+    assert.equal(dom.getAttribute('role'), null)
+    // with role
+    const accessibilityRole = 'main'
+    dom = renderToDOM(<Component accessibilityRole={accessibilityRole} />)
+    assert.equal(dom.getAttribute('role'), accessibilityRole)
+  },
+
   accessible: function (Component) {
     // accessible
     let dom = renderToDOM(<Component accessible={true} />)

src/modules/styles/styles.css

@@ -245,6 +245,10 @@
 .color-inherit { color: inherit; }
 .color-transparent { color: transparent; }
 
+/* cursor */
+
+.cursor-pointer { cursor: pointer; }
+
 /* direction */
 
 .direction-inherit { direction: inherit; }