fix: try format catch and a11y fixes

jesperorb · Mar 12, 2024 · e59c12e · e59c12e
1 parent c7c1e6c
commit e59c12e
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 47 deletions.
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -67,18 +67,13 @@
 	</summary>
 	<nav aria-label="Main Menu" data-testid={testIds.navigation}>
 		<ul>
-			<li><strong><a href="/?locale={locale}">About</a></strong></li>
-			<Spacing />
-			<li aria-hidden="true" class="menu-heading"><strong>Playground</strong></li>
-			<Spacing size={1} />
-			<li>
-				<a href="/Playground?locale={locale}" class:active={path.includes("Playground")}>Playground</a>
+			<li class="last-item"><strong><a href="/?locale={locale}">About</a></strong></li>
+			<li class="last-item">
+				<strong><a href="/Playground?locale={locale}" class:active={path.includes("Playground")}>Playground</a></strong>
 			</li>
-			<Spacing />
-			<li aria-hidden="true" class="menu-heading"><strong>Intl.</strong></li>
-			<Spacing size={1} />
-			{#each routes as route}
-				<li aria-hidden={route.ariaHidden}>
+			<li class="menu-heading"><strong>Intl.</strong></li>
+			{#each routes as route, i}
+				<li aria-hidden={route.ariaHidden} class="route" class:last-item={i === routes.length - 1}>
 					<a
 						aria-label={route.ariaLabel}
 						class:sublink={route.sublink}
@@ -91,11 +86,8 @@
 						{/if}
 					</a>
 				</li>
-				<Spacing size={1} />
 			{/each}
-			<Spacing />
-			<li aria-hidden="true" class="menu-heading"><strong>Meta</strong></li>
-			<Spacing size={1} />
+			<li class="menu-heading"><strong>Meta</strong></li>
 			<li>
 				<a
 					class="github"
@@ -109,6 +101,12 @@
 </details>
 
 <style>
+	.menu-heading, .route {
+		margin-bottom: var(--spacing-1);
+	}
+	.last-item {
+		margin-bottom: var(--spacing-4);
+	}
 	.sidebar {
 		padding: var(--spacing-2) var(--spacing-4);
 		display: flex;

diff --git a/src/lib/components/pages/DateTimeFormat.svelte b/src/lib/components/pages/DateTimeFormat.svelte
@@ -36,6 +36,18 @@
 			code
 		})
 	};
+
+	const tryFormat = (
+		options: Intl.DateTimeFormatOptions | undefined = undefined,
+		dateTime: string
+	) => {
+		try {
+			return new Intl.DateTimeFormat(locale, options)
+				.format(new Date(`${dateTime}`))
+		} catch (e) {
+			return 'Failed to use `Intl.DateTimeFormat`. You are probably using an unsupported browser';
+		}
+	};
 </script>
 
 <PageLayout>
@@ -64,9 +76,7 @@
 						<Highlight
 							{onClick}
 							values={{ [option]: value }}
-							output={new Intl.DateTimeFormat(locale, getDateTimeFormatOptions(option, value)).format(
-								new Date(`${dateTimeString}`)
-							)}
+							output={tryFormat(getDateTimeFormatOptions(option, value), dateTimeString)}
 						/>
 					{/if}
 				{/each}

diff --git a/src/lib/components/pages/NumberFormat.Currency.svelte b/src/lib/components/pages/NumberFormat.Currency.svelte
@@ -37,6 +37,18 @@
 			code,
 		})
 	};
+
+	const tryFormat = (
+		options: Intl.NumberFormatOptions | undefined = undefined,
+		number: number
+	) => {
+		try {
+			return new Intl.NumberFormat(locale, options)
+				.format(number)
+		} catch (e) {
+			return 'Failed to use `Intl.NumberFormat`. You are probably using an unsupported browser';
+		}
+	};
 </script>
 
 <PageLayout>
@@ -77,11 +89,11 @@
 								style: 'currency',
 								currency: selectedCurrency
 							}}
-							output={new Intl.NumberFormat(locale, {
+							output={tryFormat({
 								style: 'currency',
 								currency: selectedCurrency,
 								[option]: value
-							}).format(number)}
+							}, number)}
 						/>
 					{/if}
 				{/each}

diff --git a/src/lib/components/pages/NumberFormat.Unit.svelte b/src/lib/components/pages/NumberFormat.Unit.svelte
@@ -36,6 +36,18 @@
 			code,
 		})
 	};
+
+	const tryFormat = (
+		options: Intl.NumberFormatOptions | undefined = undefined,
+		number: number
+	) => {
+		try {
+			return new Intl.NumberFormat(locale, options)
+				.format(number)
+		} catch (e) {
+			return 'Failed to use `Intl.NumberFormat`. You are probably using an unsupported browser';
+		}
+	};
 </script>
 
 <PageLayout>
@@ -76,11 +88,11 @@
 								unit: selectedUnit,
 								[option]: value
 							}}
-							output={new Intl.NumberFormat(locale, {
+							output={tryFormat({
 								style: 'unit',
 								unit: selectedUnit,
 								[option]: value
-							}).format(number)}
+							}, number)}
 						/>
 					{/if}
 				{/each}

diff --git a/src/lib/components/pages/NumberFormat.svelte b/src/lib/components/pages/NumberFormat.svelte
@@ -34,6 +34,17 @@
 			code,
 		})
 	};
+	const tryFormat = (
+		options: Intl.NumberFormatOptions | undefined = undefined,
+		number: number
+	) => {
+		try {
+			return new Intl.NumberFormat(locale, options)
+				.format(number)
+		} catch (e) {
+			return 'Failed to use `Intl.NumberFormat`. You are probably using an unsupported browser';
+		}
+	};
 </script>
 
 <PageLayout>
@@ -61,9 +72,9 @@
 							values={{
 								[option]: value
 							}}
-							output={new Intl.NumberFormat(locale, {
+							output={tryFormat({
 								[option]: value
-							}).format(number)}
+							}, number)}
 						/>
 					{/if}
 				{/each}

diff --git a/src/lib/components/pages/Playground/PlaygroundOptions.svelte b/src/lib/components/pages/Playground/PlaygroundOptions.svelte
@@ -54,11 +54,11 @@
 							<input
 								type="radio"
 								on:input={onChangeOption}
-								id={option.name}
+								id={option.name + value}
 								name={option.name}
 								group={value}
 							/>
-							<label for={option.name}>{value}</label>
+							<label for={option.name + value}>{value}</label>
 						</div>
 					{/each}
 				</fieldset>

diff --git a/src/lib/components/pages/PluralRules.svelte b/src/lib/components/pages/PluralRules.svelte
@@ -24,6 +24,17 @@
 			code,
 		})
 	};
+	const tryFormat = (
+		options: Intl.PluralRulesOptions | undefined = undefined,
+		number: number
+	) => {
+		try {
+			return new Intl.PluralRules(locale, options).select(number)
+		} catch (e) {
+			return 'Failed to use `Intl.PluralRules`. You are probably using an unsupported browser';
+		}
+	};
+	
 </script>
 
 <PageLayout>
@@ -47,29 +58,29 @@
 					value: 1,
 					type
 				}}
-				output={new Intl.PluralRules(locale, {
+				output={tryFormat({
 					type
-				}).select(1)}
+				}, 1)}
 			/>
 			<Highlight
 				{onClick}
 				values={{
 					value: 2,
 					type
 				}}
-				output={new Intl.PluralRules(locale, {
+				output={tryFormat({
 					type
-				}).select(2)}
+				}, 2)}
 			/>
 			<Highlight
 				{onClick}
 				values={{
 					value: 20,
 					type
 				}}
-				output={new Intl.PluralRules(locale, {
+				output={tryFormat({
 					type
-				}).select(20)}
+				}, 20)}
 			/>
 		</OptionSection>
 		<OptionSection header={'localeMatcher'}>
@@ -81,10 +92,10 @@
 					type,
 					localeMatcher: 'best fit'
 				}}
-				output={new Intl.PluralRules(locale, {
+				output={tryFormat({
 					type,
 					localeMatcher: 'best fit'
-				}).select(1)}
+				}, 1)}
 			/>
 			<Highlight
 				{onClick}
@@ -93,10 +104,10 @@
 					type,
 					localeMatcher: 'lookup'
 				}}
-				output={new Intl.PluralRules(locale, {
+				output={tryFormat({
 					type,
 					localeMatcher: 'lookup'
-				}).select(2)}
+				}, 2)}
 			/>
 		</OptionSection>
 	</Grid>

diff --git a/src/lib/components/ui/ComboBox/ComboBox.svelte b/src/lib/components/ui/ComboBox/ComboBox.svelte
@@ -247,7 +247,7 @@
 						{option.label}
 					</slot>
 					{#if option.value === value}
-						<svg viewBox="0 0 24 24" class="icon">
+						<svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
 							<polyline points="20 6 9 17 4 12"></polyline>
 						</svg>
 					{/if}

diff --git a/src/lib/components/ui/Select.svelte b/src/lib/components/ui/Select.svelte
@@ -22,10 +22,10 @@
 
 <div>
 	{#if label}
-		<label for={`${name}Select`}>{label}</label>
+		<label for={name}>{label}</label>
 	{/if}
 	<Spacing size={1} /> 
-	<select {name} bind:value id={`${name}Select`} on:change={onChange} class:fullWidth>
+	<select {name} bind:value id={name} on:change={onChange} class:fullWidth>
 		{#if !removeEmpty}
 			<option value="">{placeholder ?? 'undefined'}</option>
 		{/if}

diff --git a/tests/IntlPage.ts b/tests/IntlPage.ts
@@ -51,11 +51,11 @@ export class IntlPage {
 
 	public async goToPage() {
 		await this.clickOnNavigationLink();
-		await expect(this.page).toHaveURL(new RegExp(this.getUrl(this.pageUnderTest)));
+		await expect(this.page).toHaveURL(this.getUrl(this.pageUnderTest));
 	}
 
-	public async assertTitle() {
-		expect(await this.page.textContent('h1')).toBe(`Intl.${this.pageUnderTest}`);
+	public async assertTitle(prefix = true) {
+		expect(await this.page.textContent('h1')).toBe(`${prefix ? "Intl." : ""}${this.pageUnderTest}`);
 	}
 
 	public async assertMDNLink() {

diff --git a/tests/contstants.ts b/tests/contstants.ts
@@ -1,3 +1,4 @@
 export const mdnUrl = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl';
-export const localBaseURL = 'http://localhost:5173'
+export const localePort = '5173'
+export const localBaseURL = `http://localhost:${localePort}`
 export const defaultPageUnderTest = '/';
diff --git a/tests/pages.spec.ts b/tests/pages.spec.ts
@@ -8,10 +8,6 @@ test.describe("Pages", () => {
 				intlPage.setPageUnderTest(method);
 				await intlPage.goToPage();
 			})
-			await test.step("Assert title and link", async () => {
-				await intlPage.assertTitle();
-				await intlPage.assertMDNLink();
-			})
 			await test.step("Check a11y", async () => {
 				await intlPage.checkAlly();
 			})
@@ -23,6 +19,7 @@ test("Playground", async ({ intlPage }) => {
 	await test.step("Setup", async () => {
 		intlPage.setPageUnderTest("Playground");
 		await intlPage.clickOnNavigationLink();
+		await intlPage.page.waitForURL("**/Playground?locale=en-US")
 	})
 	await test.step("Check a11y", async () => {
 		await intlPage.checkAlly();