shortcuts added and validated

Author: Dileepadari

administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue

@@ -2,7 +2,8 @@
   <Panel position="top-left" aria-label="Workflow actions" class="d-flex gap-2 p-2">
     <button
       @click="$emit('add-stage')"
-      class="btn btn-primary d-flex align-items-center gap-1"
+      class="toolbar-button btn btn-primary d-flex align-items-center gap-1"
+      tabindex="0"
       :aria-label="translate('COM_WORKFLOW_GRAPH_ADD_STAGE')"
     >
       <span class="icon icon-plus" aria-hidden="true"></span>
@@ -11,7 +12,8 @@
 
     <button
       @click="$emit('add-transition')"
-      class="btn btn-info d-flex align-items-center gap-1"
+      class="toolbar-button btn btn-info d-flex align-items-center gap-1"
+      tabindex="0"
       :aria-label="translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION')"
     >
       <span class="icon icon-plus" aria-hidden="true"></span>
@@ -20,7 +22,8 @@
 
     <button
       @click="$emit('toggle-transition-mode')"
-      :class="['btn', isTransitionMode ? 'btn-success' : 'btn-primary', 'd-flex', 'align-items-center', 'gap-1']"
+      :class="['btn toolbar-button', isTransitionMode ? 'btn-success' : 'btn-primary', 'd-flex', 'align-items-center', 'gap-1']"
+      tabindex="0"
       :aria-pressed="isTransitionMode"
       :aria-label="isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE')"
     >

administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="custom-controls" tabindex="0" ref="controlsContainer">
     <button
-      class="custom-controls-button"
+      class="toolbar-button custom-controls-button"
+      tabindex="0"
       @click="zoomIn"
       aria-label="Zoom in"
       title="Zoom in (+ key)"
     >
       <i class="icon icon-plus"></i>
     </button>
     <button
-      class="custom-controls-button"
+      class="toolbar-button custom-controls-button"
+      tabindex="0"
       @click="zoomOut"
       aria-label="Zoom out"
       title="Zoom out (- key)"
     >
       <i class="icon icon-minus"></i>
     </button>
     <button
-      class="custom-controls-button"
+      class="toolbar-button custom-controls-button"
+      tabindex="0"
       @click="fitView"
       aria-label="Fit view"
       title="Fit view (F key)"

administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue

@@ -59,11 +59,11 @@ import stageNode from '../nodes/StageNode.vue';
 import customEdge from '../edges/CustomEdge.vue';
 import CustomControls from './CustomControls.vue';
 import ControlsPanel from './ControlsPanel.vue';
-import { announce, setupDialogFocusHandlers } from '../utils/focus-utils.js';
-import { generatePositionedNodes, createSpecialNode } from '../utils/positioning.js';
-import { generateStyledEdges } from '../utils/edges.js';
-import { setupGlobalShortcuts } from '../utils/KeyboardManager.js';
-import { debounce } from '../utils/utils.es6'
+import { announce, setupDialogFocusHandlers } from '../../utils/focus-utils.js';
+import { generatePositionedNodes, createSpecialNode } from '../../utils/positioning.js';
+import { generateStyledEdges } from '../../utils/edges.js';
+import { setupGlobalShortcuts } from '../../utils/KeyboardManager.js';
+import { debounce } from '../../utils/utils.es6'
 
 export default {
   name: 'WorkflowCanvas',
@@ -95,6 +95,7 @@ export default {
     const selectedTransition = ref(null);
     const liveRegion = ref(null);
     const saveStatus = ref('upToDate');
+    const currentFocusMode = ref('stages');
     const previouslyFocusedElement = ref(null);
 
     const stages = computed(() => store.getters.stages || []);
@@ -126,6 +127,7 @@ export default {
       ...edge,
       data: {
         ...edge.data,
+        onSelect: () => selectEdge(edge.id),
         onDelete: () => showDeleteModal('transition', edge.id),
         onEdit: () => editTransition(edge.id)
       }
@@ -189,7 +191,7 @@ export default {
       selectedTransition.value = null;
     }
     function handleConnect() { if (isTransitionMode.value) openModal('transition'); }
-    function selectEdge({ edge }) { selectTransition(edge.id); }
+    function selectEdge(id) { selectTransition(id); }
     function updateSaveMessage() {
       const el = document.getElementById('save-message');
       if (!el) return;
@@ -271,6 +273,7 @@ export default {
           selectedStage,
           selectedTransition,
           isTransitionMode,
+          currentFocusMode,
           liveRegion: liveRegion.value
         },
         setSaveStatus: (val) => saveStatus.value = val,

administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue

@@ -94,10 +94,14 @@ export default {
   methods: {
     onEdgeKeydown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
-        this.data.onEdit?.();
+        this.data.onSelect();
         e.preventDefault();
       }
-      if (e.key === 'Delete' || e.key === 'Backspace') {
+      if ((e.key === 'e' || e.key === 'E') && this.data?.isTransitionMode) {
+        this.data.onEdit();
+        e.preventDefault();
+      }
+      if ((e.key === 'Delete' || e.key === 'Backspace') && this.data?.isTransitionMode) {
         this.data.onDelete?.();
         e.preventDefault();
       }

administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue

@@ -76,7 +76,7 @@
 
 <script>
 import { Handle, Position } from '@vue-flow/core';
-import {focusNode} from "../utils/focus-utils";
+import {focusNode} from "../../utils/focus-utils";
 
 export default {
   name: 'StageNode',

administrator/components/com_workflow/resources/scripts/utils/KeyboardManager.js

@@ -1,4 +1,4 @@
-import { announce, cycleFocus } from './focus-utils';
+import { announce, cycleFocus, cycleMode } from './focus-utils';
 
 /**
  * Attach global keyboard listeners for workflow canvas.
@@ -10,9 +10,11 @@ import { announce, cycleFocus } from './focus-utils';
  * @param {Function} toggleMode
  * @param {Function} undo
  * @param {Function} redo
+ *
  * @param {Function} clearSelection
  * @param {Function} zoomIn
  * @param {Function} zoomOut
+ *
  * @param {Object} state - { selectedStage, selectedTransition, isTransitionMode, liveRegion }
  */
 export function setupGlobalShortcuts({ addStage, addTransition, editItem, deleteItem,
@@ -94,21 +96,35 @@ export function setupGlobalShortcuts({ addStage, addTransition, editItem, delete
 
       case e.key === 'Tab':
         e.preventDefault();
-        cycleFocus('.stage-node[tabindex="0"], .edge-label[tabindex="0"]', e.shiftKey);
+        cycleMode(['stages', 'transitions', 'toolbar', 'actions', 'links', 'buttons'], state.currentFocusMode, state.liveRegion);
         break;
 
       case ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key):
+        e.preventDefault();
         if (state.selectedStage.value) {
-          e.preventDefault();
           moveNode(state.selectedStage.value.toString(), e.key, e.shiftKey);
-        }else{
+        }else if(e.shiftKey){
           const panStep = 20;
           switch (e.key) {
             case 'ArrowUp': viewport.value.y += panStep; break;
             case 'ArrowDown': viewport.value.y -= panStep; break;
             case 'ArrowLeft': viewport.value.x += panStep; break;
             case 'ArrowRight': viewport.value.x -= panStep; break;
           }
+        }else{
+          const reverse = ['ArrowLeft', 'ArrowUp'].includes(e.key);
+          const groupSelectors = {
+            stages: '.stage-node[tabindex="0"]',
+            transitions: '.edge-label[tabindex="0"]',
+            toolbar: '.toolbar-button[tabindex="0"]',
+            actions: '.action-button[tabindex="0"]',
+            links: 'a[href][tabindex="0"], a[href]:not([tabindex="-1"])',
+            buttons: 'button[tabindex="0"], button:not([tabindex="-1"])'
+          };
+          const selector = groupSelectors[state.currentFocusMode.value];
+          if (selector) {
+            cycleFocus(selector, reverse);
+          }          break;
         }
         break;
     }

administrator/components/com_workflow/resources/scripts/utils/edges.js

@@ -1,4 +1,4 @@
-import { getEdgeColor} from "./utils.es6";
+import { getEdgeColor} from "./utils.es6.js";
 
 /**
  * Generate styled edges based on transition data.

administrator/components/com_workflow/resources/scripts/utils/focus-utils.js

@@ -47,6 +47,20 @@ export function cycleFocus(selector, reverse = false) {
   elements[nextIndex].focus();
 }
 
+/**
+ * Cycle between defined focus modes (e.g., stages → transitions → toolbar → actions).
+ * @param {string[]} focusModes - Array of focus mode strings.
+ * @param {Ref<string>} currentModeRef - Vue ref holding the current mode.
+ * @param {HTMLElement} liveRegionElement - ARIA live region for screen reader feedback.
+ */
+export function cycleMode(focusModes, currentModeRef, liveRegionElement) {
+  const currentIndex = focusModes.indexOf(currentModeRef.value);
+  const nextIndex = (currentIndex + 1) % focusModes.length;
+  currentModeRef.value = focusModes[nextIndex];
+  announce(liveRegionElement, `Focus mode: ${focusModes[nextIndex]}`);
+}
+
+
 /**
  *
  *

administrator/components/com_workflow/resources/scripts/utils/positioning.js

@@ -1,4 +1,4 @@
-import { getColorForStage } from "./utils.es6"
+import { getColorForStage } from "./utils.es6.js"
 
 /**
  * Calculate and return positioned stage nodes in a grid layout.

administrator/components/com_workflow/src/View/Graph/HtmlView.php

@@ -163,20 +163,20 @@ protected function addToolbar()
         if ($itemEditable){
             $toolbar->customButton('undo')
                 ->html('<joomla-toolbar-button><button onclick="WorkflowGraph.Event.fire(\'onClickUndoWorkflow\')" '
-            . 'class="btn btn-info"><span class="icon-undo-2 icon-fw" aria-hidden="true"></span>'
+            . 'class="btn btn-info action-button" tabindex="0"><span class="icon-undo-2 icon-fw" aria-hidden="true"></span>'
             . Text::_('COM_WORKFLOW_UNDO') . '</button></joomla-toolbar-button>');
 
             $toolbar->customButton('redo')
                 ->html('<joomla-toolbar-button><button onclick="WorkflowGraph.Event.fire(\'onClickRedoWorkflow\')" '
-                    . 'class="btn btn-info"><span class="icon-redo icon-fw" aria-hidden="true"></span>'
+                    . 'class="btn btn-info action-button" tabindex="0"><span class="icon-redo icon-fw" aria-hidden="true"></span>'
                     . Text::_('COM_WORKFLOW_REDO') . '</button></joomla-toolbar-button>');
 
 
 
             $toolbar->help('Workflow');
             $toolbar->customButton('Shortcuts')
-                ->html('<joomla-toolbar-button><button class="btn btn-info" data-joomla-dialog="'
-                    . htmlspecialchars($shortcutsPopupOptions, ENT_QUOTES, 'UTF-8') . '"'
+                ->html('<joomla-toolbar-button><button class="btn btn-info action-button" data-joomla-dialog="'
+                    . htmlspecialchars($shortcutsPopupOptions, ENT_QUOTES, 'UTF-8') . '" tabindex="0"'
                     . 'title="' . Text::_('COM_WORKFLOW_GRAPH_SHORTCUTS') . '"><span class="fa fa-keyboard" aria-hidden="true"></span>'
                     . Text::_('COM_WORKFLOW_GRAPH_SHORTCUTS') . '</button></joomla-toolbar-button>');
         }