feat(switch): change code following the CR

docs/example/Switch/demos/basicUsage.tsx

@@ -5,5 +5,5 @@
 import { Switch } from '@banana-ui/react';
 
 export default function BasicUsage() {
-  return <Switch></Switch>;
+  return <Switch />;
 }

docs/example/Switch/demos/disabled.tsx

@@ -13,8 +13,8 @@ export default function Disabled() {
         gap: '6px',
       }}
     >
-      <Switch disabled></Switch>
-      <Switch disabled checked></Switch>
+      <Switch disabled />
+      <Switch disabled checked />
     </div>
   );
 }

docs/example/Switch/demos/size.tsx

@@ -14,8 +14,8 @@ export default function BasicUsage() {
         gap: '6px',
       }}
     >
-      <Switch size="small"></Switch>
-      <Switch></Switch>
+      <Switch size="small" />
+      <Switch />
       <span>自定义尺寸</span>
       <Switch
         style={
@@ -25,7 +25,7 @@ export default function BasicUsage() {
             '--banana-switch-control-size': '24px',
           } as React.CSSProperties
         }
-      ></Switch>
+      />
     </div>
   );
 }

docs/example/Switch/demos/withContent.tsx

@@ -10,7 +10,7 @@ export default function WithContent() {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       //@ts-ignore
       t="1711257906171"
-      class="icon"
+      className="icon"
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -42,7 +42,7 @@ export default function WithContent() {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       //@ts-ignore
       t="1711257880605"
-      class="icon"
+      className="icon"
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"

docs/example/Switch/index.md

@@ -18,6 +18,7 @@ demo:
 <code src="./demos/withContent.tsx"></code>
 <code src="./demos/disabled.tsx"></code>
 <code src="./demos/size.tsx"></code>
+<code src="./demos/formTest.tsx"></code>
 
 ## 属性 - Attributes & Properties
 

packages/banana-react/src/switch/index.ts

@@ -1,12 +1,18 @@
 import { BSwitch } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: boolean;
+    }>
+  >,
+};
+
 export const Switch = createComponent({
   tagName: 'b-switch',
   react: React,
   elementClass: BSwitch,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana/src/switch/index.test.ts

@@ -115,27 +115,25 @@ describe('b-switch', () => {
       expect(spy.calledTwice).to.equal(true);
     });
 
-    // it('should toggle the display text when provide slot to switch', async () => {
-    //   const element = await fixture<BSwitch>(html`<b-switch>
-    //     <span slot="checked_content">open</span>
-    //     <span slot="unchecked_content">unOpen</span>
-    //   </b-switch>`);
-    //   const clickElement = element.shadowRoot?.querySelector('.banana-switch') as HTMLLabelElement;
-
-    //   const checkedEl = element.shadowRoot?.querySelector('.switch__inner-checked') as HTMLLabelElement;
-
-    //   const unCheckedEl = element.shadowRoot?.querySelector('.switch__inner-unchecked') as HTMLLabelElement;
-
-    //   console.log('checkedEl', checkedEl);
-
-    //   // Change event should be fired.
-    //   expect(unCheckedEl.textContent).equal('unOpen');
-    //   const spy = sinon.spy();
-    //   element.addEventListener('change', spy);
-    //   clickElement.click();
-    //   await element.updateComplete;
-    //   expect(checkedEl.textContent).equal('open');
-    // });
+    it('should toggle the display text when provide slot to switch', async () => {
+      const element = await fixture<BSwitch>(html`<b-switch>
+        <span slot="checked">open</span>
+        <span slot="unchecked">unOpen</span>
+      </b-switch>`);
+      const clickElement = element.shadowRoot?.querySelector('.switch__inner') as HTMLLabelElement;
+
+      const checkedEl = element.shadowRoot?.querySelector('slot[name="checked"]') as HTMLSlotElement;
+
+      const unCheckedEl = element.shadowRoot?.querySelector('slot[name="unchecked"]') as HTMLSlotElement;
+
+      // Change event should be fired.
+      expect(unCheckedEl.assignedElements()[0].textContent).equal('unOpen');
+      const spy = sinon.spy();
+      element.addEventListener('change', spy);
+      clickElement.click();
+      await element.updateComplete;
+      expect(checkedEl.assignedElements()[0].textContent).equal('open');
+    });
   });
 
   describe('form', () => {

packages/banana/src/switch/index.ts

@@ -77,6 +77,13 @@ export default class BSwitch
     this.dispatchEvent(new CustomEvent('change', eventOptions));
   }
 
+  private _handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._handleChange();
+    }
+  }
+
   protected firstUpdated(): void {
     if (!this.checked) {
       this.checked = this.defaultChecked;
@@ -97,24 +104,20 @@ export default class BSwitch
   }
 
   render() {
-    // eslint-disable-next-line lit-a11y/click-events-have-key-events
     return html`<div
+      @click=${this._handleChange}
+      @keydown=${this._handleKeyDown}
       part="base"
       class=${classMap({
         'banana-switch': true,
         'banana-switch-sm': this.size === 'small',
       })}
-      @click=${this._handleChange}
-      aria-label="Name"
     >
       <input
-        part="input"
-        aria-label="checkbox"
-        ?checked=${this.checked}
-        type="checkbox"
         class="switch__input"
-        role="switch"
-        aria-checked=${this.checked}
+        aria-label="Switch__inner"
+        value=${this.checked ? '1' : ''}
+        ?require=${this.required}
       />
       <div
         part="control"