accessibility improved

Author: Dileepadari

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"

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">

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