feat(textfield): added name attribute to textfield (#3752)

* feat(textfield): added name attribute to textfield

* chore(checkbox,switch): added name attribute

* chore(textfield): updated golden image hash

* chore(textfield,checkbox): suggested changes

* chore(textfield,checkbox): suggested chnages

---------

Co-authored-by: Najika Halsema Yoo <44980010+najikahalsema@users.noreply.github.com>

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 51f40cf6afe7adcbfc314c6f9341fbb48f4cbe98
+        default: 9cf2085d96fcad2e79e07df8fdf6a8d74988d731
     wireit_cache_name:
         type: string
         default: wireit

packages/checkbox/src/CheckboxBase.ts

@@ -15,6 +15,7 @@ import {
     property,
     query,
 } from '@spectrum-web-components/base/src/decorators.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 
 export class CheckboxBase extends Focusable {
@@ -24,6 +25,9 @@ export class CheckboxBase extends Focusable {
     @property({ type: Boolean, reflect: true })
     public readonly = false;
 
+    @property({ type: String, reflect: true })
+    public name: string | undefined;
+
     @query('#input')
     protected inputElement!: HTMLInputElement;
 
@@ -54,6 +58,7 @@ export class CheckboxBase extends Focusable {
     protected override render(): TemplateResult {
         return html`
             <input
+                name=${ifDefined(this.name || undefined)}
                 id="input"
                 type="checkbox"
                 .checked=${this.checked}

packages/checkbox/test/checkbox.test.ts

@@ -238,6 +238,16 @@ describe('Checkbox', () => {
         expect(el.checked).to.be.true;
     });
 
+    it('has name attribute', () => {
+        let el = testFixture.querySelector('#checkbox0') as Checkbox;
+
+        el = testFixture.querySelector('#checkbox1') as Checkbox;
+        expect(el.hasAttribute('name'));
+        expect(el.name).to.be.undefined;
+        el.setAttribute('name', 'test');
+        expect(el.name).to.be.equal('test');
+    });
+
     it('handles click events', async () => {
         const el = testFixture.querySelector('#checkbox1') as Checkbox;
         expect(el.checked).to.be.true;
@@ -297,7 +307,6 @@ describe('Checkbox', () => {
         expect(el.indeterminate).to.be.false;
         expect(inputEl.checked).to.be.false;
         expect(inputEl.indeterminate).to.be.false;
-
     });
 
     it('`indeterminate, not checked` becomes `checked` on click', async () => {

packages/switch/test/switch.test.ts

@@ -54,6 +54,17 @@ describe('Switch', () => {
 
         expect(labelEl.getAttribute('for')).to.equal(inputEl.id);
     });
+    it('has name attribute', async () => {
+        const el = await fixture<Switch>(
+            html`
+                <sp-switch>Not Checked</sp-switch>
+            `
+        );
+
+        await elementUpdated(el);
+
+        await expect(el.hasAttribute('name'));
+    });
     it('loads `checked` switch accessibly', async () => {
         const el = await fixture<Switch>(
             html`

packages/textfield/src/Textfield.ts

@@ -70,6 +70,9 @@ export class TextfieldBase extends ManageHelpText(
     @property()
     public label = '';
 
+    @property({ type: String, reflect: true })
+    public name: string | undefined;
+
     @property()
     public placeholder = '';
 
@@ -237,6 +240,7 @@ export class TextfieldBase extends ManageHelpText(
                 : nothing}
             <!-- @ts-ignore -->
             <textarea
+                name=${ifDefined(this.name || undefined)}
                 aria-describedby=${this.helpTextId}
                 aria-label=${this.label ||
                 this.appliedLabel ||
@@ -270,6 +274,7 @@ export class TextfieldBase extends ManageHelpText(
         return html`
             <!-- @ts-ignore -->
             <input
+                name=${ifDefined(this.name || undefined)}
                 type=${this.type}
                 aria-describedby=${this.helpTextId}
                 aria-label=${this.label ||

packages/textfield/stories/textfield.stories.ts

@@ -82,6 +82,16 @@ export const allowedKeys = (): TemplateResult => {
     `;
 };
 
+export const withNameAttribute = (): TemplateResult => {
+    return html`
+        <sp-textfield
+            name="name"
+            placeholder="Enter your name"
+            allowed-keys="a-z"
+        ></sp-textfield>
+    `;
+};
+
 export const readonly = (): TemplateResult => html`
     <sp-textfield
         label="Enter your life story"

packages/textfield/test/textfield.test.ts

@@ -342,6 +342,34 @@ describe('Textfield', () => {
             : null;
         expect(input).to.not.be.null;
     });
+    it('handles `name` attribute', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield placeholder="Enter your name"></sp-textfield>
+            `
+        );
+        expect(el).to.not.equal(undefined);
+        expect(el.name).to.be.undefined;
+
+        el.setAttribute('name', 'test');
+        expect(el.name).to.be.equal('test');
+    });
+    it('handles `name` attribute with multiline', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    name="name"
+                    placeholder="Enter your name"
+                    multiline
+                ></sp-textfield>
+            `
+        );
+        expect(el).to.not.equal(undefined);
+        const input = el.shadowRoot
+            ? el.shadowRoot.querySelector('textarea')
+            : null;
+        expect(input?.name).to.equal('name');
+    });
     it('valid - multiline', async () => {
         const el = await litFixture<Textfield>(
             html`