<template>
  <scoller style='padding:30'>
      <div class='direction'>
        <text>role:button  text btn </text>
        <text class='box' 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='box' role='button' aria-label='I am a button with div' >
        </div>
      </div>

      <div class='direction'>
        <text>role:input </text>
        <input class='box' aria-label='I am a input' placeholder='please input'></input>
      </div>
      <div class='direction'>
        <text>role:search </text>
        <input class='box' 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='box' 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='box' 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='box' 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>
.box {
  border-width:2;
  border-color:red;
  width:200;
  height:50;
  margin-left:20;
}
.direction {
  flex-direction:row;
  padding:20;
  margin:10;
  border-bottom-width:2;
  border-color:black;
}

</style>