fix(*): fixable eslint-plugin-vuejs-accessibility issues [KHCP-11024] (…

…#2345) * chore(deps): add eslint-plugin-vuejs-accessibility [KHCP-11024] * fix(*): fixable eslint-plugin-vuejs-accessibility issues [KHCP-11024] * chore(eslint): remove eslint-plugin-vuejs-accessibility [KHCP-11024] * chore: update lockfile * fix(kcollapse): button type attribute [KHCP-11024] * fix(kmultiselect): remove listitem role [KHCP-11024] * fix(kselectitem, kmultiselectitem): role attributes [KHCP-11024]
Kong · Aug 21, 2024 · 059f37e · 059f37e
1 parent 655cbea
commit 059f37e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git a/src/components/KCollapse/KCollapse.vue b/src/components/KCollapse/KCollapse.vue
@@ -26,7 +26,7 @@
             :aria-label="triggerLabel ? undefined : 'Toggle content'"
             class="collapse-trigger-content"
             data-testid="collapse-trigger-content"
-            role="button"
+            type="button"
             @click.prevent.stop="toggleDisplay()"
           >
             <slot name="trigger-content">

diff --git a/src/components/KMultiselect/KMultiselectItem.vue b/src/components/KMultiselect/KMultiselectItem.vue
@@ -1,14 +1,12 @@
 <template>
   <div
     :key="item.key"
+    :aria-selected="item.selected"
     class="multiselect-item"
     :data-testid="`multiselect-item-${item.value}`"
-    role="listitem"
+    role="option"
   >
-    <div
-      class="multiselect-item-container"
-      role="option"
-    >
+    <div class="multiselect-item-container">
       <button
         :class="{ selected: item.selected }"
         :disabled="item.disabled === true ? true : undefined"

diff --git a/src/components/KSelect/KSelect.cy.ts b/src/components/KSelect/KSelect.cy.ts
@@ -501,7 +501,7 @@ describe('KSelect', () => {
     })
 
     cy.get('.select-input input').click()
-    cy.getTestId(`select-item-${vals[0]}`).eq(0).click({ force: true }).then(() => {
+    cy.getTestId(`select-item-${vals[0]}`).click().then(() => {
       cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'selected')
       cy.wrap(Cypress.vueWrapper.emitted().selected).should('have.length', 1)
 

diff --git a/src/components/KSelect/KSelectItem.vue b/src/components/KSelect/KSelectItem.vue
@@ -1,19 +1,18 @@
 <template>
   <div
     :key="item.key"
+    :aria-selected="item.selected"
     class="select-item"
     :data-testid="`select-item-${item.value}`"
-    @click="handleClick"
+    role="option"
   >
-    <div
-      class="select-item-container"
-      role="option"
-    >
+    <div class="select-item-container">
       <button
         :class="{ selected: item.selected }"
         :disabled="item.disabled === true ? true : undefined"
         type="button"
         :value="item.value"
+        @click="handleClick"
       >
         <span class="select-item-label">
           <slot name="content">{{ item.label }}</slot>