feat: Assess and improve accessibility

.changeset/improve-accessibility.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+Audit and improve accessibility

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

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

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>

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>
     );

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>
   );
 }