Improve a11y for template counter component (#1150)

* Hide out-of-view count from assistive tech * Add changeset
sveltejs · Apr 20, 2021 · 872d734 · 872d734 · vercel · Apr 20, 2021
1 parent 59f9277
commit 872d734
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/.changeset/ten-plants-sleep.md b/.changeset/ten-plants-sleep.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Hide out-of-view counter from assistive tech
diff --git a/packages/create-svelte/templates/default/src/lib/Counter/index.svelte b/packages/create-svelte/templates/default/src/lib/Counter/index.svelte
@@ -15,21 +15,20 @@
 
 <div class="counter">
 	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg role="img" aria-label="Minus" viewBox="0 0 1 1">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5"></path>
 		</svg>
 	</button>
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong style="top: -100%">{Math.floor($displayed_count + 1)}</strong>
+			<strong style="top: -100%" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
 			<strong>{Math.floor($displayed_count)}</strong>
 		</div>
 	</div>
 
 	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<!-- <img src={plus} alt="Plus icon"> -->
-		<svg role="img" aria-label="Plus" viewBox="0 0 1 1">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1"></path>
 		</svg>
 	</button>