tangbc · tangbc · Apr 19, 2019 · Apr 17, 2019 · Apr 19, 2019 · Apr 19, 2019
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 in items"
+                    v-bind:key="item.index"
+                    :index="item.index"
+                    :height="size"
+                    :info="item.info"
+                    role="listitem"
+                    :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/index.js b/index.js
@@ -455,7 +455,9 @@
                         'padding-bottom': delta.paddingBottom + 'px'
                     },
                     'class': this.wclass,
-                    'role': 'group'
+                    attrs: {
+                        'role': 'group'
+                    }
                 }, list)
             ])
         }

diff --git a/test/aria.test.js b/test/aria.test.js
@@ -0,0 +1,64 @@
+import VirtualList from '../index'
+import { mount } from '@vue/test-utils'
+import { getIndexList } from './util'
+
+// for testing base build.
+const theme = 'aria-test'
+
+describe(theme, () => {
+    const listCount = 1000
+    const wrapper = mount({
+        template: `
+            <div id="app" style="width: 300px;">
+                <virtual-list class="list"
+                    role="list"
+                    :size="40"
+                    :remain="6"
+                    wclass="group"
+                >
+                    <div class="for-item"
+                        v-for="(item, index) in items"
+                        :key="index"
+                        style="height: 40px; line-height: 40px;"
+                        role="listitem"
+                        :aria-setsize="setSize"
+                        :aria-posinset="index"
+                    >
+                        <span class="for-item-text">{{ item }}</span>
+                    </div>
+                </virtual-list>
+            </div>
+        `,
+
+        name: 'test',
+
+        components: {
+            'virtual-list': VirtualList
+        },
+
+        data () {
+            return {
+                items: getIndexList(listCount),
+                setSize: listCount
+            }
+        }
+    })
+
+    it('check to see if aria role "list" is set on parent', () => {
+        const role = wrapper.find('.list').attributes('role');
+        expect(role).toBe('list')
+    });
+    it('check to see if aria role "group" is set on list container', () => {
+        const groupRole = wrapper.find('.list > .group').attributes('role')
+        expect(groupRole).toBe('group')
+    });
+    it('check to see if aria roles and states are set on list items', () => {
+        const itemFrags = wrapper.findAll('.for-item')
+        const allListItemsTest = itemFrags.wrappers.every((x, i) => {
+           return x.attributes('role') === 'listitem'
+            && x.attributes('aria-setsize') === `${listCount}` 
+            && x.attributes('aria-posinset') === `${i}`
+        })
+        expect(allListItemsTest).toBe(true)
+    });
+})