Improve accessibility and bubble defaults

Update the playground semantics and accessibility coverage, switch the built-in fallback icon to an ellipsis, and prevent secondary-clicks from activating bubbles.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: githyperplexed

CHANGELOG.md

@@ -7,6 +7,24 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Fixed
+
+- A right-click — or any non-primary pointer button — on a bubble no longer activates or drags it.
+  The press falls through to the browser/host page context menu instead of grabbing the bubble.
+
+### Changed
+
+- The built-in fallback bubble icon (painted only when a bubble has no `icon`, with `bubbleIcon` as
+  its stroke) is now an ellipsis glyph instead of a chat bubble.
+
+### Internal
+
+- Playground accessibility: segmented controls and accent swatches are now real radio groups,
+  decorative icons are hidden from assistive tech, shortcut docs use semantic key/action markup,
+  external links announce that they open a new tab, and the contrast-aware glyph picks its ink by
+  WCAG contrast ratio.
+- Added `@axe-core/playwright` and an end-to-end accessibility scan over the playground.
+
 ## [0.5.1] - 2026-06-14
 
 ### Fixed

README.md

@@ -78,7 +78,7 @@ Mounts a bubble. It flies in from the docked side and joins the group. Re-adding
 | ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
 | `id`             | `string`           | Unique id for this bubble (required).                                                                                           |
 | `label`          | `string`           | Accessible name for the bubble and its panel, e.g. `"Chat support"`. Without it the bubble announces as a generic button.       |
-| `icon`           | `HTMLElement`      | Content shown inside the collapsed bubble (an avatar, an SVG, anything). Defaults to a chat glyph.                              |
+| `icon`           | `HTMLElement`      | Content shown inside the collapsed bubble (an avatar, an SVG, anything). Defaults to an ellipsis glyph.                         |
 | `content`        | `HTMLElement`      | Content shown in the expanded panel. Without it the bubble has no panel.                                                        |
 | `panelWidth`     | `number \| string` | Overrides the manager's `panelWidth` for this bubble's panel (px number, or a `"<n>px"` / `"<n>%"` string).                     |
 | `panelMaxHeight` | `number \| string` | Overrides the manager's `panelMaxHeight` for this bubble's panel (px number, or a `"<n>px"` / `"<n>%"` string).                 |
@@ -180,7 +180,7 @@ Every token the library paints with:
 | Token            | Paints                                                               |
 | ---------------- | -------------------------------------------------------------------- |
 | `bubbleSurface`  | Fill of the collapsed bubble circle                                  |
-| `bubbleIcon`     | Stroke of the built-in chat glyph (only when a bubble has no `icon`) |
+| `bubbleIcon`     | Stroke of the built-in ellipsis glyph (only when a bubble has no `icon`) |
 | `bubbleShadow`   | Drop shadow under each bubble                                        |
 | `focusRing`      | Ring marking the focused bubble                                      |
 | `panelSurface`   | Fill of the expanded panel and its caret                             |

bun.lock

@@ -57,6 +57,7 @@
 		"node": ">=18"
 	},
 	"devDependencies": {
+		"@axe-core/playwright": "^4.11.3",
 		"@ianvs/prettier-plugin-sort-imports": "^4.7.1",
 		"@playwright/test": "^1.60.0",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",

package.json

@@ -10,23 +10,27 @@
 		value: T;
 		onSelect: (value: T) => void;
 	} = $props();
+
+	const groupName = $derived(`control-${label.toLowerCase().replaceAll(/\W+/g, "-")}`);
 </script>
 
-<div class="flex flex-col gap-1.5">
-	<span class="text-xs text-zinc-400 light:text-zinc-600">{label}</span>
+<fieldset class="flex flex-col gap-1.5">
+	<legend class="text-xs text-zinc-400 light:text-zinc-600">{label}</legend>
 	<div class="flex rounded-lg border border-zinc-800 p-0.5 light:border-zinc-300">
 		{#each options as option (option.value)}
-			<button
-				type="button"
-				aria-pressed={value === option.value}
-				onclick={() => onSelect(option.value)}
-				class="focus-ring flex-1 cursor-pointer rounded-md px-2 py-1 text-xs transition-colors {value ===
-				option.value
-					? 'bg-zinc-800 text-white light:bg-zinc-900'
-					: 'text-zinc-400 hover:text-white light:text-zinc-600 light:hover:text-zinc-900'}"
+			<label
+				class="relative flex flex-1 cursor-pointer items-center justify-center rounded-md px-2 py-1 text-xs text-zinc-400 transition-colors hover:text-white has-checked:bg-zinc-800 has-checked:text-white has-focus-visible:ring-2 has-focus-visible:ring-zinc-500 has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-black light:text-zinc-600 light:hover:text-zinc-900 light:has-checked:bg-zinc-900 light:has-checked:text-white light:has-focus-visible:ring-zinc-400 light:has-focus-visible:ring-offset-white"
 			>
+				<input
+					type="radio"
+					name={groupName}
+					value={option.value}
+					checked={value === option.value}
+					onchange={() => onSelect(option.value)}
+					class="sr-only"
+				/>
 				{option.label}
-			</button>
+			</label>
 		{/each}
 	</div>
-</div>
+</fieldset>

playground/components/control-segmented.svelte

@@ -26,7 +26,7 @@
 <label class="flex flex-col gap-1.5">
 	<span class="flex items-baseline justify-between text-xs">
 		<span class="text-zinc-400 light:text-zinc-600">{label}</span>
-		<span class="text-zinc-500">{format(shown)}</span>
+		<span class="text-zinc-400 light:text-zinc-600">{format(shown)}</span>
 	</span>
 	<input
 		type="range"

playground/components/control-slider.svelte

@@ -5,12 +5,18 @@
 
 	// The panel renders the actual README — one source of truth. Relative
 	// repo links resolve to GitHub; external links open a new tab.
+	const externalLinkNote = '<span class="sr-only"> (opens in new tab)</span>';
+
 	const html = (marked.parse(readme, { async: false }) as string)
 		.replaceAll(
 			'href="LICENSE"',
 			'href="https://github.com/githyperplexed/bubbles/blob/main/LICENSE"'
 		)
-		.replaceAll('<a href="http', '<a target="_blank" rel="noreferrer" href="http');
+		.replaceAll('<a href="http', '<a target="_blank" rel="noreferrer" href="http')
+		.replace(
+			/<a target="_blank" rel="noreferrer" href="http[^"]+">([\s\S]*?)<\/a>/g,
+			(anchor) => anchor.replace("</a>", `${externalLinkNote}</a>`)
+		);
 </script>
 
 <div class="flex min-h-0 flex-col font-sans">

playground/components/docs-panel.svelte

@@ -5,7 +5,7 @@
 <!-- The brand mark: three equal overlapping bubbles in one solid ink.
      Page-colored gap discs under the middle and right circles carve the
      separation without shrinking any circle's fill. Mirrors public/. -->
-<svg viewBox="0 0 48 24" width={size * 2} height={size}>
+<svg viewBox="0 0 48 24" width={size * 2} height={size} aria-hidden="true" focusable="false">
 	<circle cx="10" cy="12" r="8.5" fill="currentColor" />
 	<circle cx="24" cy="12" r="10" class="fill-black light:fill-white" />
 	<circle cx="24" cy="12" r="8.5" fill="currentColor" />

playground/components/icons/bubbles-icon.svelte

@@ -6,6 +6,8 @@
 	viewBox="0 0 24 24"
 	width={size}
 	height={size}
+	aria-hidden="true"
+	focusable="false"
 	fill="none"
 	stroke={color}
 	stroke-width="2"

playground/components/icons/check-icon.svelte

@@ -6,6 +6,8 @@
 	viewBox="0 0 24 24"
 	width={size}
 	height={size}
+	aria-hidden="true"
+	focusable="false"
 	fill="none"
 	stroke={color}
 	stroke-width="2"