fix: adding title and improve button labels

When I was reinstalling Orca to get it back working I noticed that Anvil
is not displaying any document.title. I did some research on how to
define it and added it on two pages. This is meant to discuss how we
want to structure the title. Once we settled on something it'll become
translateable, too.

Speaking of, when navigating through the Settings modal I noticed that
the Remove button for keys lacked context. So I added the key title for
screen readers. Nothing worse than deleting the wrong key!

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/lib/components/molecules/SettingsKeys.svelte

@@ -54,7 +54,13 @@ You should have received a copy of the GNU Affero General Public License along w
 						<span class="text-surface-500-400-token flex-1 shrink-0">{key.title}</span>
 						<code class="text-surface-500-400-token shrink-0">{key.fingerprint}</code>
 						<button type="button" class="btn font-semibold variant-filled-warning"
-							>{$_('settings.ssh_gpg_keys.ssh.remove')}</button
+							>{@html $_('settings.ssh_gpg_keys.ssh.remove', {
+								values: {
+									key: key.title,
+									srOnlyElementOpen: '<span class="sr-only">',
+									srOnlyElementClose: '</span>'
+								}
+							})}</button
 						>
 					</div>
 				{/each}
@@ -92,7 +98,13 @@ You should have received a copy of the GNU Affero General Public License along w
 							>{key.fingerprint}</code
 						>
 						<button type="button" class="btn font-semibold variant-filled-warning"
-							>{$_('settings.ssh_gpg_keys.gpg.remove')}</button
+							>{@html $_('settings.ssh_gpg_keys.gpg.remove', {
+								values: {
+									key: key.title,
+									srOnlyElementOpen: '<span class="sr-only">',
+									srOnlyElementClose: '</span>'
+								}
+							})}</button
 						>
 					</div>
 				{/each}

src/lib/i18n/locales/en.json

@@ -261,7 +261,7 @@
 				"key": {
 					"placeholder": "Don't paste the private part of the GPG key. Paste the public part which begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'."
 				},
-				"remove": "Remove",
+				"remove": "Remove {srOnlyElementOpen}{key} GPG key{srOnlyElementClose}",
 				"title": {
 					"placeholder": "Title"
 				}
@@ -274,7 +274,7 @@
 				"key": {
 					"placeholder": "Begins with 'ssh-rsa', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', 'ecdsa-sha2-nistp521', 'ssh-ed25519', 'sk-ecdsa-sha2-nistp256@openssh.com', or 'sk-ssh-ed25519@openssh.com'"
 				},
-				"remove": "Remove",
+				"remove": "Remove {srOnlyElementOpen}{key} SSH key{srOnlyElementClose}",
 				"title": {
 					"placeholder": "Title"
 				}

src/routes/+page.svelte

@@ -11,4 +11,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 	import Welcome from '$lib/components/pages/Welcome.svelte';
 </script>
 
+<svelte:head>
+	<title>Anvil</title>
+</svelte:head>
+
 <Welcome />

src/routes/profile/+page.svelte

@@ -11,4 +11,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 	export let data;
 </script>
 
+<svelte:head>
+	<title>Profile | Anvil</title>
+</svelte:head>
+
 <Profile {data} />