fix: a11y fixes

Author: adamberecz

src/Multiselect.vue

@@ -165,7 +165,7 @@
             :class="classList.group"
             :key="key"
 
-            :id="ariaGroupId(group, i)"
+            :id="ariaGroupId(group)"
             :aria-label="ariaGroupLabel(group)"
             :aria-selected="isSelected(group)"
             role="option"

src/composables/useA11y.js

@@ -18,10 +18,6 @@ export default function useScroll (props, context, dep)
 
   // ============== COMPUTED ==============
 
-  const mainRole = computed(() => {
-    return mode.value === 'single' ? 'select' : 'combobox'
-  })
-
   const ariaOwns = computed(() => {
     let texts = []
 
@@ -103,7 +99,7 @@ export default function useScroll (props, context, dep)
     return texts.join('-')
   }
 
-  const ariaGroupId = (option, index) => {
+  const ariaGroupId = (option) => {
     let texts = []
 
     if (id && id.value) {
@@ -112,7 +108,7 @@ export default function useScroll (props, context, dep)
 
     texts.push('multiselect-group')
 
-    texts.push(index)
+    texts.push(option.index)
 
     return texts.join('-')
   }
@@ -148,7 +144,6 @@ export default function useScroll (props, context, dep)
   })
 
   return {
-    mainRole,
     ariaOwns,
     ariaLabel,
     ariaPlaceholder,

src/composables/useKeyboard.js

@@ -67,7 +67,7 @@ export default function useKeyboard (props, context, dep)
     let activeIndex
 
     if (['ArrowLeft', 'ArrowRight', 'Enter'].indexOf(e.key) !== -1 && mode.value === 'tags') {
-      tagList = [...(multiselect.value.querySelectorAll(`[data-tags] > *`)||[])].filter(e => e !== tags.value)
+      tagList = [...(multiselect.value.querySelectorAll(`[data-tags] > *`))].filter(e => e !== tags.value)
       activeIndex = tagList.findIndex(e => e === document.activeElement)
     }
 
@@ -184,16 +184,12 @@ export default function useKeyboard (props, context, dep)
         break
 
       case 'ArrowLeft':
-        if ((searchable.value && tags.value.querySelector('input').selectionStart) || e.shiftKey) {
+        if ((searchable.value && tags.value.querySelector('input').selectionStart) || e.shiftKey || mode.value !== 'tags' || !iv.value?.length) {
           return
         }
 
         e.preventDefault()
 
-        if (mode.value !== 'tags') {
-          return
-        }
-
         if (activeIndex === -1) {
           tagList[tagList.length-1].focus()
         }
@@ -203,12 +199,13 @@ export default function useKeyboard (props, context, dep)
         break
 
       case 'ArrowRight':
-        if (activeIndex === -1 || e.shiftKey) {
+        if (activeIndex === -1 || e.shiftKey || mode.value !== 'tags' || !iv.value?.length) {
           return
         }
 
         e.preventDefault()
 
+        /* istanbul ignore else */
         if (tagList.length > activeIndex + 1) {
           tagList[activeIndex+1].focus()
         }

src/composables/useMultiselect.js

@@ -102,6 +102,7 @@ export default function useMultiselect (props, context, dep)
     tags,
     tabindex,
     isActive,
+    mouseClicked,
     blur,
     focus,
     activate,

src/composables/useOptions.js

@@ -95,11 +95,12 @@ export default function useOptions (props, context, dep)
       return []
     }
 
-    return filterGroups((ro.value || /* istanbul ignore next */ []).map((group) => {
+    return filterGroups((ro.value || /* istanbul ignore next */ []).map((group, index) => {
       const arrayOptions = optionsToArray(group[groupOptions.value])
 
       return {
         ...group,
+        index,
         group: true,
         [groupOptions.value]: filterOptions(arrayOptions, false).map(o => Object.assign({}, o, group[disabledProp.value] ? { [disabledProp.value]: true } : {})),
         __VISIBLE__: filterOptions(arrayOptions).map(o => Object.assign({}, o, group[disabledProp.value] ? { [disabledProp.value]: true } : {})),

src/composables/usePointer.js

@@ -10,7 +10,7 @@ export default function usePointer (props, context, dep)
 
   // =============== METHODS ==============
 
-  const setPointer = (option, groupIndex = null) => {
+  const setPointer = (option) => {
     if (option === undefined || (option !== null && option[disabledProp.value])) {
       return
     }
@@ -19,15 +19,7 @@ export default function usePointer (props, context, dep)
       return
     }
 
-    let p = option ? {
-      ...option
-    } : option
-
-    if (p && p.group) {
-      p.index = groupIndex
-    }
-
-    pointer.value = p
+    pointer.value = option
   }
 
   const clearPointer = () => {

src/composables/usePointerAction.js

@@ -39,33 +39,23 @@ export default function usePointer (props, context, dep)
     return pointer.value && pointer.value.group
   })
 
-  const currentGroupIndex = computed(() => {
-    return getParentGroupIndex(pointer.value)
-  })
-
   const currentGroup = computed(() => {
-    return groups.value[currentGroupIndex.value]
+    return getParentGroup(pointer.value)
   })
 
-  const prevGroupIndex = computed(() => {
-    let group = isPointerGroup.value ? pointer.value : /* istanbul ignore next */ getParentGroup(pointer.value)
-    let groupIndex = groups.value.map(g => g[groupLabel.value]).indexOf(group[groupLabel.value])
-    let prevGroupIndex = groupIndex - 1
-
-    let prevGroup = groups.value[prevGroupIndex]
+  const prevGroup = computed(() => {
+    const group = isPointerGroup.value ? pointer.value : /* istanbul ignore next */ getParentGroup(pointer.value)
+    const groupIndex = groups.value.map(g => g[groupLabel.value]).indexOf(group[groupLabel.value])
+    let prevGroup = groups.value[groupIndex - 1]
 
     if (prevGroup === undefined) {
-      prevGroupIndex = lastGroupIndex.value
+      prevGroup = lastGroup.value
     }
 
-    return prevGroupIndex
-  })
-
-  const prevGroup = computed(() => {
-    return groups.value[prevGroupIndex.value]
+    return prevGroup
   })
 
-  const nextGroupIndex = computed(() => {
+  const nextGroup = computed(() => {
     let nextIndex = groups.value.map(g => g.label).indexOf(isPointerGroup.value
       ? pointer.value[groupLabel.value]
       : getParentGroup(pointer.value)[groupLabel.value]) + 1
@@ -74,19 +64,11 @@ export default function usePointer (props, context, dep)
       nextIndex = 0
     }
 
-    return nextIndex
-  })
-  
-  const nextGroup = computed(() => {
-    return groups.value[nextGroupIndex.value]
-  })
-
-  const lastGroupIndex = computed(() => {
-    return groups.value.length - 1
+    return groups.value[nextIndex]
   })
 
   const lastGroup = computed(() => {
-    return groups.value[lastGroupIndex.value]
+    return [...groups.value].slice(-1)[0]
   })
 
   const currentGroupFirstEnabledOption = computed(() => {
@@ -115,8 +97,8 @@ export default function usePointer (props, context, dep)
 
   const isPointed = (option) => {
     return (!!pointer.value && (
-      (!option.group && pointer.value[valueProp.value] == option[valueProp.value]) ||
-      (option.group !== undefined && pointer.value[groupLabel.value] == option[groupLabel.value])
+      (!option.group && pointer.value[valueProp.value] == option[valueProp.value]) ||
+      (option.group !== undefined && pointer.value[groupLabel.value] == option[groupLabel.value])
     )) ? true : undefined
   }
 
@@ -138,18 +120,16 @@ export default function usePointer (props, context, dep)
 
   const forwardPointer = () => {
     if (pointer.value === null) {
-      setPointer((groupped.value && canPointGroups.value ? groups.value[0] : options.value[0]) || null, 0)
+      setPointer((groupped.value && canPointGroups.value ? groups.value[0] : options.value[0]) || null)
     }
     else if (groupped.value && canPointGroups.value) {
       let nextPointer = isPointerGroup.value ? currentGroupFirstEnabledOption.value : currentGroupNextEnabledOption.value
-      let nGroupIndex = null
 
       if (nextPointer === undefined) {
         nextPointer = nextGroup.value
-        nGroupIndex = nextGroupIndex.value
       }
 
-      setPointer(nextPointer || /* istanbul ignore next */ null, nGroupIndex)
+      setPointer(nextPointer || /* istanbul ignore next */ null)
     } else {
       let next = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1
 
@@ -168,29 +148,25 @@ export default function usePointer (props, context, dep)
   const backwardPointer = () => {
     if (pointer.value === null) {
       let prevPointer = options.value[options.value.length - 1]
-      let pGroupIndex = null
 
       if (groupped.value && canPointGroups.value) {
         prevPointer = lastGroupLastEnabledOption.value
 
         if (prevPointer === undefined) {
-          prevPointer = groups.value[lastGroupIndex.value]
-          pGroupIndex = lastGroupIndex.value
+          prevPointer = lastGroup.value
         }
       }
 
-      setPointer(prevPointer  || null, pGroupIndex)
+      setPointer(prevPointer  || null)
     }
     else if (groupped.value && canPointGroups.value) {
       let prevPointer = isPointerGroup.value ? prevGroupLastEnabledOption.value : currentGroupPrevEnabledOption.value
-      let pGroupIndex = null
 
       if (prevPointer === undefined) {
         prevPointer = isPointerGroup.value ? prevGroup.value : currentGroup.value
-        pGroupIndex = isPointerGroup.value ? prevGroupIndex.value : currentGroupIndex.value
       }
 
-      setPointer(prevPointer || /* istanbul ignore next */ null, pGroupIndex)
+      setPointer(prevPointer || /* istanbul ignore next */ null)
     } else {
       let prevIndex = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1
 
@@ -212,12 +188,6 @@ export default function usePointer (props, context, dep)
     })
   }
 
-  const getParentGroupIndex = (option) => {
-    return groups.value.findIndex((group) => {
-      return group.__VISIBLE__.map(o => o[valueProp.value]).indexOf(option[valueProp.value]) !== -1
-    })
-  }
-
   // no export
   /* istanbul ignore next */
   const adjustWrapperScrollToPointer = () => {