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

5
.changeset/nine-crabs-help.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@xyflow/svelte': patch
---
Change a11y description inline styles to classes

24
packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
View File

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