diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
index c641649..8a9b30f 100644
--- a/e2e/app.spec.ts
+++ b/e2e/app.spec.ts
@@ -86,6 +86,15 @@ test('keeps fallback controls interactive and accessible', async ({ page }) => {
await expect(settingsButton).toHaveAttribute('aria-expanded', 'false');
const soundButton = page.locator('button.sound');
+ const volumeSlider = page.getByLabel('Master volume');
+ await expect(volumeSlider).toHaveValue('0.42');
+ await volumeSlider.evaluate((input) => {
+ const slider = input as HTMLInputElement;
+ slider.value = '0.25';
+ slider.dispatchEvent(new Event('input', { bubbles: true }));
+ });
+ await expect(volumeSlider).toHaveValue('0.25');
+ await expect(volumeSlider).toHaveAttribute('aria-valuetext', '25%');
await expect(soundButton).toHaveAttribute('aria-pressed', 'false');
await soundButton.click();
await expect(soundButton).toHaveAttribute('aria-pressed', 'true');
@@ -93,6 +102,11 @@ test('keeps fallback controls interactive and accessible', async ({ page }) => {
await page.reload();
await expect(page.locator('body')).not.toHaveClass(/is-loading/);
await expect(page.locator('button.sound')).toHaveAttribute('aria-pressed', 'true');
+ await expect(page.getByLabel('Master volume')).toHaveValue('0.25');
+ await expect(page.getByLabel('Master volume')).toHaveAttribute(
+ 'aria-valuetext',
+ 'Muted, 25%'
+ );
const initialSwatchColor = await getFirstSwatchColor(page);
const initialBackground = await getGardenBackground(page);
diff --git a/index.html b/index.html
index 0a66ab3..884b053 100644
--- a/index.html
+++ b/index.html
@@ -167,12 +167,17 @@
aria-expanded="false"
title="Show config overlay"
>
-
+
+
+
+