From dc25f1c833767d8ec8471f673b233c3f20adfe78 Mon Sep 17 00:00:00 2001
From: Tzu-Yu Lee <leejuyuu@gmail.com>
Date: Sat, 17 May 2025 03:00:59 +0800
Subject: [PATCH 1/2] refactor(svelte): change a11y inline styles to classes

In some environments, inline styles are not permitted due to security
issues (e.g. strict CSP). The a11y messages will be visible in these
environments due to browsers blocking inline styles.

Change the inline styles to use classes instead.
---
 .../A11yDescriptions/A11yDescriptions.svelte  | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
index a26778c1..a9716478 100644
--- a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+++ b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
@@ -6,14 +6,14 @@
   let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
 </script>
 
-<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
+<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   Press enter or space to select a node.
   {#if !store.disableKeyboardA11y}
     You can then use the arrow keys to move the node around.
   {/if}
   Press delete to remove it and escape to cancel.
 </div>
-<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
+<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   Press enter or space to select an edge. You can then press delete to remove it or escape to
   cancel.
 </div>
@@ -23,8 +23,26 @@
     id={`${ARIA_LIVE_MESSAGE}-${store.flowId}`}
     aria-live="assertive"
     aria-atomic="true"
-    style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);"
+    class="a11y-live-msg"
   >
     {store.ariaLiveMessage}
   </div>
 {/if}
+
+<style>
+  .a11y-hidden {
+    display: none;
+  }
+
+  .a11y-live-msg {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0px, 0px, 0px, 0px);
+    clip-path: inset(100%);
+  }
+</style>

From 5224a1a252eee59ffc48fffd74872206e19207f3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 May 2025 08:56:10 +0200
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/nine-crabs-help.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nine-crabs-help.md

diff --git a/.changeset/nine-crabs-help.md b/.changeset/nine-crabs-help.md
new file mode 100644
index 00000000..747174ac
--- /dev/null
+++ b/.changeset/nine-crabs-help.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Change a11y description inline styles to classes