From d1d3d19f4fc748db52b5f416ca53d58122899dc3 Mon Sep 17 00:00:00 2001
From: Cheryl Kong <cherylkong50@gmail.com>
Date: Wed, 24 Jun 2026 10:25:00 +0100
Subject: [PATCH 1/6] feat: add ARIA labels and semantic HTML for accessibility

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
---
 .../src/diagram-editor/DiagramEditor.tsx      |  1 +
 .../diagram-editor/error-pages/ErrorPage.tsx  |  2 +-
 .../src/react-flow/diagram/Diagram.tsx        |  7 ++++++-
 .../src/react-flow/nodes/Nodes.tsx            |  7 ++++++-
 .../src/side-panel/SidePanel.tsx              | 21 ++++++++++++-------
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx
index 81a9444c..4521b121 100644
--- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx
@@ -95,6 +95,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
   return (
     <div
       className={`dec-root${resolvedColorMode === "dark" ? " dark" : ""}`}
+      lang={locale}
       data-testid={"dec-root"}
     >
       <I18nProvider locale={locale} dictionaries={dictionaries}>
diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx
index f00b6159..eaf81348 100644
--- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx
@@ -23,7 +23,7 @@ type ErrorPageProps = {
 
 export const ErrorPage = ({ title, message, snippet }: ErrorPageProps) => {
   return (
-    <div className="dec:p-6">
+    <div role="alert" aria-live="assertive" className="dec:p-6">
       <div className="dec:flex dec:items-center dec:gap-2">
         <AlertTriangle className="dec:size-5 dec:shrink-0 dec:text-red-600 dec:dark:text-red-400" />
         <h2 className="dec:text-base dec:font-semibold dec:text-gray-900 dec:dark:text-gray-100">
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
index 34dd9caf..c7a638e3 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
@@ -175,7 +175,12 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
           position={"bottom-right"}
           showInteractive={false}
         >
-          <RF.ControlButton onClick={() => setMinimapVisible(!minimapVisible)}>M</RF.ControlButton>
+          <RF.ControlButton
+            onClick={() => setMinimapVisible(!minimapVisible)}
+            aria-label={minimapVisible ? "Hide minimap" : "Show minimap"}
+          >
+            M
+          </RF.ControlButton>
         </RF.Controls>
         <RF.Background className="diagram-background" variant={RF.BackgroundVariant.Cross} />
       </RF.ReactFlow>
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index 9a9efe60..5870d9ff 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -95,7 +95,12 @@ function TaskNodeBadge({ badge, testId }: BadgeProps) {
   if (isUnknown) {
     /* TODO: instead of using the browser default to display tool tip like below, replace with tooltip component when we add it */
     return (
-      <span title={badge} className="dec-task-node-badge-custom" data-testid={`${testId}-custom`}>
+      <span
+        title={badge}
+        aria-label={`Badge: ${badge}`}
+        className="dec-task-node-badge-custom"
+        data-testid={`${testId}-custom`}
+      >
         {badge}
       </span>
     );
diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
index b8b6ae4b..00ce09fb 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
@@ -61,11 +61,16 @@ export function SidePanel() {
   }, [selectedNodeId, setOpen]);
 
   return (
-    <Sidebar side="right">
-      <SidebarHeader>
+    <Sidebar
+      side="right"
+      aria-label={selectedNode ? "Node details panel" : "Workflow information panel"}
+      role="complementary"
+    >
+      <SidebarHeader role="banner">
         <div className="dec-sidebar-header-title">
           <span
             className={`dec-sidebar-header-icon-wrap${nodeConfig ? " colored" : ""}`}
+            aria-hidden="true"
             style={
               nodeConfig
                 ? ({ "--task-node-color": nodeConfig.color } as React.CSSProperties)
@@ -84,22 +89,24 @@ export function SidePanel() {
           </div>
         </div>
       </SidebarHeader>
-      <SidebarContent>
+      <SidebarContent aria-label="Panel content" role="region">
         {selectedNode ? (
           <NodeDetailsView node={selectedNode} />
         ) : (
           <>
             <div className="dec-sidebar-hint">
-              <Info className="dec-sidebar-hint-icon" />
+              <Info className="dec-sidebar-hint-icon" aria-hidden="true" />
               <span className="dec-sidebar-hint-text">{t("sidebar.selectNode")}</span>
             </div>
             {model !== null ? <WorkflowInfoView document={model.document} /> : null}
           </>
         )}
       </SidebarContent>
-      <SidebarFooter>
-        {model !== null && selectedNodeId === null && <MermaidActions model={model} />}
-      </SidebarFooter>
+      {model !== null && selectedNodeId === null ? (
+        <SidebarFooter aria-label="Export actions" role="contentinfo">
+          <MermaidActions model={model} />
+        </SidebarFooter>
+      ) : null}
     </Sidebar>
   );
 }

From 42ad8aa22a56c2f7644c261e728c8f40f050adc7 Mon Sep 17 00:00:00 2001
From: Cheryl Kong <cherylkong50@gmail.com>
Date: Wed, 24 Jun 2026 16:14:45 +0100
Subject: [PATCH 2/6] add changeset

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
---
 .changeset/improve-accessibility.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/improve-accessibility.md

diff --git a/.changeset/improve-accessibility.md b/.changeset/improve-accessibility.md
new file mode 100644
index 00000000..beb82b66
--- /dev/null
+++ b/.changeset/improve-accessibility.md
@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+Audit and improve accessibility

From 74843ffedd805ac1678a23574208f95c6952b1b4 Mon Sep 17 00:00:00 2001
From: Cheryl Kong <cherylkong50@gmail.com>
Date: Wed, 24 Jun 2026 16:39:28 +0100
Subject: [PATCH 3/6] fix copilot complaints

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
---
 .../src/diagram-editor/error-pages/ErrorPage.tsx             | 5 ++++-
 .../src/side-panel/SidePanel.tsx                             | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx
index eaf81348..2b1c1ccc 100644
--- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx
@@ -25,7 +25,10 @@ export const ErrorPage = ({ title, message, snippet }: ErrorPageProps) => {
   return (
     <div role="alert" aria-live="assertive" className="dec:p-6">
       <div className="dec:flex dec:items-center dec:gap-2">
-        <AlertTriangle className="dec:size-5 dec:shrink-0 dec:text-red-600 dec:dark:text-red-400" />
+        <AlertTriangle
+          className="dec:size-5 dec:shrink-0 dec:text-red-600 dec:dark:text-red-400"
+          aria-hidden="true"
+        />
         <h2 className="dec:text-base dec:font-semibold dec:text-gray-900 dec:dark:text-gray-100">
           {title}
         </h2>
diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
index 00ce09fb..01d254f5 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
@@ -66,7 +66,7 @@ export function SidePanel() {
       aria-label={selectedNode ? "Node details panel" : "Workflow information panel"}
       role="complementary"
     >
-      <SidebarHeader role="banner">
+      <SidebarHeader>
         <div className="dec-sidebar-header-title">
           <span
             className={`dec-sidebar-header-icon-wrap${nodeConfig ? " colored" : ""}`}
@@ -103,7 +103,7 @@ export function SidePanel() {
         )}
       </SidebarContent>
       {model !== null && selectedNodeId === null ? (
-        <SidebarFooter aria-label="Export actions" role="contentinfo">
+        <SidebarFooter aria-label="Export actions">
           <MermaidActions model={model} />
         </SidebarFooter>
       ) : null}

From fe8410e4756b877a6cacf206e2a8c57f38558ce2 Mon Sep 17 00:00:00 2001
From: Cheryl Kong <cherylkong50@gmail.com>
Date: Fri, 26 Jun 2026 10:03:10 +0100
Subject: [PATCH 4/6] fix: add aria labels to en.ts

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
---
 .../src/components/ui/sidebar.tsx                         | 6 ++++--
 .../src/i18n/locales/en.ts                                | 8 ++++++++
 .../src/react-flow/diagram/Diagram.tsx                    | 4 +++-
 .../src/react-flow/nodes/Nodes.tsx                        | 3 ++-
 .../src/side-panel/SidePanel.tsx                          | 6 +++---
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/components/ui/sidebar.tsx b/packages/serverless-workflow-diagram-editor/src/components/ui/sidebar.tsx
index 56a477dd..a8aaae40 100644
--- a/packages/serverless-workflow-diagram-editor/src/components/ui/sidebar.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/components/ui/sidebar.tsx
@@ -20,6 +20,7 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { PanelRightIcon } from "lucide-react";
 import { Slot } from "radix-ui";
+import { useI18n } from "@serverlessworkflow/i18n";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -221,15 +222,16 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar();
+  const { t } = useI18n();
 
   return (
     <button
       data-sidebar="rail"
       data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
+      aria-label={t("aria.sidebar.toggle")}
       tabIndex={-1}
       onClick={toggleSidebar}
-      title="Toggle Sidebar"
+      title={t("sidebar.toggle")}
       className={cn(
         "dec:absolute dec:inset-y-0 dec:z-20 dec:hidden dec:w-4 dec:-translate-x-1/2 dec:transition-all dec:ease-linear dec:group-data-[side=left]:-right-4 dec:group-data-[side=right]:left-0 dec:after:absolute dec:after:inset-y-0 dec:after:left-1/2 dec:after:w-[2px] dec:hover:after:bg-sidebar-border dec:sm:flex",
         "dec:in-data-[side=left]:cursor-w-resize dec:in-data-[side=right]:cursor-e-resize",
diff --git a/packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts b/packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts
index 80c88cbb..24335387 100644
--- a/packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts
+++ b/packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts
@@ -43,6 +43,14 @@ export const en = {
   "sidebar.exportMermaid.copy": "Copy Mermaid Code",
   "sidebar.exportMermaid.download": "Download as Mermaid File",
   "sidebar.exportMermaid.copied": "Copied!",
+  "aria.minimap.hide": "Hide minimap",
+  "aria.minimap.show": "Show minimap",
+  "aria.badge": "Badge:",
+  "aria.sidebar.toggle": "Toggle Sidebar",
+  "aria.panel.nodeDetails": "Node details panel",
+  "aria.panel.workflowInfo": "Workflow information panel",
+  "aria.panel.content": "Panel content",
+  "aria.panel.exportActions": "Export actions",
 } as const;
 
 export type TranslationKeys = keyof typeof en;
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
index c7a638e3..95e147cd 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx
@@ -16,6 +16,7 @@
 
 import * as React from "react";
 import * as RF from "@xyflow/react";
+import { useI18n } from "@serverlessworkflow/i18n";
 import { ReactFlowNodeTypes } from "../nodes/Nodes";
 import "@xyflow/react/dist/style.css";
 import "./Diagram.css";
@@ -46,6 +47,7 @@ export type DiagramProps = {
 };
 
 export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
+  const { t } = useI18n();
   const reactFlowInstance: RF.ReactFlowInstance = RF.useReactFlow();
   const { model, errors, nodes, edges, isReadOnly, setNodes, setEdges, setSelectedNodeId } =
     useDiagramEditorContext();
@@ -177,7 +179,7 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
         >
           <RF.ControlButton
             onClick={() => setMinimapVisible(!minimapVisible)}
-            aria-label={minimapVisible ? "Hide minimap" : "Show minimap"}
+            aria-label={minimapVisible ? t("aria.minimap.hide") : t("aria.minimap.show")}
           >
             M
           </RF.ControlButton>
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index 5870d9ff..6b338a29 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -90,6 +90,7 @@ interface BadgeProps {
 }
 
 function TaskNodeBadge({ badge, testId }: BadgeProps) {
+  const { t } = useI18n();
   const isUnknown = !KNOWN_BADGES.has(badge.toLowerCase());
 
   if (isUnknown) {
@@ -97,7 +98,7 @@ function TaskNodeBadge({ badge, testId }: BadgeProps) {
     return (
       <span
         title={badge}
-        aria-label={`Badge: ${badge}`}
+        aria-label={`${t("aria.badge")} ${badge}`}
         className="dec-task-node-badge-custom"
         data-testid={`${testId}-custom`}
       >
diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
index 01d254f5..0d15e321 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx
@@ -63,7 +63,7 @@ export function SidePanel() {
   return (
     <Sidebar
       side="right"
-      aria-label={selectedNode ? "Node details panel" : "Workflow information panel"}
+      aria-label={selectedNode ? t("aria.panel.nodeDetails") : t("aria.panel.workflowInfo")}
       role="complementary"
     >
       <SidebarHeader>
@@ -89,7 +89,7 @@ export function SidePanel() {
           </div>
         </div>
       </SidebarHeader>
-      <SidebarContent aria-label="Panel content" role="region">
+      <SidebarContent aria-label={t("aria.panel.content")} role="region">
         {selectedNode ? (
           <NodeDetailsView node={selectedNode} />
         ) : (
@@ -103,7 +103,7 @@ export function SidePanel() {
         )}
       </SidebarContent>
       {model !== null && selectedNodeId === null ? (
-        <SidebarFooter aria-label="Export actions">
+        <SidebarFooter aria-label={t("aria.panel.exportActions")}>
           <MermaidActions model={model} />
         </SidebarFooter>
       ) : null}

From 2641c0f22520b8a7290ecda836bd1230797d4b29 Mon Sep 17 00:00:00 2001
From: Cheryl Kong <cherylkong50@gmail.com>
Date: Fri, 26 Jun 2026 10:37:32 +0100
Subject: [PATCH 5/6] test: replace render with renderWithProviders in node
 tests

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
---
 .../tests/react-flow/nodes/Nodes.test.tsx                   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx b/packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx
index 7298ec3e..1455adb1 100644
--- a/packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx
+++ b/packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx
@@ -234,7 +234,7 @@ describe("React Flow custom node types", () => {
           listen: { to: { any: [] } },
         }),
       ];
-      render(
+      renderWithProviders(
         <div>
           <RF.ReactFlow nodeTypes={ReactFlowNodeTypes} nodes={nodesWithBadges} edges={allEdges} />
         </div>,
@@ -255,7 +255,7 @@ describe("React Flow custom node types", () => {
           call: "customCall",
         }),
       ];
-      render(
+      renderWithProviders(
         <div>
           <RF.ReactFlow
             nodeTypes={ReactFlowNodeTypes}
@@ -281,7 +281,7 @@ describe("React Flow custom node types", () => {
           fork: { branches: [], compete: true },
         }),
       ];
-      render(
+      renderWithProviders(
         <div>
           <RF.ReactFlow
             nodeTypes={ReactFlowNodeTypes}

From c67bcf61d353c796cf629b4e07bc005becaef4e5 Mon Sep 17 00:00:00 2001
From: Cheryl Kong <cherylkong50@gmail.com>
Date: Fri, 26 Jun 2026 10:56:20 +0100
Subject: [PATCH 6/6] trigger checks

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
---
 pnpm-lock.yaml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d884288..5e458c15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ catalogs:
     jsdom:
       specifier: ^29.1.0
       version: 29.1.1
+    lint-staged:
+      specifier: ^17.0.8
+      version: 17.0.8
     lucide-react:
       specifier: ^1.21.0
       version: 1.21.0
@@ -153,7 +156,7 @@ importers:
         specifier: 'catalog:'
         version: 9.1.7
       lint-staged:
-        specifier: 17.0.8
+        specifier: 'catalog:'
         version: 17.0.8
       oxfmt:
         specifier: 'catalog:'