@policystudio/policy-studio-ui-vue 1.2.0-access.53 → 1.2.0-access.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.53",
+  "version": "1.2.0-access.55",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/components/collapse/PsCollapse.vue

@@ -3,11 +3,12 @@
     class="psui-el-collapse"
     :class="{ 'status-opened': isOpen, 'disabled': disabled }"
     :data-filled="hasContent"
-    tabindex="0"
   >
     <div
       class="psui-el-collapse-item-header"
       @click="toggle"
+      @keydown.enter="toggle"
+      tabindex="0"
     >
       <i
         class="psui-el-collapse-item-icon "
@@ -108,6 +109,7 @@ const isOpen = computed(() => {
 })
 
 const toggle = () => {
+  console.log('toggle')
   if (localOpened.value === null) {
     localOpened.value = !props.opened
   } else {

package/src/components/forms/PsDropdown.vue

@@ -2,7 +2,8 @@
   <div class="psui-el-dropdown-menu">
     <div
       ref="PSDropdownTrigger"
-      @click="toggle"
+      @click.stop="toggle"
+      @keydown.enter.stop="toggle"
     >
       <slot
         v-if="hasDropdownTrigger"

package/src/components/forms/PsDropdownList.vue

@@ -2,6 +2,7 @@
   <ul
     class="psui-el-dropdown-menu-list"
     :class="`layout-${layout}`"
+    role="none"
   >
     <li
       v-for="(item, index) in getItems"
@@ -9,9 +10,12 @@
       :id="`${index}-${getKeyValue(item)}`"
       :class="{ 'is-selected psui-bg-blue-10 psui-text-blue-60 hover:psui-bg-blue-10 hover:psui-text-blue-60': getSelected === getKeyValue(item) }"
       class="psui-el-dropdown-menu-list-item"
+      role="menuitem"
+      tabindex="0"
       @mouseover="isHovering = index"
       @mouseout="isHovering = false"
       @click="selectItem(item)"
+      @keydown.enter="selectItem(item)"
     >
       <div class="psui-el-dropdown-menu-list-item-left-label">
         {{ getLeftLabel(item) }}

package/src/components/table-results/PsTableResults.vue

@@ -4,8 +4,6 @@
     class="psui-el-table-results-wrapper"
     :class="`table-${layout}`"
     :style="{ maxHeight: tableMaxHeight }"
-    tabindex="0"
-    role="region"
     aria-label="Table results"
   >
     <table
@@ -55,6 +53,7 @@
                   size="18"
                   display="flex"
                   @click.native="emit('removeOrAddButtonChange', item, $event)"
+                  @keydown.enter.native="emit('removeOrAddButtonChange', item, $event)"
                 />
               </div>
               <div
@@ -74,6 +73,7 @@
                     { 'psui-pointer-events-none psui--rotate-90': item.items.length == 0 },
                   ]"
                   @click.native="onCollapse(item, $event)"
+                  @keydown.enter.native="onCollapse(item, $event)"
                 />
 
                 <div v-if="item.is_appended">
@@ -249,6 +249,7 @@
                       icon-classes="psui-text-blue-60 psui-leading-none psui-transition"
                       display="flex"
                       @click.native="onSelectRow(item, column, $event)"
+                      @keydown.enter.native="onSelectRow(item, column, $event)"
                     />
                   </template>
                   <template #content>
@@ -310,6 +311,7 @@
                       size="small"
                       :label="column.title ? `${column.title} Switch Button` : null"
                       @change="emit('switchButtonItemChanged', item, $event)"
+                      @keydown.enter.native="emit('switchButtonItemChanged', item, $event)"
                     />
                   </div>
                 </div>

package/src/components/ui/PsIcon.vue

@@ -4,6 +4,7 @@
     :style="{ display: display }"
     tabindex="0"
     @click="emit('click', $event)"
+    @keydown="emit('keydown',$event)"
   >
     <span
       v-if="getIconType === 'material-icons'"
@@ -124,7 +125,7 @@ const props = defineProps({
 const finishedImageLoad = ref(false)
 const imageLoadError = ref(false)
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click','keydown'])
 
 const getIconType = computed(() => {
   if (props.type) return props.type