fix: ♿ improved accessibility by following Svelte's A11y warnings

gogogj7 · Jan 5, 2023 · e8f3d00 · e8f3d00
1 parent 4901cd8
commit e8f3d00
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 27 deletions.
diff --git a/src/components/Game.svelte b/src/components/Game.svelte
@@ -209,19 +209,28 @@
 		<Definition {word} alternates={2} />
 	{:else}
 		<!-- Fade with delay is to prevent a bright red button from appearing as soon as refresh is pressed -->
-		<div in:fade={{ delay: 300 }} class="button concede" on:click={concede}>give up</div>
+		<div
+			in:fade={{ delay: 300 }}
+			class="button concede"
+			on:click={concede}
+			on:keydown={concede}
+		>
+			give up
+		</div>
 	{/if}
 </Modal>
 
 <Modal fullscreen={true} bind:visible={showSettings}>
 	<Settings state={game} on:historical={() => (showHistorical = true)} />
 	{#if game.active}
-		<div class="button concede" on:click={concede}>give up</div>
+		<div class="button concede" on:click={concede} on:keydown={concede}>give up</div>
 	{/if}
 	<Tips change={showSettings} />
 
 	<svelte:fragment slot="footer">
-		<a href="https://www.nytimes.com/games/wordle/" target="_blank">Original Wordle</a>
+		<a href="https://www.nytimes.com/games/wordle/" target="_blank" rel="noreferrer"
+			>Original Wordle</a
+		>
 		<div>
 			<div>v{version}</div>
 			<div

diff --git a/src/components/GameIcon.svelte b/src/components/GameIcon.svelte
@@ -2,7 +2,12 @@
 	export let onClick = () => {};
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" on:click={onClick}>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	on:click={onClick}
+	on:keypress={onClick}
+>
 	<slot />
 </svg>
 

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -36,6 +36,7 @@
 			</GameIcon>
 		{/if}
 	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<h1
 		on:click|self={() => {
 			$mode = ($mode + 1) % modeData.modes.length;
@@ -64,7 +65,12 @@
 		</GameIcon>
 	</div>
 	{#if tutorial}
-		<div transition:scale class="tutorial" on:click={() => dispatch("closeTutPopUp")}>
+		<div
+			transition:scale
+			class="tutorial"
+			on:click={() => dispatch("closeTutPopUp")}
+			on:keydown={() => dispatch("closeTutPopUp")}
+		>
 			Tap WORDLE+ to change game mode
 			<span class="ok">OK</span>
 		</div>

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -14,9 +14,14 @@
 	}
 </script>
 
-<div class:visible class="overlay {fullscreen ? 'fullscreen' : 'popup'}" on:click|self={close}>
+<div
+	class:visible
+	class="overlay {fullscreen ? 'fullscreen' : 'popup'}"
+	on:click|self={close}
+	on:keydown={close}
+>
 	<div class="modal">
-		<div class="exit" on:click={close}>
+		<div class="exit" on:click={close} on:keydown={close}>
 			<GameIcon>
 				<path
 					d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"

diff --git a/src/components/board/Board.svelte b/src/components/board/Board.svelte
@@ -65,7 +65,12 @@
 		</svg>
 	{/if}
 	{#if tutorial}
-		<div transition:scale class="tutorial" on:click={() => dispatch("closeTutPopUp")}>
+		<div
+			transition:scale
+			class="tutorial"
+			on:click={() => dispatch("closeTutPopUp")}
+			on:keydown={() => dispatch("closeTutPopUp")}
+		>
 			double tap (right click) a row to see a word's definition, or how many words could be
 			played there
 			<span class="ok">OK</span>

diff --git a/src/components/keyboard/Key.svelte b/src/components/keyboard/Key.svelte
@@ -7,6 +7,7 @@
 	const dispatch = createEventDispatcher();
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class={state} class:big={letter.length !== 1} on:click={() => dispatch("keystroke", letter)}>
 	{letter}<slot />
 </div>

diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
@@ -31,6 +31,7 @@
 <div class="outer">
 	<div class="settings-top">
 		<h3>settings</h3>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
 			on:click={() => {
 				if (!state.validHard) {
@@ -58,6 +59,7 @@
 				The game mode determines how often the word refreshes
 			</svelte:fragment>
 		</Setting>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<Setting type="custom" bind:value={$mode}>
 			<svelte:fragment slot="title">Play Historical Game</svelte:fragment>
 			<svelte:fragment slot="desc">
@@ -77,8 +79,12 @@
 			</svelte:fragment>
 		</Setting>
 		<div class="links">
-			<a href="https://github.com/MikhaD/wordle" target="_blank">Leave a ⭐</a>
-			<a href="https://github.com/MikhaD/wordle/issues" target="_blank">Report a Bug</a>
+			<a href="https://github.com/MikhaD/wordle" target="_blank" rel="noreferrer">
+				Leave a ⭐
+			</a>
+			<a href="https://github.com/MikhaD/wordle/issues" target="_blank" rel="noreferrer">
+				Report a Bug
+			</a>
 		</div>
 	</div>
 </div>

diff --git a/src/components/settings/Switch.svelte b/src/components/settings/Switch.svelte
@@ -3,6 +3,7 @@
 	export let disabled = false;
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click={(e) => !disabled && (value = !value)} class:checked={value} {disabled} />
 
 <style lang="scss">

diff --git a/src/components/widgets/Share.svelte b/src/components/widgets/Share.svelte
@@ -8,20 +8,20 @@
 	export let state: GameState;
 	const toaster = getContext<Toaster>("toaster");
 
-	$: stats = `${modeData.modes[$mode].name} Wordle+ #${state.wordNumber} ${
-		failed(state) ? "X" : state.guesses
-	}/${state.board.words.length}\n\n    ${state.board.state
-		.slice(0, state.guesses)
-		.map((r) => r.join(""))
-		.join("\n    ")}\nmikhad.github.io/wordle`;
+	function copyStats() {
+		navigator.clipboard.writeText(
+			`${modeData.modes[$mode].name} Wordle+ #${state.wordNumber} ${
+				failed(state) ? "X" : state.guesses
+			}/${state.board.words.length}\n\n    ${state.board.state
+				.slice(0, state.guesses)
+				.map((r) => r.join(""))
+				.join("\n    ")}\nmikhad.github.io/wordle`
+		);
+		toaster.pop("Copied");
+	}
 </script>
 
-<div
-	on:click={() => {
-		navigator.clipboard.writeText(stats);
-		toaster.pop("Copied");
-	}}
->
+<div on:click={copyStats} on:keydown={copyStats}>
 	share
 	<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
 		<path

diff --git a/src/components/widgets/Timer.svelte b/src/components/widgets/Timer.svelte
@@ -36,7 +36,11 @@
 			)}`.padStart(2, "0")}:{`${Math.floor((ms % MS.MINUTE) / MS.SECOND)}`.padStart(2, "0")}
 		</div>
 	{:else}
-		<div class="button" on:click={() => dispatch("reload")}>
+		<div
+			class="button"
+			on:click={() => dispatch("reload")}
+			on:keydown={() => dispatch("reload")}
+		>
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 				<path
 					d="M4.609 12c0-4.082 3.309-7.391 7.391-7.391a7.39 7.39 0 0 1 6.523 3.912l-1.653 1.567H22v-5.13l-1.572 1.659C18.652 3.841 15.542 2 12 2 6.477 2 2 6.477 2 12s4.477 10 10 10c4.589 0 8.453-3.09 9.631-7.301l-2.512-.703c-.871 3.113-3.73 5.395-7.119 5.395-4.082 0-7.391-3.309-7.391-7.391z"

diff --git a/src/components/widgets/Tips.svelte b/src/components/widgets/Tips.svelte
@@ -17,21 +17,30 @@
 	export let change: boolean;
 	let index = Math.floor(tips.length * Math.random());
 	$: if (change) index = Math.floor(tips.length * Math.random());
+
+	function nextTip() {
+		index = (index + 1) % tips.length;
+	}
+	function previousTip() {
+		index = (index - 1 + tips.length) % tips.length;
+	}
 </script>
 
 <div class="outer">
 	<div class="number">Tip {index + 1}/{tips.length}</div>
 	<div class="tip">{tips[index]}</div>
 	<svg
 		class="left"
-		on:click={() => (index = (index - 1 + tips.length) % tips.length)}
+		on:click={previousTip}
+		on:keydown={previousTip}
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 100 100"
 	>
 		<path d="M75,0L25,50L75,100z" />
 	</svg>
 	<svg
-		on:click={() => (index = (index + 1) % tips.length)}
+		on:click={nextTip}
+		on:keypress={nextTip}
 		class="right"
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 100 100"

diff --git a/src/components/widgets/Tutorial.svelte b/src/components/widgets/Tutorial.svelte
@@ -42,15 +42,16 @@
 <div>
 	This is a recreation of the original <a
 		href="https://www.nytimes.com/games/wordle/"
-		target="_blank">Wordle</a
+		target="_blank"
+		rel="noreferrer">Wordle</a
 	>
 	by Josh Wardle with additional modes and features, allowing you to play infinite wordles. Switch
 	to infinite mode to play an unlimited number of times.
 	<br /><br />
 	Open the settings menu to see some of the additional features.
 	<br />
 	Written with Svelte, in Typescript by
-	<a href="https://github.com/MikhaD" target="_blank">MikhaD</a>.
+	<a href="https://github.com/MikhaD" target="_blank" rel="noreferrer">MikhaD</a>.
 </div>
 
 <style lang="scss">