0.12 feature support accessibility

android/sdk/src/main/java/com/taobao/weex/common/Constants.java

@@ -358,6 +358,8 @@ public interface Name {
     String DELETE_CELL_ANIMATION = "deleteAnimation";
     String AUTO = "auto";
     String NORMAL = "normal";
+    String ARIA_LABEL = "ariaLabel";
+    String ARIA_HIDDEN = "ariaHidden";
   }
 
   public interface Value {

android/sdk/src/main/java/com/taobao/weex/ui/component/WXComponent.java

@@ -127,6 +127,7 @@
  */
 package com.taobao.weex.ui.component;
 
+import android.annotation.TargetApi;
 import android.content.Context;
 import android.content.Intent;
 import android.graphics.Color;
@@ -135,6 +136,7 @@
 import android.graphics.Shader;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
+import android.os.Build;
 import android.os.Message;
 import android.support.annotation.CallSuper;
 import android.support.annotation.CheckResult;
@@ -763,6 +765,14 @@ protected boolean setProperty(String key, Object param) {
         String fixedSize = WXUtils.getString(param, PROP_FS_MATCH_PARENT);
         setFixedSize(fixedSize);
         return true;
+      case Constants.Name.ARIA_LABEL:
+        String label = WXUtils.getString(param,"");
+        setAriaLabel(label);
+        return true;
+      case Constants.Name.ARIA_HIDDEN:
+        boolean isHidden = WXUtils.getBoolean(param,false);
+        setAriaHidden(isHidden);
+        return true;
       case Constants.Name.WIDTH:
       case Constants.Name.MIN_WIDTH:
       case Constants.Name.MAX_WIDTH:
@@ -795,6 +805,21 @@ protected boolean setProperty(String key, Object param) {
     }
   }
 
+  @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
+  protected void setAriaHidden(boolean isHidden) {
+    View host = getHostView();
+    if(host != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
+      host.setImportantForAccessibility(isHidden?View.IMPORTANT_FOR_ACCESSIBILITY_NO:View.IMPORTANT_FOR_ACCESSIBILITY_YES);
+    }
+  }
+
+  protected void setAriaLabel(String label) {
+    View host = getHostView();
+    if(host != null){
+      host.setContentDescription(label);
+    }
+  }
+
   /**
    * Avoid large size view fail in GPU-Animation.
    * @param fixedSize

android/sdk/src/main/java/com/taobao/weex/ui/component/WXText.java

@@ -263,6 +263,14 @@ public void updateExtra(Object extra) {
     }
   }
 
+  @Override
+  protected void setAriaLabel(String label) {
+    WXTextView text = getHostView();
+    if(text != null){
+      text.setAriaLabel(label);
+    }
+  }
+
   @Override
   public void refreshData(WXComponent component) {
     super.refreshData(component);

android/sdk/src/main/java/com/taobao/weex/ui/view/WXTextView.java

@@ -207,6 +207,7 @@
 import android.content.Context;
 import android.graphics.Canvas;
 import android.text.Layout;
+import android.text.TextUtils;
 import android.view.MotionEvent;
 import android.view.View;
 
@@ -225,6 +226,8 @@ public class WXTextView extends View implements WXGestureObservable, IWXTextView
   private WeakReference<WXText> mWeakReference;
   private WXGesture wxGesture;
   private Layout textLayout;
+  private boolean mIsLabelSet = false;
+
   public WXTextView(Context context) {
     super(context);
   }
@@ -266,7 +269,7 @@ public Layout getTextLayout() {
 
   public void setTextLayout(Layout layout) {
     this.textLayout = layout;
-    if(layout!=null){
+    if(layout!=null && !mIsLabelSet){
       setContentDescription(layout.getText());
     }
     if (mWeakReference != null) {
@@ -277,6 +280,19 @@ public void setTextLayout(Layout layout) {
     }
   }
 
+  public void setAriaLabel(String label){
+    if(!TextUtils.isEmpty(label)){
+      mIsLabelSet = true;
+      setContentDescription(label);
+    }else{
+      mIsLabelSet = false;
+      if(textLayout != null){
+        setContentDescription(textLayout.getText());
+      }
+    }
+
+  }
+
   @Override
   public void holdComponent(WXText component) {
     mWeakReference = new WeakReference<>(component);

examples/accessibilitySupport.we

@@ -0,0 +1,76 @@
+<template>
+  <scoller style='top:30;left:30'>
+      <div class='direction'>
+        <text>role:button  text btn </text>
+        <text class='txt' role='button' aria-label='I am a button with text' >text button</text>
+      </div>
+      <div class='direction'>
+        <text>role:button  div btn </text>
+        <div class='txt' role='button' aria-label='I am a button with div' >
+        </div>
+      </div>
+
+      <div class='direction'>
+        <text>role:input </text>
+        <input class='input' aria-label='I am a input' placeholder='please input'></input>
+      </div>
+      <div class='direction'>
+        <text>role:search </text>
+        <input class='input' role='search' aria-label='I am a search item' placeholder='please input something to search'></input>
+      </div>
+
+      <div class='direction'>
+        <text>role:link </text>
+        <a class='a' role='link' href='http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js' aria-label='I am a link'></a>
+      </div>
+
+      <div class='direction'>
+        <text>role:img </text>
+        <image class='img' role='img' src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5f234c7e0d7b020818c437b303b099b6/d4628535e5dde711a1ca272da0efce1b9c1661d4.jpg"
+         aria-label='I am a image,a little dog with brown hair'></image>
+      </div>
+
+      <div class='direction'>
+        <text aria-hidden='true'>hidden from voice-over/talkback </text>
+        <image class='img' aria-hidden='true' role='img' src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5f234c7e0d7b020818c437b303b099b6/d4628535e5dde711a1ca272da0efce1b9c1661d4.jpg" aria-label='I am a image'></image>
+      </div>
+
+   </scroller>
+</template>
+
+<style>
+.direction {
+  flex-direction:row;
+  margin-top:50;
+}
+.txt {
+  border-width:2;
+  border-color:red;
+  border-radius:20;
+  width:200;
+  margin-left:20;
+  padding-left:65;
+  margin-top:-20;
+}
+
+.input {
+  border-width:2;
+  width:300;
+  height:60;
+  margin-top:-10;
+  margin-left:20;
+  border-radius:20;
+}
+.a {
+  border-width:2;
+  width:100;
+  margin-left:20;
+  background-color:green
+}
+.img {
+  width:100;
+  height:100;
+  margin-left:20;
+  margin-top:-20;
+}
+</style>

ios/sdk/WeexSDK/Sources/Component/WXComponent_internal.h

@@ -44,6 +44,13 @@
     WXBoxShadow *_lastBoxShadow;
     WXBoxShadow *_boxShadow;
 
+    /**
+     * accessibility support
+     */
+    UIAccessibilityTraits _role; //accessibility
+    NSString * _ariaLabel; //accessibilityLabel
+    BOOL _ariaHidden; // accessibilityElementsHidden
+
     /**
      *  PseudoClass
      */

ios/sdk/WeexSDK/Sources/Component/WXTextComponent.m

@@ -91,6 +91,11 @@ - (NSString *)description
 
 - (NSString *)accessibilityValue
 {
+    if (self.wx_component) {
+        if (self.wx_component->_ariaLabel) {
+            return self.wx_component->_ariaLabel;
+        }
+    }
     return _textStorage.string;
 }
 

ios/sdk/WeexSDK/Sources/Layout/WXComponent+Layout.m

@@ -205,6 +205,10 @@ - (void)_layoutDidFinish
         [self.ancestorScroller adjustSticky];
     }
 
+    if (0 == [[self.view subviews] count]) {
+        self.view.isAccessibilityElement = YES;
+        self.view.accessibilityFrame = [[self.view superview] convertRect:self.calculatedFrame toView:nil];
+    }
     [self layoutDidFinish];
 }
 

ios/sdk/WeexSDK/Sources/Model/WXComponent.m

@@ -219,6 +219,8 @@ - (UIView *)view
         _view.wx_ref = self.ref;
         _layer.wx_component = self;
 
+        [self _setWXComponentA11yInfo:_attributes];
+
         [self _initEvents:self.events];
         [self _initPseudoEvents:_isListenPseudoTouch];
 
@@ -428,6 +430,7 @@ - (void)_updateAttributesOnMainThread:(NSDictionary *)attributes
     [self _updateNavBarAttributes:attributes];
 
     [self updateAttributes:attributes];
+    [self _setWXComponentA11yInfo:attributes];
 }
 
 - (void)updateStyles:(NSDictionary *)styles
@@ -445,6 +448,23 @@ - (void)readyToRender
 - (void)updateAttributes:(NSDictionary *)attributes
 {
     WXAssertMainThread();
+
+}
+
+- (void)_setWXComponentA11yInfo:(NSDictionary *)attributes
+{
+    if (attributes[@"role"]){
+        _role = [WXConvert WXUIAccessibilityTraits:attributes[@"role"]];
+        self.view.accessibilityTraits = _role;
+    }
+    if (attributes[@"ariaHidden"]) {
+        _ariaHidden = [WXConvert BOOL:attributes[@"ariaHidden"]];
+        self.view.accessibilityElementsHidden = _ariaHidden;
+    }
+    if (attributes[@"ariaLabel"]) {
+        _ariaLabel = [WXConvert NSString:attributes[@"ariaLabel"]];
+        self.view.accessibilityValue = _ariaLabel;
+    }
 }
 
 #pragma mark Reset

ios/sdk/WeexSDK/Sources/Utility/WXConvert.h

@@ -38,6 +38,7 @@ typedef CGFloat WXPixelType;
 + (UIViewContentMode)UIViewContentMode:(id)value;
 + (WXImageQuality)WXImageQuality:(id)value;
 + (WXImageSharp)WXImageSharp:(id)value;
++ (UIAccessibilityTraits)WXUIAccessibilityTraits:(id)value;
 
 + (UIColor *)UIColor:(id)value;
 + (CGColorRef)CGColor:(id)value;

ios/sdk/WeexSDK/Sources/Utility/WXConvert.m

@@ -771,6 +771,28 @@ + (WXBoxShadow *)WXBoxShadow:(id)value scaleFactor:(CGFloat)scaleFactor
     return nil;
 }
 
++ (UIAccessibilityTraits)WXUIAccessibilityTraits:(id)value
+{
+    UIAccessibilityTraits accessibilityTrait = UIAccessibilityTraitNone;
+    if (![value isKindOfClass:[NSString class]]) {
+        return accessibilityTrait;
+    }
+    NSString * role = [value lowercaseString];
+    if ([role isEqualToString:@"button"]) {
+        accessibilityTrait = UIAccessibilityTraitButton;
+    } else if ([role isEqualToString:@"link"]) {
+        accessibilityTrait = UIAccessibilityTraitLink;
+    } else if ([role isEqualToString:@"img"]) {
+        accessibilityTrait = UIAccessibilityTraitImage;
+    } else if ([role isEqualToString:@"search"]) {
+        accessibilityTrait = UIAccessibilityTraitSearchField;
+    } else if ([role isEqualToString:@"tab"]) {
+        accessibilityTrait = UIAccessibilityTraitTabBar;
+    }
+
+    return accessibilityTrait;
+}
+
 @end
 
 @implementation WXConvert (Deprecated)