Update setsize source in test

mash19 · tangbc · commit 2e76c24901a3 · 2019-04-19T16:38:08.000+08:00
Add demo using aria
Working demo for aria
diff --git a/demos/vfor-mode-with-aria/App.vue b/demos/vfor-mode-with-aria/App.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="app">
+    <GithubCorner path="/vfor-mode" />
+    <div class="container">
+        <Header
+            title="vfor-mode with wai-aria"
+            :desciption="'Build ' + items.length.toLocaleString() + ' items.'"
+            :startIndex="start"
+            :onDataChange="onHeaderDataChange"
+        ></Header>
+        <div class="main">
+            <virtual-list class="list"
+                role="list"
+                :size="size"
+                :remain="remain"
+                :start="start"
+            >
+                <item
+                    v-for="(item, index) in items"
+                    v-bind:key="item.index"
+                    :index="item.index"
+                    :height="size"
+                    :info="item.info"
+                    role="list-item"
+                    :aria-posinset="item.index"
+                    :aria-setsize="setSize"
+                />
+            </virtual-list>
+            <p>
+                Added accessibility support. Virtual list given a 
+                <a href="https://www.w3.org/TR/wai-aria-1.1/#list">role of 'list'</a>
+                Each list item is given a role of 'list-item' and its position in the list set with
+                the aria-posinset state. The size of the list is set with aria-setsize.
+                Assitive techonologies should be able to report the size of the list and
+                were in the list is currently displayed.
+                
+             </p>   
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import Item from '../common/Item.vue'
+import VirtualList from 'vue-virtual-scroll-list'
+import { countStorage, getRandomUser } from '../common/util'
+
+const remain = 6
+const itemSize = 80
+const itemCount = countStorage.get()
+
+let itemList = []
+for (let idx = 0; idx < itemCount; idx++) {
+    itemList.push({
+        index: idx,
+        height: itemSize,
+        info: getRandomUser()
+    })
+}
+console.log('array size', itemCount);
+export default {
+    name: 'app',
+
+    components: {
+        'item': Item,
+        'virtual-list': VirtualList
+    },
+
+    data () {
+        return {
+            remain,
+            start: 0,
+            size: itemSize,
+            items: itemList,
+            setSize: itemCount
+        }
+    },
+    methods: {
+        onHeaderDataChange (type, value) {
+            if (type === 'start') {
+                this.start = value
+            }
+        },
+    }
+}
+</script>
+
+<style lang="less">
+@import '../common/app.less';
+</style>
diff --git a/demos/vfor-mode-with-aria/build.js b/demos/vfor-mode-with-aria/build.js
diff --git a/demos/vfor-mode-with-aria/index.html b/demos/vfor-mode-with-aria/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <title>vfor-mode demo of vue-virtual-scroll-list</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="build.js"></script>
+</body>
+</html>
diff --git a/demos/vfor-mode-with-aria/main.js b/demos/vfor-mode-with-aria/main.js
@@ -0,0 +1,4 @@
+import App from './App.vue'
+import createApp from '../common/createApp'
+
+createApp(App)
diff --git a/test/aria.test.js b/test/aria.test.js
@@ -6,7 +6,7 @@ import { getIndexList } from './util'
 const theme = 'aria-test'
 
 describe(theme, () => {
-    const listCount = 1000
+    const listCount = 100
     const wrapper = mount({
         template: `
             <div id="app" style="width: 300px;">
@@ -21,7 +21,7 @@ describe(theme, () => {
                         :key="index"
                         style="height: 40px; line-height: 40px;"
                         role="list-item"
-                        :aria-setsize="listCount"
+                        :aria-setsize="items.length"
                         :aria-posinset="index"
                     >
                         <span class="for-item-text">{{ item }}</span>
@@ -38,8 +38,7 @@ describe(theme, () => {
 
         data () {
             return {
-                items: getIndexList(listCount),
-                listCount
+                items: getIndexList(listCount)
             }
         }
     })
@@ -56,8 +55,8 @@ describe(theme, () => {
         const itemFrags = wrapper.findAll('.for-item')
         const allListItemsTest = itemFrags.wrappers.every((x, i) => {
            return x.attributes('role') === 'list-item'
-            && x.attributes('aria-setsize') === listCount.toString() 
-            && x.attributes('aria-posinset') === i.toString()
+            && x.attributes('aria-setsize') === `${listCount}` 
+            && x.attributes('aria-posinset') === `${i}`
         })
         expect(allListItemsTest).toBe(true)
     });
