From 16e1dc16f2020196e274e4c8756cdb6c215d4b53 Mon Sep 17 00:00:00 2001
From: Dileepadari <adaridileep@gmail.com>
Date: Tue, 29 Jul 2025 20:38:28 +0530
Subject: [PATCH 1/5] transitions dropdown added without keyboard support

---
 .../resources/scripts/components/Titlebar.vue |   3 +-
 .../components/canvas/WorkflowCanvas.vue      |   2 +-
 .../scripts/components/edges/CustomEdge.vue   | 352 ++++++++++++++----
 3 files changed, 276 insertions(+), 81 deletions(-)

diff --git a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
index 66175209893..3884e693574 100644
--- a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
@@ -52,9 +52,8 @@
       id="save-message"
       :class="{
         'text-warning': saveStatus.value === 'unsaved',
-        'text-muted': saveStatus.value !== 'unsaved'
       }"
-      class="mb-2 text-primary fw-bold"
+      class="mb-2 fw-bold"
     >
       {{
         saveStatus.value === 'unsaved'
diff --git a/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue b/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
index 4660f35ac1e..6f9a26d35ce 100644
--- a/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
@@ -4,7 +4,6 @@
     ref="canvasRegion"
     class="w-100 h-100 position-relative"
     role="region"
-    :aria-label="translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION')"
   >
     <VueFlow
       v-if="!loading && !error"
@@ -343,6 +342,7 @@ export default {
           ...n.data,
           isSelected: selectedStage.value === parseInt(n.id, 10),
           onSelect: () => selectStage(n.id),
+          onEscape: () => clearSelection(),
           onEdit: () => editStage(n.id),
           onDelete: () => showDeleteModal('stage', n.id),
         },
diff --git a/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue b/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
index 11e3c0a4346..6dd7f06bfca 100644
--- a/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
@@ -11,10 +11,11 @@
     />
 
     <foreignObject
-      :x="labelX - 100"
-      :y="labelY - 35"
-      width="200"
-      height="70"
+      ref="edgeLabel"
+      :x="labelX - (maxWidth / 2)"
+      :y="labelY - (maxHeight / 5)"
+      :width="maxWidth"
+      :height="maxHeight"
       class="edge-label"
       tabindex="0"
       :data-edge-id="data?.id"
@@ -22,47 +23,88 @@
       @focus="onEdgeFocus"
       @blur="onEdgeBlur"
     >
-      <div class="d-flex flex-column border text-bg-primary">
+      <div class="d-flex flex-column border text-bg-primary p-1 rounded shadow-sm" style="min-width: 0;">
+        <div class="d-flex align-items-center justify-content-between px-1 position-relative">
+          <span
+            class="text-white fw-semibold text-truncate pe-4"
+            :title="data?.title"
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+          >
+            {{ data?.title }}
+          </span>
+
+          <button
+            ref="menuButton"
+            type="button"
+            class="btn btn-sm btn-light px-1 py-0 position-absolute"
+            style="right: 0.25rem;"
+            :aria-label="translate('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION')"
+            :title="translate('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION')"
+            :aria-expanded="showActions"
+            aria-haspopup="true"
+            @click.stop="toggleActions"
+            @keydown="onMenuButtonKeydown"
+            @blur="onBlur"
+          >
+            <i class="icon icon-ellipsis-h" aria-hidden="true"></i>
+          </button>
+        </div>
+
         <div
-          v-if="data?.isTransitionMode"
-          class="d-flex justify-content-end mb-1 me-1 mt-1"
+          v-if="showActions"
+          ref="actionsMenu"
+          class="workflow-browser-actions-list mt-1 d-flex flex-column"
+          role="menu"
+          aria-orientation="vertical"
+          :aria-label="sprintf('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION', data?.title)"
+          @keydown="onMenuKeydown"
         >
           <button
             v-if="data?.permissions?.edit"
-            class="btn btn-md btn-secondary py-0 px-1 me-1"
+            ref="editButton"
+            type="button"
+            class="btn btn-sm btn-secondary text-start text-white fw-semibold text-truncate"
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+            role="menuitem"
+            tabindex="-1"
             :aria-label="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
             :title="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
-            @click.stop="data?.onEdit?.()"
+            @click.stop="handleEdit"
+            @blur="onBlur"
           >
-            <i
-              class="icon icon-edit"
-              aria-hidden="true"
-            />
+            <i class="icon icon-pencil-alt" aria-hidden="true"></i>
+            {{ translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION') }}
           </button>
           <button
             v-if="data?.permissions?.delete"
-            class="btn btn-md btn-danger py-0 px-1"
+            ref="deleteButton"
+            type="button"
+            class="btn btn-sm btn-danger text-start mt-1 text-white fw-semibold text-truncate"
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+            role="menuitem"
+            tabindex="-1"
             :aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE')"
             :title="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE')"
-            @click.stop="data?.onDelete?.()"
+            @click.stop="handleDelete"
+            @blur="onBlur"
           >
-            <i
-              class="icon icon-trash"
-              aria-hidden="true"
-            />
+            <i class="icon icon-trash" aria-hidden="true"></i>
+            {{ translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE') }}
           </button>
         </div>
-        <div class="d-flex align-items-center rounded shadow-sm px-2 py-1 gap-1 flex-grow-1">
-          <span
-            class="h3 d-block text-truncate text-center text-white flex-grow-1 fw-semibold"
-            :style="{ maxWidth: '100%' }"
-            :title="data?.title"
-          >
-            {{ data?.title }}
-          </span>
-        </div>
       </div>
     </foreignObject>
+
+    <!-- Hidden text measurer -->
+    <foreignObject x="-9999" y="-9999" width="0" height="0" style="visibility: hidden; position: absolute;">
+      <span
+        ref="textMeasurer"
+        class="fw-semibold"
+        style="white-space: nowrap; font-size: 1rem; font-family: inherit;"
+      >
+        {{ data?.title }}
+      </span>
+    </foreignObject>
   </g>
 </template>
 
@@ -72,58 +114,37 @@ import { getSmoothStepPath } from '@vue-flow/core';
 export default {
   name: 'CustomEdge',
   props: {
-    id: {
-      type: String,
-      default: '',
-    },
-    sourceX: {
-      type: Number,
-      default: 0,
-    },
-    sourceY: {
-      type: Number,
-      default: 0,
-    },
-    targetX: {
-      type: Number,
-      default: 0,
-    },
-    targetY: {
-      type: Number,
-      default: 0,
-    },
-    sourcePosition: {
-      type: String,
-      default: '',
-    },
-    targetPosition: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: Object,
-      default: () => ({}),
-    },
-    markerEnd: {
-      type: Object,
-      default: () => ({}),
-    },
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+    id: String,
+    sourceX: Number,
+    sourceY: Number,
+    targetX: Number,
+    targetY: Number,
+    sourcePosition: String,
+    targetPosition: String,
+    style: Object,
+    markerEnd: Object,
+    data: Object,
+  },
+  data() {
+    return {
+      showActions: false,
+      maxHeight: 100,
+      maxWidth: 100,
+      currentMenuIndex: -1,
+      blurTimeout: null,
+    };
   },
   computed: {
     edgeData() {
       return getSmoothStepPath({
         sourceX: this.sourceX,
         sourceY: this.sourceY,
-        sourcePosition: this.sourcePosition,
         targetX: this.targetX,
         targetY: this.targetY,
+        sourcePosition: this.sourcePosition,
+        targetPosition: this.targetPosition,
         centerX: (this.sourceX + this.targetX) / 2,
         centerY: (this.sourceY + this.targetY) / 2,
-        targetPosition: this.targetPosition,
         borderRadius: 10,
         offset: 10,
       });
@@ -132,29 +153,204 @@ export default {
       return this.edgeData[0];
     },
     labelX() {
-      return this.edgeData[1] + ((this.data?.offsetIndex < 0 ? this.data?.offsetIndex : 0) || 0) * 100;
+      return this.edgeData[1] + ((this.data?.offsetIndex < 0 ? this.data?.offsetIndex : 0) || 0) * (this.maxWidth);
     },
     labelY() {
       return this.edgeData[2] + ((this.data?.offsetIndex > 0 ? this.data?.offsetIndex : 0) || 0) * 75;
     },
+    menuItems() {
+      const items = [];
+      if (this.data?.permissions?.edit && this.$refs.editButton) {
+        items.push(this.$refs.editButton);
+      }
+      if (this.data?.permissions?.delete && this.$refs.deleteButton) {
+        items.push(this.$refs.deleteButton);
+      }
+      return items;
+    },
+  },
+  watch: {
+    'data.title': {
+      handler: 'updateLabelWidth',
+      immediate: true,
+    },
+    // Only reset index when menu closes, don't focus into menu on open
+    showActions(newVal) {
+      if (!newVal) {
+        this.currentMenuIndex = -1;
+      }
+    },
+  },
+  mounted() {
+    this.updateLabelWidth();
+  },
+  beforeUnmount() {
+    if (this.blurTimeout) {
+      clearTimeout(this.blurTimeout);
+    }
   },
   methods: {
+    // Action handlers
+    toggleActions() {
+      this.showActions = !this.showActions;
+      // If just opened from click or key, focus first menuitem
+      if (this.showActions) {
+        this.$nextTick(() => {
+          this.focusFirstMenuItem();
+        });
+      }
+    },
+    openActions() {
+      if (!this.showActions) {
+        this.showActions = true;
+      }
+      this.$nextTick(() => {
+        this.focusFirstMenuItem();
+      });
+    },
+    closeActions() {
+      this.showActions = false;
+      this.currentMenuIndex = -1;
+    },
+    handleEdit() {
+      this.closeActions();
+      this.data?.onEdit?.();
+    },
+    handleDelete() {
+      this.closeActions();
+      this.data?.onDelete?.();
+    },
+
+    // Focus management
+    onEdgeFocus() {
+      this.clearBlurTimeout();
+      // DO NOT open or focus inside menu just on focus
+      // Menu only opens via user intent (keyboard or mouse)
+    },
+    onEdgeBlur() {
+      this.blurTimeout = setTimeout(() => {
+        if (!this.isElementInComponent(document.activeElement)) {
+          this.closeActions();
+        }
+      }, 100);
+    },
+    onBlur() {
+      this.scheduleClose();
+    },
+    clearBlurTimeout() {
+      if (this.blurTimeout) {
+        clearTimeout(this.blurTimeout);
+        this.blurTimeout = null;
+      }
+    },
+    scheduleClose() {
+      this.blurTimeout = setTimeout(() => {
+        if (!this.isElementInComponent(document.activeElement)) {
+          this.closeActions();
+        }
+      }, 100);
+    },
+
+    // Keyboard handlers
     onEdgeKeydown(e) {
+      // Allow native Tab/Shift+Tab to move focus away, do not intercept
+      if (e.key === 'Tab' || e.key === 'Shift') {
+        return;
+      }
+      // Only intercept activation and special keys
       if (e.key === 'Enter' || e.key === ' ') {
-        this.data.onSelect();
         e.preventDefault();
+        this.openActions();
+      } else if ((e.key === 'e' || e.key === 'E') && this.data?.isTransitionMode) {
+        e.preventDefault();
+        this.handleEdit();
+      } else if ((e.key === 'Delete' || e.key === 'Backspace') && this.data?.isTransitionMode) {
+        e.preventDefault();
+        this.handleDelete();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.data?.onEscape?.();
+        this.closeActions();
+        this.$refs.edgeLabel?.focus();
       }
-      if ((e.key === 'e' || e.key === 'E') && this.data?.isTransitionMode) {
-        this.data.onEdit();
+    },
+    onMenuButtonKeydown(e) {
+      // Let Tab/Shift+Tab flow through to leave
+      if (e.key === 'Tab' || e.key === 'Shift') return;
+      // Only prevent default for handled keys
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
+        this.toggleActions();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (!this.showActions) this.openActions();
+        else this.focusFirstMenuItem();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.data?.onEscape?.();
+        this.closeActions();
+        this.$refs.edgeLabel?.focus();
       }
-      if ((e.key === 'Delete' || e.key === 'Backspace') && this.data?.isTransitionMode) {
-        this.data.onDelete?.();
+    },
+    onMenuKeydown(e) {
+      const menuItems = this.menuItems;
+      // Only intercept nav keys inside menu
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        this.currentMenuIndex = Math.min(this.currentMenuIndex + 1, menuItems.length - 1);
+        this.focusCurrentMenuItem();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (this.currentMenuIndex === 0) {
+          this.$refs.menuButton?.focus();
+          this.currentMenuIndex = -1;
+        } else {
+          this.currentMenuIndex = Math.max(this.currentMenuIndex - 1, 0);
+          this.focusCurrentMenuItem();
+        }
+      } else if (e.key === 'Escape') {
         e.preventDefault();
+        this.data?.onEscape?.();
+        this.closeActions();
+        this.$refs?.edgeLabel?.focus();
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        menuItems[this.currentMenuIndex]?.click();
+      }
+      // Tab & Shift+Tab are **NOT** trapped here; let browser move focus
+    },
+
+    // Helper methods
+    isElementInComponent(element) {
+      if (!element) return false;
+      const edgeLabel = this.$el?.querySelector('.edge-label');
+      return edgeLabel?.contains(element) || false;
+    },
+    focusFirstMenuItem() {
+      const menuItems = this.menuItems;
+      if (menuItems.length > 0) {
+        this.currentMenuIndex = 0;
+        this.focusCurrentMenuItem();
       }
     },
-    onEdgeFocus() {},
-    onEdgeBlur() {},
+    focusCurrentMenuItem() {
+      const menuItems = this.menuItems;
+      if (
+        this.currentMenuIndex >= 0 &&
+        this.currentMenuIndex < menuItems.length &&
+        menuItems[this.currentMenuIndex]
+      ) {
+        menuItems[this.currentMenuIndex].focus();
+      }
+    },
+    updateLabelWidth() {
+      this.$nextTick(() => {
+        if (this.$refs.textMeasurer) {
+          const measuredWidth = this.$refs.textMeasurer.offsetWidth;
+          this.maxWidth = Math.min(measuredWidth + 50, 300);
+        }
+      });
+    },
   },
 };
 </script>

From a446fc00892a9506c115d5c6492d319c321543f4 Mon Sep 17 00:00:00 2001
From: Dileepadari <adaridileep@gmail.com>
Date: Mon, 4 Aug 2025 03:49:04 +0530
Subject: [PATCH 2/5] implemented all the changes regarding dropdowns

---
 .../resources/scripts/components/App.vue      |  11 +-
 .../resources/scripts/components/Titlebar.vue |  23 +-
 .../components/canvas/ControlsPanel.vue       |  23 +-
 .../components/canvas/CustomControls.vue      |   2 +-
 .../components/canvas/WorkflowCanvas.vue      |  50 +--
 .../scripts/components/edges/CustomEdge.vue   | 329 ++++++++----------
 .../scripts/components/nodes/StageNode.vue    | 224 ++++++++----
 .../scripts/plugins/Notifications.es6.js      |  54 +++
 .../resources/scripts/store/actions.es6.js    |   7 +-
 .../resources/scripts/utils/edges.es6.js      |   4 -
 .../scripts/utils/keyboard-manager.es6.js     |  41 ++-
 .../resources/scripts/utils/utils.es6.js      |   4 +-
 .../resources/scripts/workflowgraph.es6.js    |  12 +-
 .../src/Controller/StageController.php        |   6 +-
 .../com_workflow/tmpl/workflows/default.php   |   2 +-
 .../components/_workflow-graph-custom.scss    |  26 +-
 16 files changed, 430 insertions(+), 388 deletions(-)
 create mode 100644 administrator/components/com_workflow/resources/scripts/plugins/Notifications.es6.js

diff --git a/administrator/components/com_workflow/resources/scripts/components/App.vue b/administrator/components/com_workflow/resources/scripts/components/App.vue
index 692a1f37f81..03164e1f62c 100644
--- a/administrator/components/com_workflow/resources/scripts/components/App.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     id="workflow-app"
-    class="workflow-app-container d-flex flex-column flex-grow-1 min-vh-80"
+    class="d-flex flex-column flex-grow-1 min-vh-80"
     role="application"
-    aria-label="appTitle"
   >
     <div
+      id="workflow-title"
       class="d-flex flex-column flex-shrink-0"
       role="banner"
     >
@@ -18,7 +18,6 @@
         id="main-canvas"
         class="flex-grow-1 position-relative"
         role="main"
-        aria-labelledby="workflow-heading"
       >
         <WorkflowCanvas
           ref="canvas"
@@ -51,10 +50,10 @@ function handleCanvasFocus() {
 onMounted(() => {
   const { workflowId: idFromOpts = null } = Joomla.getOptions('com_workflow', {});
   const idFromURL = parseInt(new URL(window.location.href).searchParams.get('id'), 10);
-  const workflowIdFinal = idFromOpts || idFromURL;
+  const currentWorkflowId = idFromOpts || idFromURL;
 
-  if (workflowIdFinal !== null && !Number.isNaN(workflowIdFinal)) {
-    store.dispatch('loadWorkflow', workflowIdFinal);
+  if (currentWorkflowId !== null && !Number.isNaN(currentWorkflowId)) {
+    store.dispatch('loadWorkflow', currentWorkflowId);
   } else {
     throw new Error('COM_WORKFLOW_GRAPH_ERROR_INVALID_ID');
   }
diff --git a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
index 3884e693574..906985e7f8a 100644
--- a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
@@ -1,45 +1,42 @@
 <template>
   <section
-    class="workflow-graph-titlebar d-flex flex-wrap align-items-center justify-content-between"
+    class="d-flex flex-wrap align-items-center justify-content-between"
     aria-labelledby="workflow-title"
     role="region"
   >
     <div class="col-md-6 d-flex flex-column">
-      <h2
-        id="workflow-title"
-        class="mb-2"
-      >
+      <h2 class="mb-2">
         {{ translate(workflow?.title) }}
       </h2>
       <dl
         class="d-flex align-items-center flex-wrap mb-0"
         aria-label="workflow details"
       >
-        <div class="me-3 mb-1 d-flex align-items-center">
+        <div class="me-3 mb-1 d-flex">
           <dt class="visually-hidden">
-            {{ translate('COM_WORKFLOW_GRAPH_STATUS') }}
+            {{ sprintf('COM_WORKFLOW_GRAPH_STATUS', workflow.published ? 'COM_WORKFLOW_GRAPH_ENABLED' : 'COM_WORKFLOW_GRAPH_DISABLED') }}
           </dt>
           <dd>
             <span
               class="badge"
-              :class="workflow.published ? 'bg-success text-white' : 'bg-warning text-dark'"
+              :class="workflow.published ? 'bg-success' : 'bg-warning'"
               role="status"
             >
               {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
             </span>
           </dd>
         </div>
-        <div class="me-3 mb-1 d-flex align-items-center">
+        <div class="me-3 mb-1 d-flex">
           <dt class="visually-hidden">
-            {{ translate('COM_WORKFLOW_GRAPH_STAGE_COUNT') }}
+            {{ sprintf('COM_WORKFLOW_GRAPH_STAGE_COUNT', stagesCount) }}
           </dt>
           <dd>
             {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
           </dd>
         </div>
-        <div class="me-3 mb-1 d-flex align-items-center">
+        <div class="me-3 mb-1 d-flex">
           <dt class="visually-hidden">
-            {{ translate('COM_WORKFLOW_GRAPH_TRANSITION_COUNT') }}
+            {{ sprintf('COM_WORKFLOW_GRAPH_TRANSITION_COUNT', transitionsCount) }}
           </dt>
           <dd>
             {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION') :
@@ -50,10 +47,10 @@
     </div>
     <div
       id="save-message"
+      class="mb-2 fw-bold"
       :class="{
         'text-warning': saveStatus.value === 'unsaved',
       }"
-      class="mb-2 fw-bold"
     >
       {{
         saveStatus.value === 'unsaved'
diff --git a/administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue b/administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue
index d4c5410ae12..c8d1b1e5618 100644
--- a/administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue
@@ -29,21 +29,6 @@
       />
       {{ translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION') }}
     </button>
-
-    <!--<button
-          :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')"
-          @click="$emit('toggle-transition-mode')"
-        >
-          <span
-            :class="isTransitionMode ? 'icon icon-toggle-on' : 'icon icon-toggle-off'"
-            aria-hidden="true"
-          />
-          {{ isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE') }}
-        </button> -->
   </Panel>
 </template>
 
@@ -53,12 +38,6 @@ import { Panel } from '@vue-flow/core';
 export default {
   name: 'ControlsPanel',
   components: { Panel },
-  props: {
-    isTransitionMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['add-stage', 'add-transition', 'toggle-transition-mode'],
+  emits: ['add-stage', 'add-transition'],
 };
 </script>
diff --git a/administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue b/administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue
index 72119966a7e..f759e0494c0 100644
--- a/administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="controlsContainer"
-    class="custom-controls"
+    class="custom-controls z-10"
     tabindex="0"
   >
     <button
diff --git a/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue b/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
index 6f9a26d35ce..761eaa0f541 100644
--- a/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
@@ -1,7 +1,5 @@
 <template>
   <div
-    id="main-canvas"
-    ref="canvasRegion"
     class="w-100 h-100 position-relative"
     role="region"
   >
@@ -10,14 +8,15 @@
       class="workflow-canvas"
       max-zoom="2.5"
       min-zoom=".3"
-      :nodes="positionedNodes"
       :edges="styledEdges"
+      :nodes="positionedNodes"
       :node-types="nodeTypes"
       :edge-types="edgeTypes"
       :nodes-connectable="workflow?.canCreate"
       :elements-selectable="true"
       :snap-to-grid="true"
       :snap-grid="[40, 40]"
+      :disable-keyboard-a11y="true"
       @connect="handleConnect"
       @pane-click="clearSelection"
       @edge-click="selectEdge"
@@ -30,9 +29,8 @@
 
       <button
         id="toggle-minimap"
-        class="toolbar-button custom-controls-button position-absolute"
+        class="toolbar-button custom-controls-button position-absolute z-20"
         tabindex="0"
-        style="z-index: 1003"
         :style="showMiniMap ? 'bottom: 130px; left: 180px;' : 'bottom: 10px; left: 10px;'"
         :aria-label="showMiniMap ? translate('COM_WORKFLOW_GRAPH_MINIMAP_HIDE') : translate('COM_WORKFLOW_GRAPH_MINIMAP_SHOW')"
         :title="showMiniMap ? translate('COM_WORKFLOW_GRAPH_MINIMAP_HIDE') : translate('COM_WORKFLOW_GRAPH_MINIMAP_SHOW')"
@@ -49,21 +47,21 @@
       </button>
       <MiniMap
         v-if="showMiniMap"
+        class="z-10"
         position="bottom-left"
         pannable
         zoomable
         :node-color="(node) => node.data?.stage?.color || '#0d6efd'"
         :mask-color="'rgba(255, 255, 255, .6)'"
-        :aria-label="translate('COM_WORKFLOW_GRAPH_MINIMAP')"
       />
-      <CustomControls aria-label="Graph controls" />
+      <CustomControls
+        aria-label="Graph controls"
+      />
       <ControlsPanel
         v-if="workflow?.canCreate"
         class="canvas-controls-panel"
-        :is-transition-mode="isTransitionMode"
         @add-stage="addStage"
         @add-transition="addTransition"
-        @toggle-transition-mode="toggleTransitionMode"
       />
     </VueFlow>
     <div
@@ -122,7 +120,7 @@ export default {
       fitView, zoomIn, zoomOut, viewport, setViewport, onViewportChange,
     } = useVueFlow();
 
-    const isTransitionMode = ref(true);
+    const isTransitionMode = ref(false);
     const selectedStage = ref(null);
     const selectedTransition = ref(null);
     const liveRegion = ref(null);
@@ -191,11 +189,13 @@ export default {
     }
 
     function selectStage(id) {
+      isTransitionMode.value = false;
       selectedStage.value = parseInt(id, 10);
       selectedTransition.value = null;
     }
 
     function selectTransition(id) {
+      isTransitionMode.value = true;
       selectedTransition.value = parseInt(id, 10);
       selectedStage.value = null;
     }
@@ -217,6 +217,7 @@ export default {
     function clearSelection() {
       selectedStage.value = null;
       selectedTransition.value = null;
+      isTransitionMode.value = false;
     }
 
     function deleteStage(id) {
@@ -275,21 +276,11 @@ export default {
       announce(liveRegion.value, translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION_DIALOG_OPENED'));
     }
 
-    function toggleTransitionMode() {
-      isTransitionMode.value = !isTransitionMode.value;
-      announce(
-        liveRegion.value,
-        isTransitionMode.value
-          ? translate('COM_WORKFLOW_GRAPH_TRANSITION_MODE_ON')
-          : translate('COM_WORKFLOW_GRAPH_TRANSITION_MODE_OFF'),
-      );
-    }
-
     function handleConnect({ source, target }) {
       if (!workflow?.value?.canCreate) {
         return;
       }
-      if (isTransitionMode.value && source && target) {
+      if (source && target) {
         openModal('transition', null, { from_stage_id: source, to_stage_id: target });
       }
     }
@@ -335,7 +326,7 @@ export default {
 
     const positionedNodes = computed(() => {
       const nodes = generatePositionedNodes(stages.value);
-      const special = createSpecialNode('from_any', { x: 600, y: -200 }, '#EF4444', 'From Any', selectStage, isTransitionMode.value, true);
+      const special = createSpecialNode('from_any', { x: 600, y: -200 }, '#ffff00', 'From Any', selectStage, false);
       return [...nodes.map((n) => ({
         ...n,
         data: {
@@ -346,18 +337,17 @@ export default {
           onEdit: () => editStage(n.id),
           onDelete: () => showDeleteModal('stage', n.id),
         },
-        // draggable: !isTransitionMode.value,
       })), special];
     });
 
     const styledEdges = computed(() => generateStyledEdges(transitions.value, {
-      transitionMode: isTransitionMode.value,
       selectedId: selectedTransition.value,
     }).map((edge) => ({
       ...edge,
       data: {
         ...edge.data,
         onSelect: () => selectTransition(edge.id),
+        onEscape: () => clearSelection(),
         onDelete: () => showDeleteModal('transition', edge.id),
         onEdit: () => editTransition(edge.id),
       },
@@ -375,7 +365,6 @@ export default {
           if (selectedStage.value) showDeleteModal('stage', selectedStage.value);
           else if (selectedTransition.value) showDeleteModal('transition', selectedTransition.value);
         },
-        toggleMode: toggleTransitionMode,
         undo: () => {
           if (!store.getters.canUndo) {
             return;
@@ -434,15 +423,6 @@ export default {
       saveNodePosition();
     });
 
-    // window.WorkflowGraph.Event.fire('Error', { error: error.message });
-    window.WorkflowGraph.Event.listen('Error', (event) => {
-      if (window.Joomla && window.Joomla.renderMessages) {
-        window.Joomla.renderMessages({
-          error: [event.error.message],
-        });
-      }
-    });
-
     let isRestoringViewport = false;
     watch([loading, error], () => {
       setTimeout(() => {
@@ -485,13 +465,11 @@ export default {
       positionedNodes,
       styledEdges,
       liveRegion,
-      isTransitionMode,
       handleConnect,
       selectEdge,
       handleDeleteConfirm,
       addStage,
       addTransition,
-      toggleTransitionMode,
       clearSelection,
       handleNodeDragStop,
     };
diff --git a/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue b/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
index 6dd7f06bfca..8b336ade898 100644
--- a/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
@@ -9,70 +9,65 @@
       :stroke-dasharray="style?.strokeDasharray"
       :marker-end="markerEnd"
     />
-
     <foreignObject
       ref="edgeLabel"
       :x="labelX - (maxWidth / 2)"
       :y="labelY - (maxHeight / 5)"
       :width="maxWidth"
       :height="maxHeight"
-      class="edge-label"
+      class="edge-label position-relative"
       tabindex="0"
       :data-edge-id="data?.id"
-      @keydown="onEdgeKeydown"
-      @focus="onEdgeFocus"
-      @blur="onEdgeBlur"
+      @mouseenter="onNodeEnter"
+      @mouseleave="onNodeLeave"
+      @focus="onNodeEnter"
+      @blur="onNodeLeave"
+      @click="onSelected"
+      @keydown.enter="openActions"
+      @keydown.esc="closeActions"
+      @keydown.tab="closeActions"
     >
-      <div class="d-flex flex-column border text-bg-primary p-1 rounded shadow-sm" style="min-width: 0;">
-        <div class="d-flex align-items-center justify-content-between px-1 position-relative">
-          <span
-            class="text-white fw-semibold text-truncate pe-4"
-            :title="data?.title"
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-          >
-            {{ data?.title }}
-          </span>
-
-          <button
-            ref="menuButton"
-            type="button"
-            class="btn btn-sm btn-light px-1 py-0 position-absolute"
-            style="right: 0.25rem;"
-            :aria-label="translate('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION')"
-            :title="translate('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION')"
-            :aria-expanded="showActions"
-            aria-haspopup="true"
-            @click.stop="toggleActions"
-            @keydown="onMenuButtonKeydown"
-            @blur="onBlur"
-          >
-            <i class="icon icon-ellipsis-h" aria-hidden="true"></i>
-          </button>
-        </div>
-
+      <!-- Dropdown Overlay -->
+      <div
+        v-if="showActions"
+        class="position-absolute top-0 start-0 w-100 bg-secondary rounded bg-opacity-75 z-2"
+        style="pointer-events: none;"
+      />
+      <div class="d-flex flex-column bg-primary border rounded shadow-sm position-relative w-100">
+        <!-- Actions Dropdown -->
         <div
           v-if="showActions"
+          id="edge-actions-menu"
           ref="actionsMenu"
-          class="workflow-browser-actions-list mt-1 d-flex flex-column"
+          class="workflow-browser-actions-list w-100 position-absolute end-0 top-0 opacity-100 d-flex flex-column border rounded shadow-sm z-3"
           role="menu"
           aria-orientation="vertical"
           :aria-label="sprintf('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION', data?.title)"
-          @keydown="onMenuKeydown"
+          @mouseenter="onDropdownEnter"
+          @mouseleave="onDropdownLeave"
         >
+          <span
+            class="h5 text-white fw-semibold text-center text-truncate p-1"
+            :title="data?.title"
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+          >
+            {{ data?.title }}
+          </span>
           <button
             v-if="data?.permissions?.edit"
             ref="editButton"
             type="button"
             class="btn btn-sm btn-secondary text-start text-white fw-semibold text-truncate"
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
             role="menuitem"
-            tabindex="-1"
+            tabindex="0"
             :aria-label="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
             :title="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
             @click.stop="handleEdit"
-            @blur="onBlur"
           >
-            <i class="icon icon-pencil-alt" aria-hidden="true"></i>
+            <i
+              class="icon icon-pencil-alt"
+              aria-hidden="true"
+            />
             {{ translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION') }}
           </button>
           <button
@@ -80,23 +75,62 @@
             ref="deleteButton"
             type="button"
             class="btn btn-sm btn-danger text-start mt-1 text-white fw-semibold text-truncate"
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
             role="menuitem"
-            tabindex="-1"
+            tabindex="0"
             :aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE')"
             :title="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE')"
             @click.stop="handleDelete"
-            @blur="onBlur"
           >
-            <i class="icon icon-trash" aria-hidden="true"></i>
+            <i
+              class="icon icon-trash"
+              aria-hidden="true"
+            />
             {{ translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION_TITLE') }}
           </button>
         </div>
+
+        <!-- Title Row -->
+        <div class="d-flex justify-content-around align-items-center p-1 pe-1 z-1 position-relative">
+          <span
+            class="h4 d-block card-title text-white fw-semibold text-truncate"
+            :title="data?.title"
+          >
+            {{ data?.title }}
+          </span>
+
+          <!-- Ellipsis Menu Button -->
+          <div
+            class="align-items-center d-flex position-relative"
+          >
+            <button
+              ref="menuButton"
+              type="button"
+              class="btn btn-sm btn-secondary px-1 py-0"
+              :class="{ 'invisible': !isHovered || showActions }"
+              style="transition: opacity 0.2s ease;"
+              :aria-label="translate('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION')"
+              :title="translate('COM_WORKFLOW_GRAPH_MANAGE_TRANSITION')"
+              aria-haspopup="true"
+              :aria-expanded="showActions"
+              @click.stop="openActions"
+            >
+              <i
+                class="icon icon-ellipsis-h"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
       </div>
     </foreignObject>
 
-    <!-- Hidden text measurer -->
-    <foreignObject x="-9999" y="-9999" width="0" height="0" style="visibility: hidden; position: absolute;">
+    <foreignObject
+      x="-9999"
+      y="-9999"
+      width="0"
+      height="0"
+      class="position-absolute invisible"
+    >
       <span
         ref="textMeasurer"
         class="fw-semibold"
@@ -114,24 +148,56 @@ import { getSmoothStepPath } from '@vue-flow/core';
 export default {
   name: 'CustomEdge',
   props: {
-    id: String,
-    sourceX: Number,
-    sourceY: Number,
-    targetX: Number,
-    targetY: Number,
-    sourcePosition: String,
-    targetPosition: String,
-    style: Object,
-    markerEnd: Object,
-    data: Object,
+    id: {
+      type: String,
+      default: '',
+    },
+    sourceX: {
+      type: Number,
+      default: 0,
+    },
+    sourceY: {
+      type: Number,
+      default: 0,
+    },
+    targetX: {
+      type: Number,
+      default: 0,
+    },
+    targetY: {
+      type: Number,
+      default: 0,
+    },
+    sourcePosition: {
+      type: String,
+      default: '',
+    },
+    targetPosition: {
+      type: String,
+      default: '',
+    },
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+    markerEnd: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       showActions: false,
+      isHovered: false,
       maxHeight: 100,
       maxWidth: 100,
       currentMenuIndex: -1,
       blurTimeout: null,
+      hoverTimeout: null,
     };
   },
   computed: {
@@ -153,7 +219,7 @@ export default {
       return this.edgeData[0];
     },
     labelX() {
-      return this.edgeData[1] + ((this.data?.offsetIndex < 0 ? this.data?.offsetIndex : 0) || 0) * (this.maxWidth);
+      return this.edgeData[1] + ((this.data?.offsetIndex < 0 ? this.data?.offsetIndex : 0) || 0) * this.maxWidth;
     },
     labelY() {
       return this.edgeData[2] + ((this.data?.offsetIndex > 0 ? this.data?.offsetIndex : 0) || 0) * 75;
@@ -174,7 +240,6 @@ export default {
       handler: 'updateLabelWidth',
       immediate: true,
     },
-    // Only reset index when menu closes, don't focus into menu on open
     showActions(newVal) {
       if (!newVal) {
         this.currentMenuIndex = -1;
@@ -185,32 +250,26 @@ export default {
     this.updateLabelWidth();
   },
   beforeUnmount() {
-    if (this.blurTimeout) {
-      clearTimeout(this.blurTimeout);
-    }
+    if (this.blurTimeout) clearTimeout(this.blurTimeout);
+    if (this.hoverTimeout) clearTimeout(this.hoverTimeout);
   },
   methods: {
-    // Action handlers
     toggleActions() {
       this.showActions = !this.showActions;
-      // If just opened from click or key, focus first menuitem
       if (this.showActions) {
-        this.$nextTick(() => {
-          this.focusFirstMenuItem();
-        });
+        this.$nextTick(() => this.focusFirstMenuItem());
       }
     },
     openActions() {
-      if (!this.showActions) {
-        this.showActions = true;
-      }
-      this.$nextTick(() => {
-        this.focusFirstMenuItem();
-      });
+      this.data.onSelect?.();
+      this.showActions = true;
+      this.isHovered = false;
     },
     closeActions() {
+      this.data.onEscape?.();
+      clearTimeout(this.hoverTimeout);
+      clearTimeout(this.blurTimeout);
       this.showActions = false;
-      this.currentMenuIndex = -1;
     },
     handleEdit() {
       this.closeActions();
@@ -220,128 +279,26 @@ export default {
       this.closeActions();
       this.data?.onDelete?.();
     },
-
-    // Focus management
-    onEdgeFocus() {
-      this.clearBlurTimeout();
-      // DO NOT open or focus inside menu just on focus
-      // Menu only opens via user intent (keyboard or mouse)
+    onNodeEnter() {
+      clearTimeout(this.hoverTimeout);
+      this.isHovered = true;
     },
-    onEdgeBlur() {
-      this.blurTimeout = setTimeout(() => {
-        if (!this.isElementInComponent(document.activeElement)) {
-          this.closeActions();
-        }
+    onNodeLeave() {
+      this.hoverTimeout = setTimeout(() => {
+        if (!this.showActions) this.isHovered = false;
       }, 100);
     },
-    onBlur() {
-      this.scheduleClose();
-    },
-    clearBlurTimeout() {
-      if (this.blurTimeout) {
-        clearTimeout(this.blurTimeout);
-        this.blurTimeout = null;
-      }
+    onDropdownEnter() {
+      clearTimeout(this.blurTimeout);
     },
-    scheduleClose() {
+    onDropdownLeave() {
       this.blurTimeout = setTimeout(() => {
-        if (!this.isElementInComponent(document.activeElement)) {
-          this.closeActions();
-        }
-      }, 100);
-    },
-
-    // Keyboard handlers
-    onEdgeKeydown(e) {
-      // Allow native Tab/Shift+Tab to move focus away, do not intercept
-      if (e.key === 'Tab' || e.key === 'Shift') {
-        return;
-      }
-      // Only intercept activation and special keys
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        this.openActions();
-      } else if ((e.key === 'e' || e.key === 'E') && this.data?.isTransitionMode) {
-        e.preventDefault();
-        this.handleEdit();
-      } else if ((e.key === 'Delete' || e.key === 'Backspace') && this.data?.isTransitionMode) {
-        e.preventDefault();
-        this.handleDelete();
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        this.data?.onEscape?.();
-        this.closeActions();
-        this.$refs.edgeLabel?.focus();
-      }
-    },
-    onMenuButtonKeydown(e) {
-      // Let Tab/Shift+Tab flow through to leave
-      if (e.key === 'Tab' || e.key === 'Shift') return;
-      // Only prevent default for handled keys
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        this.toggleActions();
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        if (!this.showActions) this.openActions();
-        else this.focusFirstMenuItem();
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        this.data?.onEscape?.();
-        this.closeActions();
-        this.$refs.edgeLabel?.focus();
-      }
-    },
-    onMenuKeydown(e) {
-      const menuItems = this.menuItems;
-      // Only intercept nav keys inside menu
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        this.currentMenuIndex = Math.min(this.currentMenuIndex + 1, menuItems.length - 1);
-        this.focusCurrentMenuItem();
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        if (this.currentMenuIndex === 0) {
-          this.$refs.menuButton?.focus();
-          this.currentMenuIndex = -1;
-        } else {
-          this.currentMenuIndex = Math.max(this.currentMenuIndex - 1, 0);
-          this.focusCurrentMenuItem();
-        }
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        this.data?.onEscape?.();
         this.closeActions();
-        this.$refs?.edgeLabel?.focus();
-      } else if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        menuItems[this.currentMenuIndex]?.click();
-      }
-      // Tab & Shift+Tab are **NOT** trapped here; let browser move focus
-    },
-
-    // Helper methods
-    isElementInComponent(element) {
-      if (!element) return false;
-      const edgeLabel = this.$el?.querySelector('.edge-label');
-      return edgeLabel?.contains(element) || false;
-    },
-    focusFirstMenuItem() {
-      const menuItems = this.menuItems;
-      if (menuItems.length > 0) {
-        this.currentMenuIndex = 0;
-        this.focusCurrentMenuItem();
-      }
+        this.isHovered = false;
+      }, 100);
     },
-    focusCurrentMenuItem() {
-      const menuItems = this.menuItems;
-      if (
-        this.currentMenuIndex >= 0 &&
-        this.currentMenuIndex < menuItems.length &&
-        menuItems[this.currentMenuIndex]
-      ) {
-        menuItems[this.currentMenuIndex].focus();
-      }
+    onSelected() {
+      return this.data.onSelect;
     },
     updateLabelWidth() {
       this.$nextTick(() => {
diff --git a/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue b/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue
index 10b716eb90a..ea4cfd729cf 100644
--- a/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue
@@ -6,87 +6,151 @@
     tabindex="0"
     :data-stage-id="stage?.id"
     role="button"
-    :aria-label="`${translate('COM_WORKFLOW_GRAPH_STAGE')} :
-    ${stage?.title}. ${stage?.published ? translate('WORKFLOW_GRAPH_ENABLED') :
-    translate('WORKFLOW_GRAPH_DISABLED')}`"
-    @keydown="onNodeKeydown"
-    @focus="onNodeFocus"
-    @blur="onNodeBlur"
+    @mouseenter="onNodeEnter"
+    @mouseleave="onNodeLeave"
+    @focus="onNodeEnter"
+    @blur="onNodeLeave"
     @click="onSelected"
+    @keydown.enter="openActions"
+    @keydown.esc="closeActions"
+    @keydown.tab="closeActions"
   >
-    <!-- VueFlow Handles -->
+    <!-- Dropdown Overlay -->
+    <div
+      v-if="showActions"
+      class="position-absolute top-0 start-0 w-100 h-100 rounded bg-secondary bg-opacity-75 z-2"
+      style="pointer-events: none;"
+    />
+
+    <!-- Actions Dropdown -->
+    <div
+      v-if="showActions"
+      id="stage-actions-menu"
+      ref="actionsMenu"
+      class="workflow-browser-actions-list w-100 position-absolute end-0 top-0 opacity-100 d-flex flex-column border rounded shadow-sm z-3 p-1"
+      role="menu"
+      aria-orientation="vertical"
+      @mouseenter="onDropdownEnter"
+      @mouseleave="onDropdownLeave"
+    >
+      <span
+        class="h4 d-block card-title mb-1 text-white fw-semibold text-truncate"
+        :title="stage?.title"
+      >
+        {{ stage.title }}
+      </span>
+      <button
+        v-if="stage?.permissions?.edit"
+        ref="editButton"
+        type="button"
+        class="btn btn-sm btn-secondary text-start text-white fw-semibold text-truncate"
+        role="menuitem"
+        tabindex="0"
+        :aria-label="translate('COM_WORKFLOW_GRAPH_EDIT_STAGE')"
+        :title="translate('COM_WORKFLOW_GRAPH_EDIT_STAGE')"
+        @click.stop="handleEdit"
+      >
+        <i
+          class="icon icon-pencil-alt"
+          aria-hidden="true"
+        />
+        {{ translate('COM_WORKFLOW_GRAPH_EDIT_STAGE') }}
+      </button>
+
+      <button
+        v-if="stage?.permissions?.delete && !stage.default"
+        ref="deleteButton"
+        type="button"
+        class="btn btn-sm btn-danger mt-1 text-start text-white fw-semibold text-truncate"
+        role="menuitem"
+        tabindex="0"
+        :aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE')"
+        :title="translate('COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE')"
+        @click.stop="handleDelete"
+      >
+        <i
+          class="icon icon-trash"
+          aria-hidden="true"
+        />
+        {{ translate('COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE') }}
+      </button>
+    </div>
+
+    <!-- Handles -->
     <Handle
+      v-if="stage.published"
       type="target"
-      class="edge-handler bg-primary position-absolute top-0 start-50 translate-middle-x rounded-circle"
+      class="edge-handler bg-success position-absolute top-0 start-50 translate-middle-x rounded-circle"
+      :class="{ 'invisible': !isHoveredOrFocused || showActions }"
       :position="Position.Top"
     />
     <Handle
+      v-if="stage.published"
       type="source"
-      class="edge-handler bg-primary position-absolute bottom-0 start-50 translate-middle-x rounded-circle"
+      class="edge-handler bg-success position-absolute bottom-0 start-50 translate-middle-x rounded-circle"
+      :class="{ 'invisible': !isHoveredOrFocused || showActions }"
       :position="Position.Bottom"
     />
     <Handle
+      v-if="stage.published"
       type="target"
-      class="edge-handler bg-primary position-absolute top-50 start-0 translate-middle-y rounded-circle"
+      class="edge-handler bg-success position-absolute top-50 start-0 translate-middle-y rounded-circle"
+      :class="{ 'invisible': !isHoveredOrFocused || showActions }"
       :position="Position.Left"
     />
     <Handle
+      v-if="stage.published"
       type="source"
-      class="edge-handler bg-primary position-absolute top-50 end-0 translate-middle-y rounded-circle"
+      class="edge-handler bg-success position-absolute top-50 end-0 translate-middle-y rounded-circle"
       :position="Position.Right"
+      :class="{ 'invisible': !isHoveredOrFocused || showActions }"
     />
 
-    <!-- Stage Header -->
-    <div class="card-header d-flex justify-content-between align-items-start p-1">
+    <!-- Header -->
+    <div class="card-header d-flex justify-content-between align-items-start p-1 pe-0 z-1 position-relative">
       <div class="flex-fill w-75 me-3 min-width-0">
         <span
-          class="h3 d-block card-title mb-1 fw-semibold text-truncate"
+          class="h3 d-block card-title mb-1 text-white fw-semibold text-truncate"
           :title="stage?.title"
         >
           {{ stage.title }}
         </span>
         <p
-          class="card-text text-muted mb-0 text-truncate"
+          class="card-text text-white-50 mb-0 text-truncate"
           :title="stage?.description"
         >
           {{ stage.description }}
         </p>
       </div>
 
-      <!-- Actions -->
+      <!-- Actions Button -->
       <div
-        class="stage-card-actions align-items-center"
-        :class="data?.isSpecial ? 'd-none' : 'd-flex'"
+        v-if="!data?.isSpecial"
+        class="stage-card-actions align-items-center d-flex position-relative"
       >
         <button
-          v-if="stage?.permissions?.edit"
-          class="btn btn-lg btn-secondary py-0 px-1 me-2"
-          :aria-label="translate('COM_WORKFLOW_GRAPH_EDIT_STAGE')"
-          :title="translate('COM_WORKFLOW_GRAPH_EDIT_STAGE')"
-          @click.stop="data.onEdit"
+          ref="menuButton"
+          type="button"
+          class="btn btn-sm btn-light px-1 py-0"
+          :class="{ 'invisible': !isHoveredOrFocused || showActions }"
+          style="transition: opacity 0.2s ease;"
+          :aria-label="translate('COM_WORKFLOW_GRAPH_MANAGE_STAGE')"
+          :title="translate('COM_WORKFLOW_GRAPH_MANAGE_STAGE')"
+          aria-haspopup="true"
+          :aria-expanded="showActions"
+          aria-controls="stage-actions-menu"
+          @click.stop="openActions"
         >
           <i
-            class="icon icon-pencil"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          v-if="stage?.permissions?.delete"
-          class="btn btn-lg btn-danger py-0 px-1"
-          :class="stage.default ? 'd-none' : ''"
-          :aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE')"
-          :title="translate('COM_WORKFLOW_GRAPH_DELETE_STAGE_TITLE')"
-          @click.stop="data.onDelete"
-        >
-          <i
-            class="icon icon-trash"
+            class="icon icon-ellipsis-h"
             aria-hidden="true"
           />
         </button>
       </div>
     </div>
 
-    <div class="card-body px-1 py-0">
+    <!-- Body -->
+    <div class="card-body px-1 py-0 z-1 position-relative">
       <div class="d-flex justify-content-between align-items-center">
         <span
           :class="stage.published ? 'bg-success' : 'bg-danger'"
@@ -94,7 +158,6 @@
         >
           {{ stage.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
         </span>
-
         <div class="d-flex gap-1">
           <span
             v-if="stage.default"
@@ -116,7 +179,6 @@
 
 <script>
 import { Handle, Position } from '@vue-flow/core';
-import { focusNode } from '../../utils/focus-utils.es6';
 
 export default {
   name: 'StageNode',
@@ -128,6 +190,14 @@ export default {
     },
   },
   emits: ['navigate'],
+  data() {
+    return {
+      showActions: false,
+      isHoveredOrFocused: false,
+      hoverTimeout: null,
+      blurTimeout: null,
+    };
+  },
   computed: {
     Position() {
       return Position;
@@ -140,46 +210,58 @@ export default {
     },
     stageStyle() {
       return {
-        borderColor: `${this.data.stage.color}!important`,
-        borderWidth: this.data.isSelected ? '4px !important' : '2px !important',
+        borderColor: `${this.stage.color} !important`,
+        borderWidth: this.isSelected ? '4px !important' : '0 !important',
+        background: this.data.isSpecial ? 'purple !important' : 'rgb(var(--primary-rgb)) !important',
       };
     },
     badgeStyle() {
-      return { backgroundColor: this.data.stage.color };
+      return { backgroundColor: this.stage.color };
     },
     onSelected() {
       return this.data.onSelect;
     },
+    onEscape() {
+      return this.data.onEscape;
+    },
   },
   methods: {
-    onNodeKeydown(e) {
-      if (e.key === 'Enter' || e.key === ' ') {
-        this.data.onSelect();
-        e.preventDefault();
-      }
-      if (e.key === 'e' || e.key === 'E') {
-        if (this.data.isSpecial) {
-          return;
-        }
-        this.data.onEdit();
-        e.preventDefault();
-      }
-      if (e.key === 'Delete' || e.key === 'Backspace') {
-        if (this.data.isSpecial) {
-          return;
-        }
-        this.data.onDelete();
-        e.preventDefault();
-      }
-      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
-        this.$emit('navigate', e.key);
-        e.preventDefault();
-      }
-    },
-    onNodeFocus(node) {
-      focusNode(node?.id);
-    },
-    onNodeBlur() {},
+    openActions() {
+      this.data.onSelect?.();
+      this.showActions = true;
+      this.isHoveredOrFocused = false;
+    },
+    closeActions() {
+      this.data.onEscape?.();
+      clearTimeout(this.hoverTimeout);
+      clearTimeout(this.blurTimeout);
+      this.showActions = false;
+    },
+    handleEdit() {
+      this.closeActions();
+      this.data?.onEdit?.();
+    },
+    handleDelete() {
+      this.closeActions();
+      this.data?.onDelete?.();
+    },
+    onNodeEnter() {
+      clearTimeout(this.hoverTimeout);
+      this.isHoveredOrFocused = true;
+    },
+    onNodeLeave() {
+      this.hoverTimeout = setTimeout(() => {
+        if (!this.showActions) this.isHoveredOrFocused = false;
+      }, 100);
+    },
+    onDropdownEnter() {
+      clearTimeout(this.blurTimeout);
+    },
+    onDropdownLeave() {
+      this.blurTimeout = setTimeout(() => {
+        this.closeActions();
+      }, 100);
+    },
   },
 };
 </script>
diff --git a/administrator/components/com_workflow/resources/scripts/plugins/Notifications.es6.js b/administrator/components/com_workflow/resources/scripts/plugins/Notifications.es6.js
new file mode 100644
index 00000000000..d12b27ee9cc
--- /dev/null
+++ b/administrator/components/com_workflow/resources/scripts/plugins/Notifications.es6.js
@@ -0,0 +1,54 @@
+/**
+ * Send a notification
+ * @param {String} message
+ * @param {{}} options
+ *
+ */
+function notify(message, options) {
+  let timer;
+  if (options.type === 'message') {
+    timer = 3000;
+  }
+  Joomla.renderMessages(
+    {
+      [options.type]: [Joomla.Text._(message)],
+    },
+    undefined,
+    true,
+    timer,
+  );
+}
+
+const notifications = {
+  /* Send a success notification */
+  success: (message, options) => {
+    notify(message, {
+      type: 'message', // @todo rename it to success
+      dismiss: true,
+      ...options,
+    });
+  },
+
+  /* Send an error notification */
+  error: (message, options) => {
+    notify(message, {
+      type: 'error', // @todo rename it to danger
+      dismiss: true,
+      ...options,
+    });
+  },
+
+  /* Send a general notification */
+  notify: (message, options) => {
+    notify(message, {
+      type: 'message',
+      dismiss: true,
+      ...options,
+    });
+  },
+
+  /* Ask the user a question */
+  ask: (message) => window.confirm(message),
+};
+
+export default notifications;
diff --git a/administrator/components/com_workflow/resources/scripts/store/actions.es6.js b/administrator/components/com_workflow/resources/scripts/store/actions.es6.js
index 7af79e2a405..2b062060586 100644
--- a/administrator/components/com_workflow/resources/scripts/store/actions.es6.js
+++ b/administrator/components/com_workflow/resources/scripts/store/actions.es6.js
@@ -1,4 +1,5 @@
 import workflowGraphApi from '../app/WorkflowGraphApi.es6.js';
+import notifications from '../plugins/Notifications.es6';
 
 /**
  * Vuex Actions for asynchronous operations and workflows
@@ -23,10 +24,10 @@ export default {
         await workflowGraphApi.getTransitions(id),
       ]);
 
+      commit('SET_WORKFLOW_ID', id);
       commit('SET_WORKFLOW', workflowRes?.data);
       commit('SET_STAGES', stagesRes?.data);
       commit('SET_TRANSITIONS', transitionsRes?.data);
-      commit('SET_WORKFLOW_ID', id);
 
       dispatch('saveToHistory');
     } catch (error) {
@@ -60,9 +61,7 @@ export default {
       ) {
         const errorMessage = 'COM_WORKFLOW_ERROR_STAGE_DEFAULT_CANT_DELETED';
         commit('SET_ERROR', errorMessage);
-        if (window.Joomla && window.Joomla.renderMessages) {
-          window.Joomla.renderMessages({ error: [errorMessage] });
-        }
+        notifications.error(errorMessage);
         return;
       }
 
diff --git a/administrator/components/com_workflow/resources/scripts/utils/edges.es6.js b/administrator/components/com_workflow/resources/scripts/utils/edges.es6.js
index 3d4153c3cd2..61ca2975a68 100644
--- a/administrator/components/com_workflow/resources/scripts/utils/edges.es6.js
+++ b/administrator/components/com_workflow/resources/scripts/utils/edges.es6.js
@@ -4,13 +4,11 @@ import { getEdgeColor } from './utils.es6.js';
  * Generate styled edges based on transition data.
  * @param {Array<Object>} transitions - List of transitions.
  * @param {Object} options - Optional configuration.
- * @param {Boolean} options.transitionMode - Whether transition mode is enabled.
  * @param {Number|String|null} options.selectedId - Currently selected transition id.
  * @returns {Array<Object>} Styled edge definitions.
  */
 export function generateStyledEdges(transitions, options = {}) {
   const {
-    transitionMode = false,
     selectedId = null,
   } = options;
 
@@ -51,14 +49,12 @@ export function generateStyledEdges(transitions, options = {}) {
       },
       data: {
         ...transition,
-        isTransitionMode: transitionMode,
         isSelected,
         isBiDirectional,
         offsetIndex,
         onEdit: () => {},
         onDelete: () => {},
       },
-      draggable: !transitionMode,
     };
   });
 }
diff --git a/administrator/components/com_workflow/resources/scripts/utils/keyboard-manager.es6.js b/administrator/components/com_workflow/resources/scripts/utils/keyboard-manager.es6.js
index b13f3dc547b..878e2a08004 100644
--- a/administrator/components/com_workflow/resources/scripts/utils/keyboard-manager.es6.js
+++ b/administrator/components/com_workflow/resources/scripts/utils/keyboard-manager.es6.js
@@ -20,9 +20,9 @@ import {
  */
 export function setupGlobalShortcuts({
   addStage, addTransition, editItem, deleteItem,
-  toggleMode, undo, redo, updateSaveMessage,
-  saveNodePosition, clearSelection, zoomIn,
-  zoomOut, fitView, viewport, state, setSaveStatus, store,
+  undo, redo, updateSaveMessage, saveNodePosition,
+  clearSelection, zoomIn, zoomOut, fitView,
+  viewport, state, setSaveStatus, store,
 }) {
   function isModifierPressed(e, key) {
     return (e.ctrlKey || e.metaKey) && [key.toLowerCase(), key.toUpperCase()].includes(e.key);
@@ -89,29 +89,24 @@ export function setupGlobalShortcuts({
         announce(state.liveRegion, 'Add transition');
         break;
 
-      case e.altKey && ['u', 'U'].includes(e.key):
+      case isModifierPressed(e, 'z'):
         e.preventDefault();
-        editItem();
+        undo();
         break;
 
-      case e.altKey && e.shiftKey && ['d', 'D'].includes(e.key):
+      case isModifierPressed(e, 'y'):
         e.preventDefault();
-        deleteItem();
+        redo();
         break;
 
-      case e.altKey && ['c', 'C'].includes(e.key):
+      case e.key === 'e' || e.key === 'E':
         e.preventDefault();
-        toggleMode();
-        break;
-
-      case isModifierPressed(e, 'z'):
-        e.preventDefault();
-        undo();
+        editItem();
         break;
 
-      case isModifierPressed(e, 'y'):
+      case e.key === 'Delete' || e.key === 'Backspace':
         e.preventDefault();
-        redo();
+        deleteItem();
         break;
 
       case e.key === 'Escape':
@@ -148,7 +143,19 @@ export function setupGlobalShortcuts({
       case ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key):
         e.preventDefault();
         if (state.selectedStage.value) {
-          moveNode(state.selectedStage.value.toString(), e.key, e.shiftKey);
+          if (e.shiftKey) {
+            moveNode(state.selectedStage.value.toString(), e.key, e.shiftKey);
+          } else {
+            const buttonSelector = `.stage-node[data-stage-id='${state.selectedStage.value}'] button[tabindex="0"]`;
+            if (buttonSelector) {
+              cycleFocus(buttonSelector, 0);
+            }
+          }
+        } else if (state.selectedTransition.value) {
+          const buttonSelector = `.edge-label[data-edge-id='${state.selectedTransition.value}'] button[tabindex="0"]`;
+          if (buttonSelector) {
+            cycleFocus(buttonSelector, 0);
+          }
         } else if (e.shiftKey) {
           const panStep = 20;
           switch (e.key) {
diff --git a/administrator/components/com_workflow/resources/scripts/utils/utils.es6.js b/administrator/components/com_workflow/resources/scripts/utils/utils.es6.js
index bff6b78fa8a..29f8e18b465 100644
--- a/administrator/components/com_workflow/resources/scripts/utils/utils.es6.js
+++ b/administrator/components/com_workflow/resources/scripts/utils/utils.es6.js
@@ -27,8 +27,8 @@ export function getColorForTransition(transition) {
  * @returns {string} Hex or HSL color.
  */
 export function getEdgeColor(transition, isSelected) {
-  if (isSelected) return '#3B82F6'; // Blue for selected
-  if (transition?.published) return getColorForTransition(transition);
+  if (isSelected) return getColorForTransition(transition); // Blue for selected
+  if (transition?.published) return '#3B82F6';
   return (transition.from_stage_id === -1 || transition.to_stage_id === -1) ? '#F97316' : '#10B981';
 }
 
diff --git a/administrator/components/com_workflow/resources/scripts/workflowgraph.es6.js b/administrator/components/com_workflow/resources/scripts/workflowgraph.es6.js
index eb3515390d1..2adcd31aaa2 100644
--- a/administrator/components/com_workflow/resources/scripts/workflowgraph.es6.js
+++ b/administrator/components/com_workflow/resources/scripts/workflowgraph.es6.js
@@ -3,6 +3,7 @@ import App from './components/App.vue';
 import EventBus from './app/Event.es6';
 import store from './store/store.es6';
 import translate from './plugins/translate.es6.js';
+import notifications from './plugins/Notifications.es6.js';
 
 // Register WorkflowGraph namespace
 window.WorkflowGraph = window.WorkflowGraph || {};
@@ -10,11 +11,6 @@ window.WorkflowGraph = window.WorkflowGraph || {};
 window.WorkflowGraph.Event = EventBus;
 
 document.addEventListener('DOMContentLoaded', () => {
-  const skipToButton = document.querySelector('.skip-to button');
-  if (skipToButton) {
-    skipToButton.focus();
-  }
-
   const mountElement = document.getElementById('workflow-graph-root');
 
   if (mountElement) {
@@ -22,9 +18,7 @@ document.addEventListener('DOMContentLoaded', () => {
     app.use(store);
     app.use(translate);
     app.mount(mountElement);
-  } else if (window.Joomla && window.Joomla.renderMessages) {
-    window.Joomla.renderMessages({
-      error: ['Mount element #workflow-graph-root not found'],
-    });
+  } else {
+    notifications.error('Can\'t start the page, the root is not found');
   }
 });
diff --git a/administrator/components/com_workflow/src/Controller/StageController.php b/administrator/components/com_workflow/src/Controller/StageController.php
index d2f6d7c7166..ad3c423d46a 100644
--- a/administrator/components/com_workflow/src/Controller/StageController.php
+++ b/administrator/components/com_workflow/src/Controller/StageController.php
@@ -177,12 +177,12 @@ protected function getRedirectToListAppend()
     }
 
     /**
-     * Method to save a request.
+     * Method to save a record.
      *
-     * @param   string  $key  The name of the primary key of the URL variable.
+     * @param   string  $key     The name of the primary key of the URL variable.
      * @param   string  $urlVar  The name of the URL variable if different from the primary key (sometimes required to avoid router collisions).
      *
-     * @return  boolean  True if access level checks pass, false otherwise.
+     * @return  boolean  True if successful, false otherwise.
      *
      * @since   __DEPLOY_VERSION__
      */
diff --git a/administrator/components/com_workflow/tmpl/workflows/default.php b/administrator/components/com_workflow/tmpl/workflows/default.php
index 7ee58667588..33070384fc7 100644
--- a/administrator/components/com_workflow/tmpl/workflows/default.php
+++ b/administrator/components/com_workflow/tmpl/workflows/default.php
@@ -180,7 +180,7 @@
                                 </td>
                                 <td class="text-center btns d-none d-md-table-cell">
                                     <a class="btn btn-primary px-2 py-1" href="<?php echo $graph; ?>" aria-describedby="tip-graph<?php echo $i; ?>">
-                                        <span class="fa fa-hexagon-nodes" aria-hidden="true"></span>
+                                        <span class="fa fa-diagram-project" aria-hidden="true"></span>
                                     </a>
                                     <div role="tooltip" id="tip-graph<?php echo $i; ?>">
                                         <?php echo Text::_('COM_WORKFLOW_GRAPH'); ?>
diff --git a/build/media_source/com_workflow/scss/components/_workflow-graph-custom.scss b/build/media_source/com_workflow/scss/components/_workflow-graph-custom.scss
index 416ceb2f9e4..15ba5ed60b6 100644
--- a/build/media_source/com_workflow/scss/components/_workflow-graph-custom.scss
+++ b/build/media_source/com_workflow/scss/components/_workflow-graph-custom.scss
@@ -4,10 +4,6 @@
   background-size: 20px 20px;
 }
 
-.vue-flow__panel {
-  z-index: 10;
-}
-
 .min-vh-80 {
   height: 80vh;
 }
@@ -20,6 +16,14 @@
   height: 40px;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
 /* ----- Edges ----- */
 .vue-flow__edge-path {
   stroke-width: 2;
@@ -84,6 +88,11 @@
 }
 
 /* ----- Card Actions ----- */
+.workflow-browser-actions-list {
+  background-color: #000;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, .6);
+}
+
 .stage-card-actions button {
   --btn-padding-x: 2px !important;
   --btn-padding-y: 0 !important;
@@ -98,14 +107,6 @@
 }
 
 /* ----- Accessibility ----- */
-.stage-node:focus, .stage-node:focus-visible,
-.edge-label:focus, .edge-label:focus-visible,
-button:focus, button:focus-visible,
-:focus-visible, :focus:not(:disabled):not([readonly]) {
-  border: 2px solid var(--template-link-color) !important;
-  box-shadow: 0 0 0 .25rem rgba(42, 105, 183, .25) !important;
-}
-
 .sr-only,
 .visually-hidden {
   position: absolute;
@@ -123,7 +124,6 @@ button:focus, button:focus-visible,
   position: absolute;
   right: 20px;
   bottom: 20px;
-  z-index: 5;
   display: flex;
   flex-direction: column;
   gap: 1px;

From 2bb7f9c7298321808c3f605db8a50c0bad4ce65d Mon Sep 17 00:00:00 2001
From: Dileepadari <adaridileep@gmail.com>
Date: Mon, 4 Aug 2025 18:16:35 +0530
Subject: [PATCH 3/5] deprecated functions removed

---
 .../components/com_workflow/layouts/toolbar/redo.php |  2 +-
 .../com_workflow/layouts/toolbar/shortcuts.php       |  2 +-
 .../components/com_workflow/layouts/toolbar/undo.php |  2 +-
 .../com_workflow/src/View/Graph/HtmlView.php         | 12 +++++-------
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/administrator/components/com_workflow/layouts/toolbar/redo.php b/administrator/components/com_workflow/layouts/toolbar/redo.php
index 08355f03db0..d191a102415 100644
--- a/administrator/components/com_workflow/layouts/toolbar/redo.php
+++ b/administrator/components/com_workflow/layouts/toolbar/redo.php
@@ -13,7 +13,7 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('webcomponent.toolbar-button');
 
 ?>
diff --git a/administrator/components/com_workflow/layouts/toolbar/shortcuts.php b/administrator/components/com_workflow/layouts/toolbar/shortcuts.php
index 165f7f64633..41788338ccd 100644
--- a/administrator/components/com_workflow/layouts/toolbar/shortcuts.php
+++ b/administrator/components/com_workflow/layouts/toolbar/shortcuts.php
@@ -13,7 +13,7 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('webcomponent.toolbar-button');
 
 $shortcutsPopupOptions = json_encode([
diff --git a/administrator/components/com_workflow/layouts/toolbar/undo.php b/administrator/components/com_workflow/layouts/toolbar/undo.php
index f42002b9e94..32c64579678 100644
--- a/administrator/components/com_workflow/layouts/toolbar/undo.php
+++ b/administrator/components/com_workflow/layouts/toolbar/undo.php
@@ -13,7 +13,7 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('webcomponent.toolbar-button');
 
 ?>
diff --git a/administrator/components/com_workflow/src/View/Graph/HtmlView.php b/administrator/components/com_workflow/src/View/Graph/HtmlView.php
index d99f710d6be..e5dfb1e3cb5 100644
--- a/administrator/components/com_workflow/src/View/Graph/HtmlView.php
+++ b/administrator/components/com_workflow/src/View/Graph/HtmlView.php
@@ -86,13 +86,11 @@ public function display($tpl = null)
         $model = $this->getModel();
 
         // Get the data
-        $this->state = $model->getState();
-        $this->item  = $model->getItem();
-
-
-        // Check for errors.
-        if (\count($errors = $model->getErrors())) {
-            throw new GenericDataException(implode("\n", $errors), 500);
+        try {
+            $this->state = $model->getState();
+            $this->item  = $model->getItem();
+        } catch (\Exception $e) {
+            throw new GenericDataException(Text::_('COM_WORKFLOW_GRAPH_ERROR_FETCHING_MODEL') . $e->getMessage(), 500, $e);
         }
 
         $extension = $this->state->get('filter.extension');

From 80cc02183a815767fbb82090526f9937a7d13818 Mon Sep 17 00:00:00 2001
From: Dileepadari <adaridileep@gmail.com>
Date: Mon, 4 Aug 2025 19:18:58 +0530
Subject: [PATCH 4/5] accessibility improved

---
 .../com_workflow/resources/scripts/components/App.vue          | 3 ---
 .../com_workflow/resources/scripts/components/Titlebar.vue     | 1 -
 .../resources/scripts/components/canvas/WorkflowCanvas.vue     | 3 +++
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/administrator/components/com_workflow/resources/scripts/components/App.vue b/administrator/components/com_workflow/resources/scripts/components/App.vue
index 03164e1f62c..1a032b432a5 100644
--- a/administrator/components/com_workflow/resources/scripts/components/App.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/App.vue
@@ -2,12 +2,10 @@
   <div
     id="workflow-app"
     class="d-flex flex-column flex-grow-1 min-vh-80"
-    role="application"
   >
     <div
       id="workflow-title"
       class="d-flex flex-column flex-shrink-0"
-      role="banner"
     >
       <WorkflowTitlebar
         :save-status="saveStatus"
@@ -17,7 +15,6 @@
       <div
         id="main-canvas"
         class="flex-grow-1 position-relative"
-        role="main"
       >
         <WorkflowCanvas
           ref="canvas"
diff --git a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
index 906985e7f8a..896956838a7 100644
--- a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
@@ -2,7 +2,6 @@
   <section
     class="d-flex flex-wrap align-items-center justify-content-between"
     aria-labelledby="workflow-title"
-    role="region"
   >
     <div class="col-md-6 d-flex flex-column">
       <h2 class="mb-2">
diff --git a/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue b/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
index 761eaa0f541..540cfb7e101 100644
--- a/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/canvas/WorkflowCanvas.vue
@@ -2,6 +2,7 @@
   <div
     class="w-100 h-100 position-relative"
     role="region"
+    aria-label="Workflow Canvas"
   >
     <VueFlow
       v-if="!loading && !error"
@@ -25,6 +26,8 @@
       <Background
         pattern-color="var(--body-color)"
         :gap="16"
+        :aria-label="translate('COM_WORKFLOW_GRAPH_BACKGROUND')"
+        :title="translate('COM_WORKFLOW_GRAPH_BACKGROUND')"
       />
 
       <button

From 2897829165c2340c98ad4460976cc47e29bb4a13 Mon Sep 17 00:00:00 2001
From: Dileepadari <adaridileep@gmail.com>
Date: Tue, 5 Aug 2025 01:53:19 +0530
Subject: [PATCH 5/5] code quality increased in js

---
 .../com_workflow/layouts/toolbar/redo.php     |  8 ++-
 .../com_workflow/layouts/toolbar/undo.php     | 10 +++-
 .../resources/scripts/components/Titlebar.vue | 58 +++++++++----------
 3 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/administrator/components/com_workflow/layouts/toolbar/redo.php b/administrator/components/com_workflow/layouts/toolbar/redo.php
index d191a102415..fb63baf3f21 100644
--- a/administrator/components/com_workflow/layouts/toolbar/redo.php
+++ b/administrator/components/com_workflow/layouts/toolbar/redo.php
@@ -18,8 +18,14 @@
 
 ?>
 <joomla-toolbar-button>
-    <button class="btn btn-info action-button" onclick="WorkflowGraph.Event.fire('onClickRedoWorkflow');" tabindex="0">
+    <button id="redo-workflow" class="btn btn-info action-button" tabindex="0">
         <span class="icon-redo icon-fw" aria-hidden="true"></span>
         <?php echo Text::_('COM_WORKFLOW_REDO'); ?>
     </button>
 </joomla-toolbar-button>
+
+<script>
+    document.getElementById('redo-workflow')?.addEventListener('click', () => {
+        WorkflowGraph.Event.fire('onClickRedoWorkflow');
+    });
+</script>
diff --git a/administrator/components/com_workflow/layouts/toolbar/undo.php b/administrator/components/com_workflow/layouts/toolbar/undo.php
index 32c64579678..2e16cfc5901 100644
--- a/administrator/components/com_workflow/layouts/toolbar/undo.php
+++ b/administrator/components/com_workflow/layouts/toolbar/undo.php
@@ -18,8 +18,16 @@
 
 ?>
 <joomla-toolbar-button>
-    <button class="btn btn-info action-button" onclick="WorkflowGraph.Event.fire('onClickUndoWorkflow');" tabindex="0">
+    <button id="undo-workflow" class="btn btn-info action-button" tabindex="0">
         <span class="icon-undo-2 icon-fw" aria-hidden="true"></span>
         <?php echo Text::_('COM_WORKFLOW_UNDO'); ?>
     </button>
 </joomla-toolbar-button>
+
+
+<script>
+    document.getElementById('undo-workflow')?.addEventListener('click', () => {
+        WorkflowGraph.Event.fire('onClickUndoWorkflow');
+    });
+</script>
+
diff --git a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
index 896956838a7..a9fc85b16e5 100644
--- a/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/Titlebar.vue
@@ -11,37 +11,33 @@
         class="d-flex align-items-center flex-wrap mb-0"
         aria-label="workflow details"
       >
-        <div class="me-3 mb-1 d-flex">
-          <dt class="visually-hidden">
-            {{ sprintf('COM_WORKFLOW_GRAPH_STATUS', workflow.published ? 'COM_WORKFLOW_GRAPH_ENABLED' : 'COM_WORKFLOW_GRAPH_DISABLED') }}
-          </dt>
-          <dd>
-            <span
-              class="badge"
-              :class="workflow.published ? 'bg-success' : 'bg-warning'"
-              role="status"
-            >
-              {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
-            </span>
-          </dd>
-        </div>
-        <div class="me-3 mb-1 d-flex">
-          <dt class="visually-hidden">
-            {{ sprintf('COM_WORKFLOW_GRAPH_STAGE_COUNT', stagesCount) }}
-          </dt>
-          <dd>
-            {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
-          </dd>
-        </div>
-        <div class="me-3 mb-1 d-flex">
-          <dt class="visually-hidden">
-            {{ sprintf('COM_WORKFLOW_GRAPH_TRANSITION_COUNT', transitionsCount) }}
-          </dt>
-          <dd>
-            {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION') :
-              translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
-          </dd>
-        </div>
+        <dt class="visually-hidden">
+          {{ sprintf('COM_WORKFLOW_GRAPH_STATUS', workflow.published ? 'COM_WORKFLOW_GRAPH_ENABLED' : 'COM_WORKFLOW_GRAPH_DISABLED') }}
+        </dt>
+        <dd class="me-3 mb-1 d-flex">
+          <span
+            class="badge"
+            :class="workflow.published ? 'bg-success' : 'bg-warning'"
+            role="status"
+          >
+            {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
+          </span>
+        </dd>
+
+        <dt class="visually-hidden">
+          {{ sprintf('COM_WORKFLOW_GRAPH_STAGE_COUNT', stagesCount) }}
+        </dt>
+        <dd class="me-3 mb-1 d-flex">
+          {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
+        </dd>
+
+        <dt class="visually-hidden">
+          {{ sprintf('COM_WORKFLOW_GRAPH_TRANSITION_COUNT', transitionsCount) }}
+        </dt>
+        <dd class="me-3 mb-1 d-flex">
+          {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION')
+            : translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
+        </dd>
       </dl>
     </div>
     <div