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

refactor(svelte): change a11y inline styles to classes

Browse Source 
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.
This commit is contained in:
Tzu-Yu Lee
2025-05-17 03:00:59 +08:00
parent 5ab92e2478
commit dc25f1c833
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>