css issues cleared and tab logic enhanced

Author: Dileepadari

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

@@ -11,7 +11,7 @@
       class="workflow-canvas"
       fit-view-on-init
       max-zoom="2.5"
-      min-zoom="0.3"
+      min-zoom=".3"
       :nodes="positionedNodes"
       :edges="styledEdges"
       :node-types="nodeTypes"
@@ -35,7 +35,7 @@
         pannable
         zoomable
         :node-color="(node) => node.data?.stage?.color || '#0d6efd'"
-        :mask-color="'rgba(255, 255, 255, 0.6)'"
+        :mask-color="'rgba(255, 255, 255, .6)'"
         :aria-label="translate('COM_WORKFLOW_GRAPH_MINIMAP')"
       />
       <CustomControls aria-label="Graph controls" />
@@ -108,7 +108,7 @@ export default {
     const selectedTransition = ref(null);
     const liveRegion = ref(null);
     const saveStatus = ref('upToDate');
-    const currentFocusMode = ref('stages');
+    const currentFocusMode = ref('links');
     const previouslyFocusedElement = ref(null);
 
     const stages = computed(() => store.getters.stages || []);
@@ -332,7 +332,7 @@ export default {
 
     watch([positionedNodes, styledEdges], () => {
       setTimeout(() => {
-        fitView({ padding: 0.2, duration: 300 });
+        fitView({ padding: 0.7, duration: 300 });
       }, 0);
     });
 

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

@@ -22,16 +22,16 @@
       @focus="onEdgeFocus"
       @blur="onEdgeBlur"
     >
-      <div class="d-flex align-items-center border text-bg-info rounded shadow-sm px-2 py-1 gap-1">
-        <h3
-          class="h3 text-truncate text-center text-white flex-grow-1 fw-semibold"
+      <div class="d-flex align-items-center border text-bg-primary rounded shadow-sm px-2 py-1 gap-1 h-40 m-auto">
+        <span
+          class="h3 d-block text-truncate text-center text-white flex-grow-1 fw-semibold h-100 m-auto align-content-center"
           :style="{ maxWidth: data?.isTransitionMode ? '80px' : '100%' }"
           :title="data?.title"
         >
           {{ data?.title }}
-        </h3>
+        </span>
         <button
-          class="btn btn-lg btn-secondary py-0 px-1"
+          class="btn btn-md btn-secondary py-0 px-1"
           :class="data?.isTransitionMode ? 'd-block' : 'd-none'"
           :aria-label="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
           :title="translate('COM_WORKFLOW_GRAPH_EDIT_TRANSITION')"
@@ -43,14 +43,14 @@
           />
         </button>
         <button
-          class="btn btn-lg btn-danger py-0 px-1"
+          class="btn btn-md btn-danger py-0 px-1"
           :class="data?.isTransitionMode ? 'd-block' : 'd-none'"
           :aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION')"
           :title="translate('COM_WORKFLOW_GRAPH_DELETE_TRANSITION')"
           @click.stop="data?.onDelete?.()"
         >
           <i
-            class="icon icon-delete"
+            class="icon icon-trash"
             aria-hidden="true"
           />
         </button>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="stage-node card p-3 border shadow-sm position-relative"
+    class="stage-node card p-2 border shadow-sm position-relative"
     :class="{ 'shadow': isSelected, 'hover-shadow': !isSelected }"
     :style="stageStyle"
     tabindex="0"
@@ -39,12 +39,12 @@
     <!-- Stage Header -->
     <div class="card-header d-flex justify-content-between align-items-start p-1">
       <div class="flex-fill w-75 me-3 min-width-0">
-        <h2
-          class="h3 card-title mb-1 fw-semibold text-truncate"
+        <span
+          class="h3 d-block card-title mb-1 fw-semibold text-truncate"
           :title="stage?.title"
         >
           {{ stage.title }}
-        </h2>
+        </span>
         <p
           class="card-text text-muted mb-0 text-truncate"
           :title="stage?.description"
@@ -71,6 +71,7 @@
         </button>
         <button
           class="btn btn-lg btn-danger py-0 px-1"
+          :class="stage.default ? 'd-none' : ''"
           :aria-label="translate('COM_WORKFLOW_GRAPH_DELETE_STAGE')"
           :title="translate('COM_WORKFLOW_GRAPH_DELETE_STAGE')"
           @click.stop="data.onDelete"
@@ -83,8 +84,8 @@
       </div>
     </div>
 
-    <div class="card-body p-1 pt-0">
-      <div class="d-flex justify-content-between align-items-center mb-2">
+    <div class="card-body px-1 py-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span
           :class="stage.published ? 'bg-success' : 'bg-danger'"
           class="badge rounded-pill p-1"

administrator/components/com_workflow/resources/scripts/utils/keyboard-manager.es6.js

@@ -38,6 +38,15 @@ export function setupGlobalShortcuts({
       return;
     }
 
+    const groupSelectors = {
+      buttons: 'button[tabindex="0"], button:not([tabindex="-1"])',
+      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"])',
+    };
+
     function moveNode(stageId, direction, fast = false) {
       const el = document.querySelector(`.stage-node[data-stage-id='${stageId}']`);
       if (!el) return;
@@ -125,10 +134,16 @@ export function setupGlobalShortcuts({
         fitView();
         break;
 
-      case e.key === 'Tab':
+      case e.key === 'Tab': {
         e.preventDefault();
-        cycleMode(['stages', 'transitions', 'toolbar', 'actions', 'links', 'buttons'], state.currentFocusMode, state.liveRegion);
+        cycleMode(['buttons', 'stages', 'transitions', 'toolbar', 'actions', 'links'], state.currentFocusMode, state.liveRegion);
+        const tabSelector = groupSelectors[state.currentFocusMode.value];
+        if (tabSelector) {
+          const first = document.querySelector(tabSelector);
+          if (first) first.focus();
+        }
         break;
+      }
 
       case ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key):
         e.preventDefault();
@@ -145,14 +160,6 @@ export function setupGlobalShortcuts({
           }
         } 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);

administrator/components/com_workflow/resources/scripts/workflowgraph.es6.js

@@ -10,6 +10,11 @@ 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) {

build/media_source/com_workflow/scss/components/_workflow-graph-custom.scss

@@ -1,4 +1,4 @@
-/* ───── Layout ───── */
+/* ----- Layout ----- */
 .workflow-canvas {
   background-color: var(--primary-rgb);
   background-image: linear-gradient(var(--primary-border-subtle) 1px, transparent 1px),
@@ -18,7 +18,11 @@
   min-width: 0;
 }
 
-/* ───── Edges ───── */
+.h-40 {
+  height: 40px;
+}
+
+/* ----- Edges ----- */
 .vue-flow__edge-path {
   stroke-width: 2;
   transition: stroke .2s ease, stroke-width .2s ease;
@@ -33,7 +37,7 @@
   stroke-width: 3;
 }
 
-/* ───── Edge Labels ───── */
+/* ----- Edge Labels ----- */
 .vue-flow__edge-label {
   padding: 4px 8px;
   font-size: 12px;
@@ -50,19 +54,13 @@
   border-color: var(--gray-400);
 }
 
-/* ───── Controls & Minimap ───── */
+/* ----- Controls & Minimap ----- */
 .vue-flow__controls,
 .vue-flow__minimap {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
 }
 
-.vue-flow__controls button:focus,
-.vue-flow__minimap:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-/* ───── Nodes ───── */
+/* ----- Nodes ----- */
 .stage-node {
   position: relative;
 }
@@ -81,36 +79,33 @@
   max-width: 250px !important;
 }
 
-/* ───── Handle ───── */
+/* ----- Handle ----- */
 .vue-flow__handle {
   opacity: 0;
   transition: opacity .2s;
 }
 
-/* ───── Card Actions ───── */
+/* ----- Card Actions ----- */
 .stage-card-actions button {
   --btn-padding-x: 2px !important;
   --btn-padding-y: 0 !important;
 }
 
-/* ───── Text Truncation ───── */
+/* ----- Text Truncation ----- */
 .line-clamp-2 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   line-clamp: 2;
 }
 
-/* ───── Accessibility ───── */
-:focus {
-  outline: 3px solid var(--primary) !important;
-  outline-offset: 2px;
-}
-
-.stage-node:focus,
-.edge-label:focus,
-button:focus {
-  box-shadow: 0 0 0 3px var(--primary);
+/* ----- 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,
@@ -125,7 +120,7 @@ button:focus {
   border: 0;
 }
 
-/* ───── Custom Controls ───── */
+/* ----- Custom Controls ----- */
 .custom-controls {
   position: absolute;
   right: 20px;
@@ -141,11 +136,6 @@ button:focus {
   box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
 }
 
-.custom-controls:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
 .custom-controls-button {
   display: flex;
   align-items: center;

build/media_source/com_workflow/scss/components/_workflow-vue-controls.scss

@@ -1,9 +1,9 @@
-/* ───── Controls Container ───── */
+/* ----- Controls Container ----- */
 .vue-flow__controls {
   box-shadow: 0 0 2px 1px var(--shadow-subtle);
 }
 
-/* ───── Controls Buttons ───── */
+/* ----- Controls Buttons ----- */
 .vue-flow__controls-button {
   box-sizing: content-box;
   display: flex;
@@ -19,19 +19,19 @@
   border-bottom: 1px solid var(--border-light);
 }
 
-/* ───── SVG Icon Styling ───── */
+/* ----- SVG Icon Styling ----- */
 .vue-flow__controls-button svg {
   width: 100%;
   max-width: 12px;
   max-height: 12px;
 }
 
-/* ───── Button Hover ───── */
+/* ----- Button Hover ----- */
 .vue-flow__controls-button:hover {
   background: var(--button-hover-bg);
 }
 
-/* ───── Button Disabled ───── */
+/* ----- Button Disabled ----- */
 .vue-flow__controls-button:disabled {
   pointer-events: none;
 }

build/media_source/com_workflow/scss/components/_workflow-vue-minimap.scss

@@ -1,5 +1,5 @@
 .vue-flow__minimap {
-  background-color: #fff;
+  background-color: var(--bg-normal);
 }
 
 .vue-flow__minimap.pannable {