accessibility improved

Author: Dileepadari

administrator/components/com_admin/sql/updates/mysql/6.0.0-2025-07-03.sql

@@ -2,13 +2,11 @@
   <main
     id="workflow-app"
     class="d-flex flex-column flex-grow-1 min-vh-80"
-    role="main"
     aria-labelledby="workflow-main-title"
   >
     <header
       id="workflow-header"
       class="d-flex flex-column flex-shrink-0"
-      role="banner"
     >
       <WorkflowTitlebar
         :save-status="saveStatus"
@@ -19,7 +17,6 @@
       <section
         id="main-canvas"
         class="flex-grow-1 position-relative"
-        role="application"
         aria-label="Workflow Canvas Application"
         aria-describedby="canvas-description"
       >

administrator/components/com_admin/sql/updates/postgresql/6.0.0-2025-07-03.sql

@@ -2,7 +2,6 @@
   <section
     class="d-flex flex-wrap align-items-center justify-content-between"
     aria-labelledby="workflow-main-title"
-    role="banner"
   >
     <div class="col-md-6 d-flex flex-column">
       <h1
@@ -15,48 +14,42 @@
         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">
-            Status:
-          </dt>
-          <dd class="mb-0">
-            <span
-              class="badge"
-              :class="workflow.published ? 'bg-success' : 'bg-warning'"
-              role="status"
-              :aria-label="`Status: ${workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED')}`"
-            >
-              {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
-            </span>
-          </dd>
-        </div>
+        <dt class="visually-hidden">
+          Status:
+        </dt>
+        <dd class="me-3 mb-1 d-flex mb-0">
+          <span
+            class="badge"
+            :class="workflow.published ? 'bg-success' : 'bg-warning'"
+            role="status"
+            :aria-label="`Status: ${workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED')}`"
+          >
+            {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
+          </span>
+        </dd>
 
-        <div class="me-3 mb-1 d-flex">
-          <dt class="visually-hidden">
-            Stage Count:
-          </dt>
-          <dd class="mb-0">
-            <span aria-label="`${stagesCount} ${stagesCount === 1 ? 'stage' : 'stages'} in workflow`">
-              {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
-            </span>
-          </dd>
-        </div>
+        <dt class="visually-hidden">
+          Stage Count:
+        </dt>
+        <dd class="me-3 mb-1 d-flex mb-0">
+          <span>
+            {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
+          </span>
+        </dd>
 
-        <div class="me-3 mb-1 d-flex">
-          <dt class="visually-hidden">
-            Transition Count:
-          </dt>
-          <dd class="mb-0">
-            <span :aria-label="`${transitionsCount} ${transitionsCount === 1 ? 'transition' : 'transitions'} in workflow`">
-              {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION')
-              : translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
-            </span>
-          </dd>
-        </div>
+        <dt class="visually-hidden">
+          Transition Count:
+        </dt>
+        <dd class="me-3 mb-1 d-flex mb-0">
+          <span>
+            {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION')
+            : translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
+          </span>
+        </dd>
       </dl>
     </div>
 
-    <aside
+    <div
       id="save-status"
       class="mb-2 fw-bold"
       role="status"
@@ -71,7 +64,7 @@
           ? translate('COM_WORKFLOW_GRAPH_UNSAVED_CHANGES')
           : translate('COM_WORKFLOW_GRAPH_UP_TO_DATE')
       }}
-    </aside>
+    </div>
   </section>
 </template>
 

administrator/components/com_workflow/resources/scripts/components/App.vue

@@ -3,7 +3,7 @@
     position="top-left"
     aria-labelledby="controls-panel-title"
     class="d-flex gap-2 p-2"
-    role="toolbar"
+    role="group"
   >
     <h2 id="controls-panel-title" class="visually-hidden">Workflow Creation Controls</h2>
 

administrator/components/com_workflow/resources/scripts/components/Titlebar.vue

@@ -1,9 +1,8 @@
 <template>
-  <nav
+  <div
     ref="controlsContainer"
     class="custom-controls z-10"
-    tabindex="0"
-    role="toolbar"
+    role="group"
     aria-labelledby="canvas-controls-title"
   >
     <h2 id="canvas-controls-title" class="visually-hidden">Canvas View Controls</h2>
@@ -55,7 +54,7 @@
         </button>
       </li>
     </ul>
-  </nav>
+  </div>
 </template>
 
 <script>

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

@@ -218,7 +218,7 @@ public function updateStagesPosition()
             }
 
             $app        = $this->app;
-            $input      = $app->input;
+            $input      = $app->getInput();
             $workflowId = $input->getInt('id');
             $positions  = $input->get('positions', [], 'array');
             $model      = $this->getModel('Stages', 'Administrator');

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

@@ -81,5 +81,5 @@
 <template id="shortcuts-popup-content">
     <?php echo implode($shortcutsHtml); ?>
 </template>
-<section id="workflow-graph-root" role="region" aria-label="Workflow graph"></section>
+<section id="workflow-graph-root" aria-label="Workflow graph"></section>
 <script type="module" src="<?php echo $script ?>"></script>