fix: add aria-disabled, aris-busy to listbox

soc221b · Jun 6, 2021 · 25d51b4 · 25d51b4
1 parent 63f7631
commit 25d51b4
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 0 deletions.
diff --git a/cypress/integration/behavior/a11y/role/listbox/disabled.html b/cypress/integration/behavior/a11y/role/listbox/disabled.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = null
+          const options = ref(['i', 'love', 'vue'])
+
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          disabled
+        ></vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/behavior/a11y/role/listbox/disabled.spec.js b/cypress/integration/behavior/a11y/role/listbox/disabled.spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('listbox', () => {
+  // https://www.w3.org/TR/wai-aria-1.1/#listbox
+
+  it('should set aria-busy to true when disabled options', () => {
+    cy.visit(path.join(__dirname, 'disabled.html'))
+
+    cy.get('[id="vs1-listbox"]').should('have.attr', 'aria-disabled', 'true')
+  })
+})
diff --git a/cypress/integration/behavior/a11y/role/listbox/loading.html b/cypress/integration/behavior/a11y/role/listbox/loading.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = null
+          const options = ref(['i', 'love', 'vue'])
+
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          loading
+        ></vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/behavior/a11y/role/listbox/loading.spec.js b/cypress/integration/behavior/a11y/role/listbox/loading.spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('listbox', () => {
+  // https://www.w3.org/TR/wai-aria-1.1/#listbox
+
+  it('should set aria-busy to true when loading options', () => {
+    cy.visit(path.join(__dirname, 'loading.html'))
+
+    cy.get('[id="vs1-listbox"]').should('have.attr', 'aria-busy', 'true')
+  })
+})
diff --git a/cypress/integration/behavior/a11y/role/listbox/multiple.html b/cypress/integration/behavior/a11y/role/listbox/multiple.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref([])
+          const options = ref(['i', 'love', 'vue'])
+
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          multiple
+        ></vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/behavior/a11y/role/listbox/mutiple.spec.js b/cypress/integration/behavior/a11y/role/listbox/mutiple.spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('listbox', () => {
+  // https://www.w3.org/TR/wai-aria-1.1/#listbox
+
+  it('should set aria-multiselectable to true when multiple options can be selected', () => {
+    cy.visit(path.join(__dirname, 'multiple.html'))
+
+    cy.get('[id="vs1-listbox"]').should('have.attr', 'aria-multiselectable', 'true')
+  })
+})
diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
@@ -7,6 +7,8 @@
     role="listbox"
     :id="`vs${comboboxUid}-listbox`"
     :aria-multiselectable="dataAttrs['data-multiple']"
+    :aria-busy="dataAttrs['data-loading']"
+    :aria-disabled="dataAttrs['data-disabled']"
   >
     <template v-for="(option, index) of modelValue" :key="option.key">
       <li

diff --git a/src/index.vue b/src/index.vue
@@ -672,6 +672,8 @@ const VueSelect = {
       'data-removable': optionsWithInfo.value.filter(option => option.selected).length > normalized.min,
       'data-total-length': normalized.options.length,
       'data-multiple': props.multiple,
+      'data-loading': props.loading,
+      'data-disabled': props.disabled,
     }))
     provide('dataAttrs', dataAttrs)