Repository: solid-design-system/solid
Pull request #1934: fix: sd input a11y issues
Author: login: auroraVasconcelos
Created: 2025-03-04T16:46:45Z | Merged: 2025-03-11T22:17:31Z

<!-- ## Title: Please consider adding the [skip chromatic] flag to the PR title in case you dont need chromatic testing your changes. -->
## Description:
Closes https://github.com/solid-design-system/solid/issues/1877

<!-- *If this PR includes a bug fix, an E2E test is necessary to verify the change. If the fix is purely visual, ensuring it is captured within our chromatic screenshot tests is sufficient.* -->
- [x] Stories (features, a11y) are created/updated
- [x] relevant tickets are linked



Diff:
diff --git a/.changeset/forty-experts-tie.md b/.changeset/forty-experts-tie.md
new file mode 100644
index 0000000000..b57443f4e8
--- /dev/null
+++ b/.changeset/forty-experts-tie.md
@@ -0,0 +1,8 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Improved `sd-input` accessibility and consistency with other components.
+
+- Add labels to sd-input.
+
diff --git a/.changeset/popular-boats-build.md b/.changeset/popular-boats-build.md
new file mode 100644
index 0000000000..4107d46185
--- /dev/null
+++ b/.changeset/popular-boats-build.md
@@ -0,0 +1,9 @@
+---
+'@solid-design-system/components': minor
+---
+
+Added new functionality to the `sd-input` for type="search" and improved the component accessibility.
+
+- Search icon button is interactive.
+- Trigger `sd-search` event when search button on `sd-input type="search"` is clicked.
+- Added a translatable label to the search icon for the `sd-input type="search"`.
diff --git a/packages/components/src/components/input/input.test.ts b/packages/components/src/components/input/input.test.ts
index c6ed7088b9..adb6251cef 100644
--- a/packages/components/src/components/input/input.test.ts
+++ b/packages/components/src/components/input/input.test.ts
@@ -489,6 +489,30 @@ describe('<sd-input>', () => {
     });
   });
 
+  describe('when type="search"', () => {
+    it('should emit sd-search when the user clicks the search button', async () => {
+      const el = await fixture<SdInput>(html` <sd-input type="search"></sd-input> `);
+      const searchHandler = sinon.spy();
+      const searchButton = el.shadowRoot!.querySelector('button')!;
+
+      el.addEventListener('sd-search', searchHandler);
+
+      searchButton.click();
+      await waitUntil(() => searchHandler.calledOnce);
+
+      expect(searchHandler).to.have.been.calledOnce;
+    });
+
+    it('should translate the search icon aria-label when the lang attribute is set', async () => {
+      const el = await fixture<SdInput>(html` <sd-input lang="de" type="search"></sd-input> `);
+      const searchIcon = el.shadowRoot!.querySelector('button')!.querySelector('sd-icon')!;
+
+      await el.updateComplete;
+
+      expect(searchIcon.getAttribute('aria-label')).to.equal('Suchen');
+    });
+  });
+
   describe('when type="number"', () => {
     it('should be valid when the value is within the boundary of a step', async () => {
       const el = await fixture<SdInput>(html` <sd-input type="number" step=".5" value="1.5"></sd-input> `);
diff --git a/packages/components/src/components/input/input.ts b/packages/components/src/components/input/input.ts
index c1be850423..834b49d2af 100644
--- a/packages/components/src/components/input/input.ts
+++ b/packages/components/src/components/input/input.ts
@@ -48,6 +48,7 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
  * @event sd-clear - Emitted when the clear button is activated.
  * @event sd-focus - Emitted when the control gains focus.
  * @event sd-input - Emitted when the control receives input.
+ * @event sd-search - Emitted when the search button is activated.
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -279,6 +280,11 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     event.stopPropagation();
   }
 
+  private handleSearchClick(event: MouseEvent) {
+    this.emit('sd-search');
+    event.stopPropagation();
+  }
+
   private handleFocus() {
     this.hasFocus = true;
     this.emit('sd-focus');
@@ -615,7 +621,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               ? html`
                   <button
                     part="clear-button"
-                    class=${cx('flex justify-center ', iconMarginLeft)}
+                    class=${cx('flex justify-center', iconMarginLeft)}
                     type="button"
                     aria-label=${this.localize.term('clearEntry')}
                     @click=${this.handleClearClick}
@@ -675,11 +681,16 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               : ''}
             ${this.type === 'search'
               ? html`
-                  <button class="flex items-center" type="button" tabindex="-1">
+                  <button
+                    class=${cx('flex items-center sd-interactive', iconMarginLeft)}
+                    type="button"
+                    @click=${this.handleSearchClick}
+                  >
                     <sd-icon
-                      class=${cx(iconColor, iconMarginLeft, iconSize)}
+                      class=${cx(iconColor, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
                     ></sd-icon>
                   </button>
                 `
diff --git a/packages/components/src/translations/de.ts b/packages/components/src/translations/de.ts
index a7f0bad9e0..f00189a171 100644
--- a/packages/components/src/translations/de.ts
+++ b/packages/components/src/translations/de.ts
@@ -37,6 +37,7 @@ const translation: Translation = {
   removed: name => `${name} entfernt`,
   resize: 'Größe ändern',
   scrollToEnd: 'Zum Ende scrollen',
+  search: 'Suchen',
   seekBar: 'Bar suchen',
   scrollToStart: 'Zum Anfang scrollen',
   selectAColorFromTheScreen: 'Farbe vom Bildschirm auswählen',
diff --git a/packages/components/src/translations/en.ts b/packages/components/src/translations/en.ts
index 99d5dcc3af..96a19843e4 100644
--- a/packages/components/src/translations/en.ts
+++ b/packages/components/src/translations/en.ts
@@ -38,6 +38,7 @@ const translation: Translation = {
   resize: 'Resize',
   scrollToEnd: 'Scroll to end',
   scrollToStart: 'Scroll to start',
+  search: 'Search',
   seekBar: 'Seek bar',
   selectAColorFromTheScreen: 'Select a color from the screen',
   selectDefaultPlaceholder: 'Please select',
diff --git a/packages/components/src/utilities/localize.ts b/packages/components/src/utilities/localize.ts
index 5a51b138f5..3e7be914b3 100644
--- a/packages/components/src/utilities/localize.ts
+++ b/packages/components/src/utilities/localize.ts
@@ -103,6 +103,7 @@ export interface Translation extends DefaultTranslation {
   resize: string;
   scrollToEnd: string;
   scrollToStart: string;
+  search: string;
   seekBar: string;
   selectAColorFromTheScreen: string;
   selectDefaultPlaceholder: string;
diff --git a/packages/docs/src/stories/components/input.stories.ts b/packages/docs/src/stories/components/input.stories.ts
index afca02253f..3d584704cb 100644
--- a/packages/docs/src/stories/components/input.stories.ts
+++ b/packages/docs/src/stories/components/input.stories.ts
@@ -12,11 +12,11 @@ const { overrideArgs } = storybookHelpers('sd-input');
  * **Related templates**:
  * - [Input](?path=/docs/templates-input--docs)
  * - [Autocomplete](?path=/docs/templates-autocomplete--docs)
- * - [Tooltip](?path=/docs/templates-tooltip--docs)
+ * - [Input with Tooltip](?path=/docs/templates-tooltip--docs#input%20with%20tooltip)
  *
  */
 export default {
-  tags: ['!dev', 'skip-a11y'],
+  tags: ['!dev'],
   title: 'Components/sd-input',
   component: 'sd-input',
   args: overrideArgs({
@@ -79,7 +79,7 @@ export const Label = {
 export const Placeholder = {
   render: () => html`
     <div class="w-[250px]">
-      <sd-input placeholder="Placeholder example" spellcheck></sd-input>
+      <sd-input placeholder="Placeholder example" label="Label" spellcheck></sd-input>
     </div>
   `
 };
@@ -343,7 +343,7 @@ export const Invalid = {
       <script type="module">
         await Promise.all([customElements.whenDefined('sd-input')]).then(() => {
           const input = document.getElementById('invalid-input');
-          input.setCustomValidity('Error message');
+          input.setCustomValidity('Error text');
           input.reportValidity();
         });
       </script>`
diff --git a/packages/docs/src/stories/components/input.test.stories.ts b/packages/docs/src/stories/components/input.test.stories.ts
index 3d3a0bedb3..c5bd340d97 100644
--- a/packages/docs/src/stories/components/input.test.stories.ts
+++ b/packages/docs/src/stories/components/input.test.stories.ts
@@ -9,9 +9,8 @@ import {
 import { userEvent } from '@storybook/test';
 import { waitUntil } from '@open-wc/testing-helpers';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type SdInput from '../../../../components/src/components/input/input';
 
-const { argTypes, args, parameters } = storybookDefaults('sd-input');
+const { argTypes, parameters } = storybookDefaults('sd-input');
 const { generateTemplate } = storybookTemplate('sd-input');
 const { overrideArgs } = storybookHelpers('sd-input');
 const { generateScreenshotStory } = storybookUtilities;
@@ -19,8 +18,8 @@ const { generateScreenshotStory } = storybookUtilities;
 export default {
   title: 'Components/sd-input/Screenshots: sd-input',
   component: 'sd-input',
-  tags: ['!autodocs', 'skip-a11y'],
-  args,
+  tags: ['!autodocs'],
+  args: overrideArgs([{ type: 'attribute', name: 'label', value: 'Label' }]),
   argTypes: {
     ...argTypes,
     'type-attr': {
@@ -256,7 +255,7 @@ export const Sizes = {
 export const StyleOnValid = {
   name: 'Style on Valid',
   args: overrideArgs([
-    { type: 'attribute', name: 'value', value: 'valu' },
+    { type: 'attribute', name: 'value', value: 'value' },
     { type: 'attribute', name: 'label', value: 'Label' },
     { type: 'attribute', name: 'help-text', value: 'help-text' },
     { type: 'attribute', name: 'clearable', value: true },
@@ -409,6 +408,18 @@ export const Types = {
             args
           })}
         </div>
+        <div class="mb-2">
+          ${generateTemplate({
+            constants: [
+              { type: 'attribute', name: 'type', value: 'number' },
+              { type: 'attribute', name: 'label', value: 'Spin Buttons' },
+              { type: 'attribute', name: 'min', value: 0 },
+              { type: 'attribute', name: 'max', value: 100 },
+              { type: 'attribute', name: 'spin-buttons', value: 'true' }
+            ],
+            args
+          })}
+        </div>
       </div>
     `;
   }
@@ -689,9 +700,10 @@ export const Slots = {
               title: 'slot=...',
               values: [
                 {
-                  value: `<div slot='${slot}' class="slot slot--border slot--background h-6 ${
-                    slot === 'label' || slot === 'help-text' ? 'w-20' : 'w-6'
-                  }"></div>`,
+                  value: `<div slot='${slot}'
+                   class="slot slot--border slot--background h-6 ${
+                     slot === 'label' || slot === 'help-text' ? 'w-20' : 'w-6'
+                   }">${slot === 'label' ? 'Label' : ''}</div>`,
                   title: slot
                 }
               ]
@@ -851,60 +863,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Sample implementation of a currency stepper.
- */
-
-export const Samples = {
-  name: 'Sample: Currency Stepper',
-  render: () => {
-    return html`
-      <div class="w-[250px]">
-        <sd-input label="Currency Stepper" id="stepperSampleInput" type="number" min="0"
-          ><span slot="right" class="text-sm inline-flex items-center"
-            ><span class="text-neutral-700">EUR</span>
-            <button
-              disabled
-              id="stepDownButton"
-              @click=${() => {
-                const inputEl: SdInput = document.querySelector('#stepperSampleInput')!;
-                const stepDownButton: HTMLButtonElement = document.querySelector('#stepDownButton')!;
-                const numericValue = parseInt(inputEl.value, 10);
-                const stepDownValue = numericValue - 1;
-
-                if (stepDownValue <= 0) {
-                  stepDownButton.disabled = true;
-                  inputEl.value = '0.00';
-                } else {
-                  inputEl.stepDown();
-                  // Adjust input value to 2 decimals (currency)
-                  inputEl.value = String(parseInt(inputEl.value, 10).toFixed(2));
-                }
-              }}
-              class="ml-4 scale-[1.714] inline-flex items-center sd-interactive"
-            >
-              <sd-icon name="system/minus-circle"></sd-icon>
-            </button>
-            <button
-              id="stepUpButton"
-              @click=${() => {
-                const inputEl: SdInput = document.querySelector('#stepperSampleInput')!;
-                const stepDownButton: HTMLButtonElement = document.querySelector('#stepDownButton')!;
-                stepDownButton.disabled = false;
-                inputEl.stepUp();
-                // Adjust input value to 2 decimals (currency)
-                inputEl.value = String(parseInt(inputEl.value, 10).toFixed(2));
-              }}
-              class="ml-4 scale-[1.714] inline-flex items-center sd-interactive"
-            >
-              <sd-icon name="system/plus-circle"></sd-icon></button
-          ></span>
-        </sd-input>
-      </div>
-    `;
-  }
-};
-
 export const Combination = generateScreenshotStory([
   Default,
   Labels,
@@ -921,6 +879,5 @@ export const Combination = generateScreenshotStory([
   Slots,
   Parts,
   setCustomValidity,
-  Mouseless,
-  Samples
+  Mouseless
 ]);


Reviews:
user: login: paulovareiro29
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T17:09:26Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T11:41:13Z
user: login: smfonseca
state: DISMISSED
author_association: COLLABORATOR
submitted_at: 2025-03-06T14:24:45Z
user: login: mariohamann
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T08:17:04Z
user: login: mariohamann
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T08:22:10Z
user: login: mariohamann
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T08:25:14Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T17:05:42Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T18:04:03Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T18:04:11Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T18:14:51Z
user: login: mariohamann
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:36:50Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T14:17:48Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T14:18:01Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T14:18:44Z
user: login: MartaPintoTeixeira
body: I am approving but will open a ticket to solve the Read only issue (we need to define if it is text/black by default as in figma or keep it as in code): fix: 🤔 sd-input Read Only text color
[#1960](https://github.com/solid-design-system/solid/issues/1960)

state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T15:05:20Z
user: login: paulovareiro29
body: ![image](https://github.com/user-attachments/assets/804d3761-6a8c-4eec-88a2-5a48689c95e8)
I noticed the search button has some weird spacing when it is focus-visible.
This is being caused by the `margin-left` on the icon inside the button. It would be fixed by placing the `ml-2 ` on the button instead.

Also, is the agreement that we only implement the `sd-search` event for now?
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T15:15:49Z
user: login: paulovareiro29
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T16:10:33Z
user: login: smfonseca
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-11T16:22:45Z
user: login: smfonseca
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-11T16:43:21Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T17:29:57Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T17:30:06Z
user: login: auroraVasconcelos
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T17:30:16Z
user: login: paulovareiro29
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T17:32:35Z

Review comments:
diff_hunk: @@ -679,6 +679,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label="Search"
path: packages/components/src/components/input/input.ts
user: login: paulovareiro29
body: I believe this should be localized.
created_at: 2025-03-04T17:08:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -679,6 +679,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label="Search"
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-06T11:41:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,11 +12,11 @@ const { overrideArgs } = storybookHelpers('sd-input');
  * **Related templates**:
  * - [Input](?path=/docs/templates-input--docs)
  * - [Autocomplete](?path=/docs/templates-autocomplete--docs)
- * - [Tooltip](?path=/docs/templates-tooltip--docs)
+ * - [Input with Tooltip](?path=/docs/templates-tooltip--docs&args=open:!true#input%20with%20tooltip)
path: packages/docs/src/stories/components/input.stories.ts
user: login: smfonseca
body: ```suggestion
 * - [Input with Tooltip](?path=/docs/templates-tooltip--docs#input%20with%20tooltip)
```

`args=open` can be removed, it's actually not doing anything as far as I see
created_at: 2025-03-06T14:21:11Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,10 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Improved `sd-input` accessibility and consistency with other components.
+
+- Add labels to sd-input.
+- Add label to step up button and step down button icons.
+- Improve `Related Templates` links to ensure consistency with other components.
path: .changeset/forty-experts-tie.md
user: login: smfonseca
body: I would remove this point, it's not relevant to our users
created_at: 2025-03-06T14:22:50Z
author_association: COLLABORATOR
diff_hunk: @@ -679,6 +679,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
path: packages/components/src/components/input/input.ts
user: login: mariohamann
body: Seeing this, I ask myself if we should raise the tabindex on 0. The thing is: If we provide the label, it is only helpful if there's an action behind it. Otherwise it's just decorative. But: Do we actually send events for this? I'm currently a bit unsure, what the idea behind button is...
created_at: 2025-03-07T08:17:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -883,7 +884,7 @@ export const Samples = {
               }}
               class="ml-4 scale-[1.714] inline-flex items-center sd-interactive"
             >
-              <sd-icon name="system/minus-circle"></sd-icon>
+              <sd-icon name="system/minus-circle" label="Decrease button"></sd-icon>
path: packages/docs/src/stories/components/input.test.stories.ts
user: login: mariohamann
body: Please remove this whole example. We now handle this completely different, as stepUp and stepDown are now with steppers  integrated: https://solid-design-system.github.io/solid/fix_sd-input-a11y-issues/?path=/docs/templates-input--docs – instead adapt the following and add it to the "Type" screenshots:

```
<sd-input
    label="Spin Buttons"
    type="number"
    min="0"
    max="100"
    spin-buttons
  ></sd-input>
```
created_at: 2025-03-07T08:22:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -679,6 +679,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
path: packages/components/src/components/input/input.ts
user: login: mariohamann
body: So to make that more clear:
- When we make the button usable by keyboard users (`tabindex="0"`), the icon should a label.
- When we don't make it usable for keyboard users (`tabindex=-1"*), there should not be a label, as it would be just decorative.

With your change we have the worst of both worlds: not interactive but we provide information about an (then) decorative icon.

Therefore we have to clarify, which events are actually sent from our component, because I have the feeling, that the button is currently quite... useless.

Please clarify with @paulovareiro29 and @smfonseca 
created_at: 2025-03-07T08:25:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -679,6 +679,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: Hey @mariohamann 
As agreed during the meeting from today:

- Search icon will be interactive and through an event. Therefore, tabindex="-1" will be removed and the label will remain.

FYI: @smfonseca @paulovareiro29 
created_at: 2025-03-10T17:05:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,10 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Improved `sd-input` accessibility and consistency with other components.
+
+- Add labels to sd-input.
+- Add label to step up button and step down button icons.
+- Improve `Related Templates` links to ensure consistency with other components.
path: .changeset/forty-experts-tie.md
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-10T18:04:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -679,6 +679,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-10T18:04:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -883,7 +884,7 @@ export const Samples = {
               }}
               class="ml-4 scale-[1.714] inline-flex items-center sd-interactive"
             >
-              <sd-icon name="system/minus-circle"></sd-icon>
+              <sd-icon name="system/minus-circle" label="Decrease button"></sd-icon>
path: packages/docs/src/stories/components/input.test.stories.ts
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-10T18:14:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,9 @@
+---
+'@solid-design-system/components': patch
+---
+
+Improved `sd-input` accessibility.
path: .changeset/popular-boats-build.md
user: login: mariohamann
body: Actually we have a new feature now. Please adapt.
created_at: 2025-03-11T05:23:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -674,11 +682,13 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               : ''}
             ${this.type === 'search'
               ? html`
-                  <button class="flex items-center" type="button" tabindex="-1">
+                  <button class="flex items-center sd-interactive" type="button">
                     <sd-icon
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
+                      @click=${this.handleSearchClick}
path: packages/components/src/components/input/input.ts
user: login: mariohamann
body: Add test for localization and event(s).
created_at: 2025-03-11T05:25:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -279,6 +280,13 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     event.stopPropagation();
   }
 
+  private handleSearchClick(event: MouseEvent) {
+    this.value = '';
+    this.emit('sd-search');
path: packages/components/src/components/input/input.ts
user: login: mariohamann
body: Not sure if we should have sd-search-click, sd-search-blur etc. here. Please align with @paulovareiro29 and @smfonseca 
created_at: 2025-03-11T05:35:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,9 @@
+---
+'@solid-design-system/components': patch
+---
+
+Improved `sd-input` accessibility.
path: .changeset/popular-boats-build.md
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-11T14:17:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -674,11 +682,13 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               : ''}
             ${this.type === 'search'
               ? html`
-                  <button class="flex items-center" type="button" tabindex="-1">
+                  <button class="flex items-center sd-interactive" type="button">
                     <sd-icon
                       class=${cx(iconColor, iconMarginLeft, iconSize)}
                       library="system"
                       name="magnifying-glass"
+                      label=${this.localize.term('search')}
+                      @click=${this.handleSearchClick}
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-11T14:18:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -279,6 +280,13 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     event.stopPropagation();
   }
 
+  private handleSearchClick(event: MouseEvent) {
+    this.value = '';
+    this.emit('sd-search');
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: As discussed in the chat with @smfonseca, @paulovareiro29 and @mariohamann we will leave it as it is for now and adapt in case it is necessary
created_at: 2025-03-11T14:18:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,9 @@
+---
+'@solid-design-system/components': minor
+---
+
+Improved `sd-input type="search"` and accessibility.
+
+- Make the search button interactive.
+- Trigger `sd-search` event when search button on `sd-input type="search"` is clicked.
+- Add a translatable label to the search icon for the `sd-input type="search"`.
path: .changeset/popular-boats-build.md
user: login: smfonseca
body: ```suggestion
Added new functionality to the `sd-input` for type="search" and improved the component accessibility.

- Search icon button is interactive.
- Trigger `sd-search` event when search button on `sd-input type="search"` is clicked.
- Added a translatable label to the search icon for the `sd-input type="search"`.
```
created_at: 2025-03-11T16:09:26Z
author_association: COLLABORATOR
diff_hunk: @@ -1,6 +1,7 @@
 import '../../../dist/solid-components';
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import { getFormControls, serialize } from '../../utilities/form.js';
+
path: packages/components/src/components/input/input.test.ts
user: login: smfonseca
body: Please remove empty line
created_at: 2025-03-11T16:09:43Z
author_association: COLLABORATOR
diff_hunk: @@ -682,9 +682,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               : ''}
             ${this.type === 'search'
               ? html`
-                  <button class="flex items-center sd-interactive" type="button" @click=${this.handleSearchClick}>
+                  <button class="flex items-center sd-interactive ml-2" type="button" @click=${this.handleSearchClick}>
path: packages/components/src/components/input/input.ts
user: login: paulovareiro29
body: Maybe here we should use the `iconMarginLeft`, since it is dependant on input size
created_at: 2025-03-11T16:10:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -279,6 +280,13 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     event.stopPropagation();
   }
 
+  private handleSearchClick(event: MouseEvent) {
+    this.value = '';
path: packages/components/src/components/input/input.ts
user: login: smfonseca
body: As discussed on call, please remove this line so that users can decide if the input value should be cleared or not
created_at: 2025-03-11T16:43:18Z
author_association: COLLABORATOR
diff_hunk: @@ -1,6 +1,7 @@
 import '../../../dist/solid-components';
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import { getFormControls, serialize } from '../../utilities/form.js';
+
path: packages/components/src/components/input/input.test.ts
user: login: auroraVasconcelos
body: updated
created_at: 2025-03-11T17:29:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -279,6 +280,13 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     event.stopPropagation();
   }
 
+  private handleSearchClick(event: MouseEvent) {
+    this.value = '';
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-11T17:30:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -682,9 +682,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               : ''}
             ${this.type === 'search'
               ? html`
-                  <button class="flex items-center sd-interactive" type="button" @click=${this.handleSearchClick}>
+                  <button class="flex items-center sd-interactive ml-2" type="button" @click=${this.handleSearchClick}>
path: packages/components/src/components/input/input.ts
user: login: auroraVasconcelos
body: Updated
created_at: 2025-03-11T17:30:16Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-04T16:46:50Z
body: ###  🦋  Changeset detected

Latest commit: 0751d6aa567658efb6126803ea2c12ade2025f4b

**The changes in this PR will be included in the next version bump.**



Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/solid-design-system/solid/new/fix/sd-input-a11y-issues?filename=.changeset/red-cycles-heal.md&value=---%0A%22%40fake-scope%2Ffake-pkg%22%3A%20patch%0A---%0A%0Afix%3A%20sd%20input%20a11y%20issues%0A)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-04T16:49:44Z
body: 🚀 Storybook has been deployed for branch `fix_sd-input-a11y-issues`
- [View Storybook](https://solid-design-system.github.io/solid/fix_sd-input-a11y-issues)
author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-05T15:28:25Z
body: In: Related templates:

Instead of:
Tooltip
Change to:
Input with Tooltip

Instead of:
Autocomplete
Change to:
Input with Autocomplete

(see figma)
author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-05T15:30:26Z
body: The cross icon in Clearable has the wrong color.
In figma we have: icon-fill neutral-800 
author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-05T15:32:22Z
body: On the type samples the sample Tel:
The font inside the Input should be "filled" text black
author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-05T15:33:13Z
body: For invalid sample instead of: Error message
Change to: Error text
author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-05T15:35:33Z
body: Please assign me again once you check my comments

author_association: CONTRIBUTOR
user: login: auroraVasconcelos
created_at: 2025-03-06T11:40:50Z
body: > In: Related templates:
> 
> Instead of: Tooltip Change to: Input with Tooltip
> 

Updated.

> Instead of: Autocomplete Change to: Input with Autocomplete
> 
> (see figma)

@MartaPintoTeixeira, this is a particular case from templates, the Autocomplete is different from the others and doesn't really have a section called "Autocomplete with Input" or "Input with Autocomplete"

> The cross icon in Clearable has the wrong color. In figma we have: icon-fill neutral-800

Not fixed. However, a bug fix ticket for this issues already exists: [#1391](https://github.com/solid-design-system/solid/issues/1391)

> For invalid sample instead of: Error message Change to: Error text

Updated 

author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-11T14:54:39Z
body: Read Only sample:
The font color should be text/black for "Read only example"
see figma
author_association: CONTRIBUTOR
user: login: MartaPintoTeixeira
created_at: 2025-03-11T14:57:37Z
body: Once the comment above is solved let me know so I can approve. I don't have more comments.

author_association: CONTRIBUTOR
user: login: auroraVasconcelos
created_at: 2025-03-11T15:53:26Z
body: > ![image](https://private-user-images.githubusercontent.com/58229468/421441005-804d3761-6a8c-4eec-88a2-5a48689c95e8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDE3MDg2NDcsIm5iZiI6MTc0MTcwODM0NywicGF0aCI6Ii81ODIyOTQ2OC80MjE0NDEwMDUtODA0ZDM3NjEtNmE4Yy00ZWVjLTg4YTItNWE0ODY4OWM5NWU4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzExVDE1NTIyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTViZDQ1MzFiOTIyODM1NjRmNDRlNDA2NjdhMDliNTI4ZDI3ZWU1OGNlM2I3NzllZDUzNzNjMTA3OTExOTAzNDYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ory31WhaOoZn3K9W-T2DRyMLW53hPh2HvagM8R_Yahk)

I noticed the search button has some weird spacing when it is focus-visible. This is being caused by the `margin-left` on the icon inside the button. It would be fixed by placing the `ml-2 ` on the button instead.

<img width="488" alt="image" src="https://github.com/user-attachments/assets/cfa24a44-ced1-4a0f-8716-bdd8408f0dc9" />

The margin issue is fixed, good catch.


 > Also, is the agreement that we only implement the `sd-search` event for now?
 
 
 Yes

author_association: CONTRIBUTOR