aria for link and pagination

ecomfe · Apr 16, 2018 · 9088f34 · 9088f34
1 parent eef46d4
commit 9088f34
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/packages/veui/src/components/Link.vue b/packages/veui/src/components/Link.vue
@@ -3,18 +3,21 @@
   :class="klass"
   :is="fallback"
   :ui="ui"
+  :aria-disabled="String(disabled)"
   @click="handleRedirect"><slot/></component>
 <router-link v-else-if="$router && !native"
   :class="klass"
   :to="to"
   :ui="ui"
+  :aria-disabled="String(disabled)"
   :replace="replace">
   <slot/>
 </router-link>
 <a v-else
   :class="klass"
   :href="to"
   :ui="ui"
+  :aria-disabled="String(disabled)"
   @click="handleRedirect">
   <slot/>
 </a>

diff --git a/packages/veui/src/components/Pagination.vue b/packages/veui/src/components/Pagination.vue
@@ -1,36 +1,50 @@
 <template>
-<div class="veui-pagination veui-pager" :ui="ui">
+<div
+  class="veui-pagination veui-pager"
+  role="navigation"
+  :aria-label="`选择分页，当前为第 ${page} 页，共 ${pageCount} 页`"
+  :ui="ui">
   <div class="veui-pager-info">
     <div class="veui-pager-total">共 {{ realTotal }} 条</div>
     <div class="veui-pager-size">
       <span>每页条数</span>
       <veui-select v-model="realPageSize"
         :options="realPageSizes"
+        :aria-label="`选择每页显示条数，目前为 ${realPageSize} 条`"
         @change="size => $emit('pagesizechange', size)">
       </veui-select>
     </div>
   </div>
   <div class="veui-pager-switch">
-    <ul class="veui-pager-pages" :class="{['veui-pager-digit-length-' + pageDigitLength]: true}">
-      <li v-for="(item, index) in pageIndicatorSeries" :class="{
-        'veui-active': item.page === page
-      }" :key="index">
-        <veui-link :to="item.href" :native="native"
-            @click="handleRedirect(item.page, $event)">{{ item.text }}</veui-link>
+    <ul class="veui-pager-pages" :class="{[`veui-pager-digit-length-${pageDigitLength}`]: true}">
+      <li
+        v-for="(item, index) in pageIndicatorSeries"
+        :class="{
+          'veui-active': item.page === page
+        }"
+        :key="index">
+        <veui-link
+          :to="item.href"
+          :native="native"
+          :aria-current="item.page === page ? 'page' : null"
+          :aria-label="`第 ${item.page} 页${item.page === page ? '，当前页' : ''}`"
+          @click="handleRedirect(item.page, $event)">{{ item.text }}</veui-link>
       </li>
     </ul>
     <div class="veui-pager-buttons">
       <veui-link class="veui-pager-previous"
         :to="page === 1 ? '' : pageNavHref.previous.href"
         :native="native"
         :disabled="page === 1"
+        aria-label="上一页"
         @click="handleRedirect(pageNavHref.previous.page, $event)">
         <veui-icon :name="icons.prev"/>
       </veui-link>
       <veui-link class="veui-pager-next"
         :to="page === pageCount ? '' : pageNavHref.next.href"
         :native="native"
         :disabled="page === pageCount || pageCount === 0"
+        aria-label="下一页"
         @click="handleRedirect(pageNavHref.next.page, $event)">
         <veui-icon :name="icons.next"/>
       </veui-link>