alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5271 from leejuyuu/minimize-inline-style

Browse Source 
refactor(svelte): change a11y inline styles to classes
This commit is contained in:
Peter Kogo
2025-06-02 11:51:01 +02:00
committed by GitHub
parent 5c2d6f38fb 5224a1a252
commit 3b36b7c8a6
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/nine-crabs-help.md
+5
View File
@@ -0,0 +1,5 @@
---
'@xyflow/svelte': patch
---
Change a11y description inline styles to classes
packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+21 -3
View File
@@ -6,14 +6,14 @@
let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props(); let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
</script> </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. Press enter or space to select a node.
{#if !store.disableKeyboardA11y} {#if !store.disableKeyboardA11y}
You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around.
{/if} {/if}
Press delete to remove it and escape to cancel. Press delete to remove it and escape to cancel.
</div> </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 Press enter or space to select an edge. You can then press delete to remove it or escape to
cancel. cancel.
</div> </div>
@@ -23,8 +23,26 @@
id={`${ARIA_LIVE_MESSAGE}-${store.flowId}`} id={`${ARIA_LIVE_MESSAGE}-${store.flowId}`}
aria-live="assertive" aria-live="assertive"
aria-atomic="true" 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} {store.ariaLiveMessage}
</div> </div>
{/if} {/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>