.changeset/clear-control-feedback.md

@@ -0,0 +1,5 @@
+---
+'@directory/web': patch
+---
+
+Select the full destination URL on focus or click and make button hover and focus states more distinct.

apps/web/e2e/details-dialog.e2e.ts

@@ -75,7 +75,9 @@ test('direct SSR enhances details once after hydration, without flashing plain d
 	}
 });
 
-test('focus trap, dismissal, history and return focus work together', async ({ page }) => {
+test('focus trap, URL selection, dismissal, history and return focus work together', async ({
+	page
+}) => {
 	await page.goto(server.url);
 	await hydrated(page);
 	const tile = page.locator('a[href="/?link=beta"]');
@@ -88,6 +90,12 @@ test('focus trap, dismissal, history and return focus work together', async ({ p
 	await expect(close).toBeFocused();
 	await page.keyboard.press('Tab');
 	await expect(destination).toBeFocused();
+	const destinationLength = (await destination.inputValue()).length;
+	await expect(destination).toHaveJSProperty('selectionStart', 0);
+	await expect(destination).toHaveJSProperty('selectionEnd', destinationLength);
+	await destination.click();
+	await expect(destination).toHaveJSProperty('selectionStart', 0);
+	await expect(destination).toHaveJSProperty('selectionEnd', destinationLength);
 	await page.keyboard.press('Tab');
 	await expect(external).toBeFocused();
 	await page.keyboard.press('Shift+Tab');

apps/web/src/lib/components/bookmarks/BookmarkDetails.svelte

@@ -79,6 +79,9 @@
 					id={`destination-${link.id}`}
 					type="url"
 					value={link.url}
+					onfocus={(event) => event.currentTarget.select()}
+					onmouseup={(event) => event.preventDefault()}
+					onclick={(event) => event.currentTarget.select()}
 					readonly
 					spellcheck="false"
 				/>

apps/web/src/lib/components/ui/controls.css

@@ -22,9 +22,6 @@
 }
 
 .ui-button--primary {
-	--ui-control-focus-color: var(--color-on-primary);
-	--ui-control-focus-background: var(--color-primary-fill);
-
 	min-width: 80px;
 	font-weight: 600;
 	color: var(--color-on-primary);
@@ -149,7 +146,7 @@
 .ui-button:not(:disabled):hover {
 	background: color-mix(
 		in srgb,
-		var(--ui-control-hover-color, var(--color-text)) var(--ui-control-hover-amount, 8%),
+		var(--ui-control-hover-color, var(--color-text)) var(--ui-control-hover-amount, 16%),
 		var(--color-surface-card)
 	);
 	box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);
@@ -158,7 +155,7 @@
 .ui-button--primary:not(:disabled):hover {
 	background: var(--color-primary-fill);
 	box-shadow:
-		inset 0 0 0 var(--border-width) var(--color-on-primary),
+		inset 0 0 0 2px var(--color-on-primary),
 		var(--shadow-card);
 }
 
@@ -167,15 +164,16 @@
 	border-color: var(--color-border-strong);
 }
 
-.ui-button:not(:disabled):focus,
+.ui-button:not(:disabled):focus {
+	outline: 3px solid var(--color-text);
+	outline-offset: 2px;
+}
+
 .ui-input:has(> .ui-input__control:enabled:focus) {
-	background: var(
-		--ui-control-focus-background,
-		color-mix(in srgb, var(--color-primary) 16%, var(--color-surface-card))
-	);
-	border-color: var(--ui-control-focus-color, var(--color-primary));
+	background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface-card));
+	border-color: var(--color-primary);
 	box-shadow: none;
-	outline: 2px solid var(--ui-control-focus-color, var(--color-primary));
+	outline: 2px solid var(--color-primary);
 	outline-offset: -2px;
 }
 
@@ -186,7 +184,6 @@
 .ui-button--primary:not(:disabled):active {
 	background: var(--color-primary-fill);
 	box-shadow: inset 0 0 0 3px var(--color-on-primary);
-	outline: none;
 }
 
 .ui-button:disabled,

docs/directory.example.yaml

@@ -42,7 +42,7 @@ links:
   photos:
     title: Photos
     url: https://photos.example.com
-    description: |
+    description: >-
       Family photos and videos, all in one place.
       Install your photo service's mobile app for automatic uploads.
     tags: [photos, videos, memories]