@policystudio/policy-studio-ui-vue 1.2.0-access.64 → 1.2.0-access.65

package/package.json

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

package/src/components/controls/PsDraggable.vue

@@ -17,6 +17,11 @@
             class="psui-el-draggable-wrapper-title"
             :class="{ 'psui-opacity-50 psui-pointer-events-none': columnGroup.disabled }"
             draggable="true"
+            tabindex="0"
+            role="button"
+            :aria-label="`Group: ${columnGroup.title}. Use Up/Down arrows to reorder this group.`"
+            @keydown.up.prevent="moveGroup(indexColumnGroup, -1)"
+            @keydown.down.prevent="moveGroup(indexColumnGroup, 1)"
             @dragstart="emit('drag-start-group', indexColumnGroup)"
             @dragend="emit('drag-end-group', indexColumnGroup)"
             @dragover="emit('drag-over-group', indexColumnGroup)"
@@ -45,6 +50,11 @@
               :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
               class="psui-el-draggable-item"
               draggable="true"
+              tabindex="0"
+              role="listitem"
+              :aria-label="`Column: ${column.title}. Use Up/Down arrows to reorder within the group.`"
+              @keydown.up.prevent="moveItem(indexColumnGroup, indexColumn, -1)"
+              @keydown.down.prevent="moveItem(indexColumnGroup, indexColumn, 1)"
               @dragstart="emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
               @dragover="emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
               @dragend="emit('drag-end-item', $event)"
@@ -87,6 +97,7 @@
 </template>
 
 <script setup>
+import { nextTick } from 'vue'
 
 const emit = defineEmits([
   'drag-start-group',
@@ -98,9 +109,11 @@ const emit = defineEmits([
   'column-helper',
   'on-select-item',
   'column-group-helper',
+  'reorder-group',
+  'reorder-item', 
 ])
 
-defineProps({
+const props = defineProps({
   /**
    * It sets the data that will be used.
    */
@@ -124,4 +137,32 @@ defineProps({
     default: false,
   },
 })
+
+const moveGroup = (index, direction) => {
+  const targetIndex = index + direction
+  const groups = props.getColumns.columnGroups
+
+  if (targetIndex >= 0 && targetIndex < groups.length) {
+    emit('reorder-group', { from: index, to: targetIndex })
+    
+    nextTick(() => {
+      const el = document.querySelector(`#edit-group-${targetIndex} .psui-el-draggable-wrapper-title`)
+      el?.focus()
+    })
+  }
+}
+
+const moveItem = (groupIndex, itemIndex, direction) => {
+  const columns = props.getColumns.columnGroups[groupIndex].columns
+  const targetIndex = itemIndex + direction
+
+  if (targetIndex >= 0 && targetIndex < columns.length) {
+    emit('reorder-item', { groupIndex, from: itemIndex, to: targetIndex })
+
+    nextTick(() => {
+      const el = document.getElementById(`edit-columns-column-${groupIndex}-${targetIndex}`)
+      el?.focus()
+    })
+  }
+}
 </script>