From 51c1948fc2f2e8e63ac5fe01788ef4684d09ab89 Mon Sep 17 00:00:00 2001
From: Sebastian Ferreyra Pons <ushiferreyra@gmail.com>
Date: Fri, 9 Dec 2022 12:30:43 -0300
Subject: [PATCH] Auto stash before checking out "origin/dev"

closes #604

- spacebar scrolling disabled when focused
- added theme props for focus outline
- added ariaDescribedBy and ariaLabel

- added `padding` and `textAlign` props

- renamed from `Switch`
- added keyboard support
- added theme prop `focusOutline`
- added theme prop `knobColor`
- No longer using radio buttons

- added keyboard support
- replaced message by `MessageView` component
- added `selectedKeyBackgroundColor` and `selectedKeyTextColor` theme props
- added `focusedKeyColorText` theme props
- added `hoverColorBar` and `hoverColorText` props
- added `refRectColor`, `refRectStrokeColor` and `refTextFill` theme props
- `valueAccessor` has reactive default value https://github.com/sveltejs/svelte/issues/4442
---
 .../ui/src/{Switch.svelte => Toggle.svelte}   | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)
 rename packages/components/ui/src/{Switch.svelte => Toggle.svelte} (87%)

diff --git a/packages/components/ui/src/Switch.svelte b/packages/components/ui/src/Toggle.svelte
similarity index 87%
rename from packages/components/ui/src/Switch.svelte
rename to packages/components/ui/src/Toggle.svelte
index 137d556b6..b5fb7edf8 100644
--- a/packages/components/ui/src/Switch.svelte
+++ b/packages/components/ui/src/Toggle.svelte
@@ -5,10 +5,11 @@
 
 	const dispatch = createEventDispatcher();
 	const defaultTheme = {
-		height: '24px',
 		color: 'black',
 		backgroundColor: 'white',
-		knobColor: 'lightgrey'
+		focusOutline: '2px auto black',
+		height: '24px',
+		knobColor: 'lightgrey',
 	}
 
 	// mandatory
@@ -32,12 +33,20 @@
 		currentValue = currentValue === values[0] ? values[1] : values[0];
 		dispatch('toggled', currentValue);
 	}
+	const onKeypress = event => {
+		if (event.keyCode === 13 || event.key === ' ') {
+			event.preventDefault();
+			toggle();
+		}
+	}
 </script>
 
-<div class='switch' {style} on:click={toggle}>
+<div class='switch' {style}>
 	<fieldset
-		role='radiogroup'
 		aria-label='Select between {values[0]} and {values[1]}'
+		role='select'
+		on:keypress={onKeypress}
+		tabindex=0
 	>
 		<legend>Select between {values[0]} and {values[1]}</legend>
 		{#if !hideLabels}
@@ -46,19 +55,11 @@
 			>{values[0]}</label>
 			<!-- class:greyed={currentValue !== values[0]} -->
 		{/if}
-		<span class='wrapper' class:isRight>
-			<input
-				type='radio'
-				id='left-{id}'
-				bind:group={currentValue}
-				value='{values[0]}'
-			>
-			<input
-				type='radio'
-				id='right-{id}'
-				bind:group={currentValue}
-				value='{values[1]}'
-			>
+		<span
+			class='wrapper'
+			class:isRight
+			on:click={toggle}
+		>
 			<span aria-hidden='true' class='bkg'></span>
 			<span aria-hidden='true' class='knob'></span>
 		</span>
@@ -116,6 +117,10 @@
 		position: relative;
 	}
 
+	fieldset:focus-visible {
+		outline: var(--focusOutline);
+	}
+
 	.knob {
 		--border: 1px;
 		--diameter: calc(var(--height) - 2 * var(--border));