[no ci] feat(1958): add template to sd-input without label but still accessible

packages/docs/src/stories/templates/combobox.a11y.ts

@@ -0,0 +1,75 @@
+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'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - text: Funds
+      - combobox "Funds"
+      - img "Open":
+        - img
+      - button "Open"
+    `);
+});
+
+test('Highlight Query', async ({ page }) => {
+  await page.goto(
+    'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-combobox--highlight-query&viewMode=story'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - text: Funds
+      - combobox "Funds"
+      - img "Open":
+        - img
+      - button "Open"
+    `);
+});
+
+test('Multiple Highlight Query', async ({ page }) => {
+  await page.goto(
+    'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-combobox--multiple-highlight-query&viewMode=story'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - text: Funds
+      - combobox "Funds"
+      - img "Open":
+        - img
+      - button "Open"
+    `);
+});
+
+test('Grouping Query', async ({ page }) => {
+  await page.goto(
+    'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-combobox--grouping-query&viewMode=story'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - text: Group elements
+      - combobox "Group elements"
+      - img "Open":
+        - img
+      - button "Open"
+    `);
+});

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>
+  `
+};

packages/docs/src/stories/templates/input.a11y.ts

@@ -0,0 +1,25 @@
+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'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - text: Currency stepper
+      - spinbutton "Currency stepper"
+      - text: EUR
+    `);
+});

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>
+  `
+};