From 9f6c65d9feee7d655d1ef51da21450d183ac5921 Mon Sep 17 00:00:00 2001
From: Clemens Fiedler <clemens.fiedler@virtual-identity.com>
Date: Wed, 29 Apr 2026 10:40:37 +0200
Subject: [PATCH] feat(1958): add template to sd-input without label but still
 accessible, implemented by agent

---
 .../src/stories/templates/combobox.a11y.ts    | 14 +++++++++
 .../src/stories/templates/combobox.stories.ts | 31 +++++++++++++++++++
 .../docs/src/stories/templates/input.a11y.ts  | 11 +++++++
 .../src/stories/templates/input.stories.ts    | 29 +++++++++++++++++
 4 files changed, 85 insertions(+)

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 = {
     </div>
   `
 };
+
+/**
+ * ### 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`
+    <style>
+      .combobox-visually-hidden-label::part(form-control-label) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+    </style>
+    <div class="h-[260px] w-[400px]">
+      <sd-combobox class="combobox-visually-hidden-label" type="search" label="Search" placement="bottom" value="">
+        ${createFondsOptionsHtml()}
+      </sd-combobox>
+    </div>
+  `
+};
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 = {
         });
       </script> `
 };
+
+/**
+ * ### 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`
+    <style>
+      .input-visually-hidden-label::part(form-control-label) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+    </style>
+    <div class="w-[250px]">
+      <sd-input class="input-visually-hidden-label" type="search" label="Search" placeholder="Search..."></sd-input>
+    </div>
+  `
+};