diff --git a/packages/docs/src/stories/templates/combobox.a11y.ts b/packages/docs/src/stories/templates/combobox.a11y.ts
index 36c4b34d27..48998ef395 100644
--- a/packages/docs/src/stories/templates/combobox.a11y.ts
+++ b/packages/docs/src/stories/templates/combobox.a11y.ts
@@ -1,5 +1,19 @@
import { test, expect } from '@playwright/test';
+test('Combobox With Visually Hidden Label', async ({ page }) => {
+ await page.goto(
+ 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-combobox--combobox-with-visually-hidden-label&viewMode=story'
+ );
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - region "Top right notifications"
+ - region "Bottom center notifications"
+ - combobox "Search"
+ - img "Open":
+ - img
+ - button "Open"
+ `);
+});
+
test('Simple Suggests', async ({ page }) => {
await page.goto(
'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-combobox--simple-suggests&viewMode=story'
diff --git a/packages/docs/src/stories/templates/combobox.stories.ts b/packages/docs/src/stories/templates/combobox.stories.ts
index 2e98fcb889..3c27cf1613 100644
--- a/packages/docs/src/stories/templates/combobox.stories.ts
+++ b/packages/docs/src/stories/templates/combobox.stories.ts
@@ -125,3 +125,34 @@ export const GroupingQuery = {
`
};
+
+/**
+ * ### Search Combobox with Visually Hidden Label
+ *
+ * Use this pattern when a search combobox should not show a visible label but still needs to be accessible to screen readers.
+ * The label is visually hidden via `::part(form-control-label)` while remaining available in the accessibility tree.
+ *
+ * __Warning:__ Visually hidden labels are only permitted for search inputs (WCAG Success Criterion 1.3.1). Do not use this pattern for other input types.
+ */
+export const ComboboxWithVisuallyHiddenLabel = {
+ render: () => html`
+
+
+
+ ${createFondsOptionsHtml()}
+
+
+ `
+};
diff --git a/packages/docs/src/stories/templates/input.a11y.ts b/packages/docs/src/stories/templates/input.a11y.ts
index 724dd37e9f..912953b800 100644
--- a/packages/docs/src/stories/templates/input.a11y.ts
+++ b/packages/docs/src/stories/templates/input.a11y.ts
@@ -1,5 +1,16 @@
import { test, expect } from '@playwright/test';
+test('Input With Visually Hidden Label', async ({ page }) => {
+ await page.goto(
+ 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-input--input-with-visually-hidden-label&viewMode=story'
+ );
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - region "Top right notifications"
+ - region "Bottom center notifications"
+ - searchbox "Search"
+ `);
+});
+
test('Input With Currency Stepper', async ({ page }) => {
await page.goto(
'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-input--input-with-currency-stepper&viewMode=story'
diff --git a/packages/docs/src/stories/templates/input.stories.ts b/packages/docs/src/stories/templates/input.stories.ts
index 959d42588e..8164718158 100644
--- a/packages/docs/src/stories/templates/input.stories.ts
+++ b/packages/docs/src/stories/templates/input.stories.ts
@@ -33,3 +33,32 @@ export const InputWithCurrencyStepper = {
});
`
};
+
+/**
+ * ### Search Input with Visually Hidden Label
+ *
+ * Use this pattern when a search input should not show a visible label but still needs to be accessible to screen readers.
+ * The label is visually hidden via `::part(form-control-label)` while remaining available in the accessibility tree.
+ *
+ * __Warning:__ Visually hidden labels are only permitted for search inputs (WCAG Success Criterion 1.3.1). Do not use this pattern for other input types.
+ */
+export const InputWithVisuallyHiddenLabel = {
+ render: () => html`
+
+
+
+
+ `
+};