feat(switch): focus on switch and not item

ovh · Jul 29, 2024 · 07e9afe · 07e9afe
1 parent 48fc876
commit 07e9afe
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/packages/ods/src/components/switch/src/components/ods-switch-item/ods-switch-item.scss b/packages/ods/src/components/switch/src/components/ods-switch-item/ods-switch-item.scss
@@ -3,6 +3,10 @@
 .ods-switch-item {
   height: 100%;
 
+  &:focus-visible {
+    @include focus.ods-focus();
+  }
+
   &__label {
     display: inline-flex;
     align-items: center;
@@ -36,8 +40,4 @@
       color:  var(--ods-color-primary-000);
     }
   }
-
-  :focus-visible {
-    @include focus.ods-focus();
-  }
 }
diff --git a/packages/ods/src/components/switch/src/components/ods-switch-item/ods-switch-item.tsx b/packages/ods/src/components/switch/src/components/ods-switch-item/ods-switch-item.tsx
@@ -13,22 +13,21 @@ export class OdsSwitchItem {
 
   @Prop({ reflect: true }) public ariaLabel: HTMLElement['ariaLabel'] = null;
   @Prop({ reflect: true }) public ariaLabelledby?: string;
+  @Prop({ reflect: true }) public inputId?: string;
   @Prop({ reflect: true }) public isChecked: boolean = false;
   @Prop({ reflect: true }) public isDisabled: boolean = false;
   @Prop({ reflect: true }) public isRequired: boolean = false;
-  @Prop({ reflect: true }) public inputId!: string;
   @Prop({ reflect: true }) public name!: string;
   @Prop({ reflect: true }) public value: string | null = null;
 
-  @Event() odsFocus!: EventEmitter<void>;
+  @Event() odsSwitchItemBlur!: EventEmitter<void>;
+  @Event() odsSwitchItemFocus!: EventEmitter<void>;
 
-  /** @internal */
   @Method()
   async reset(): Promise<void> {
     return this.odsRadio?.reset();
   }
 
-  /** @internal */
   @Method()
   async clear(): Promise<void> {
     return this.odsRadio?.clear();
@@ -39,7 +38,7 @@ export class OdsSwitchItem {
     return this.odsRadio?.getValidity();
   }
 
-  handleKeyDown(event: KeyboardEvent): void {
+  handleKeyUp(event: KeyboardEvent): void {
     if (this.isDisabled) {
       return;
     }
@@ -70,9 +69,10 @@ export class OdsSwitchItem {
             'ods-switch-item__label--disabled': this.isDisabled,
           }}
           htmlFor={ this.inputId }
-          onFocus={ () => this.odsFocus.emit() }
           tabindex={ !this.isDisabled ? 0 : -1 }
-          onKeyDown={ (event: KeyboardEvent) => this.handleKeyDown(event) }>
+          onBlur={ () => this.odsSwitchItemBlur.emit() }
+          onFocus={ () => this.odsSwitchItemFocus.emit() }
+          onKeyUp={ (event: KeyboardEvent) => this.handleKeyUp(event) }>
           <slot></slot>
         </label>
       </Host>

diff --git a/packages/ods/src/components/switch/src/components/ods-switch/ods-switch.scss b/packages/ods/src/components/switch/src/components/ods-switch/ods-switch.scss
@@ -1,7 +1,6 @@
 $ods-switch-height-sm: 24px;
 $ods-switch-height-md: 32px;
 
-
 :host(.ods-switch) {
   box-sizing: border-box;
   display: inline-flex;

diff --git a/packages/ods/src/components/switch/src/components/ods-switch/ods-switch.tsx b/packages/ods/src/components/switch/src/components/ods-switch/ods-switch.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, type EventEmitter, type FunctionalComponent, Host, Method, Prop, Watch, h } from '@stencil/core';
+import { Component, Element, Event, type EventEmitter, type FunctionalComponent, Host, Method, Prop, Watch, h, Listen } from '@stencil/core';
 import { type OdsRadioValueChangeEventDetail } from '../../../../radio/src';
 import { ODS_SWITCH_SIZE } from '../../constant/switch-size';
 import { clearItems, propagateInputId, propagateIsDisabled, propagateName, resetItems } from '../../controller/ods-switch';
@@ -16,9 +16,10 @@ export class OdsSwitch {
   @Prop({ reflect: true }) public name!: string;
   @Prop({ reflect: true }) public size: ODS_SWITCH_SIZE = ODS_SWITCH_SIZE.md;
 
-  @Event() odsBlur!: EventEmitter<void>;
+  @Event() odsBlur!: EventEmitter<CustomEvent<void>>;
   @Event() odsChange!: EventEmitter<OdsRadioValueChangeEventDetail>;
   @Event() odsClear!: EventEmitter<void>;
+  @Event() odsFocus!: EventEmitter<CustomEvent<void>>;
   @Event() odsReset!: EventEmitter<void>;
 
   @Method()
@@ -33,6 +34,16 @@ export class OdsSwitch {
     this.odsReset.emit();
   }
 
+  @Listen('odsSwitchItemFocus')
+  onFocus(event: CustomEvent<void>): void {
+    this.odsFocus.emit(event);
+  }
+
+  @Listen('odsSwitchItemBlur')
+  onBlur(event: CustomEvent<void>): void {
+    this.odsBlur.emit(event);
+  }
+
   @Watch('isDisabled')
   propagateIsDisabled(value: boolean): void {
     propagateIsDisabled(value, Array.from(this.el.children));
@@ -43,10 +54,6 @@ export class OdsSwitch {
     propagateName(value, Array.from(this.el.children));
   }
 
-  componentDidLoad(): void {
-    this.init();
-  }
-
   private init(): void {
     this.propagateIsDisabled(this.isDisabled ?? false);
     this.propagateName(this.name);
@@ -55,8 +62,7 @@ export class OdsSwitch {
 
   render(): FunctionalComponent {
     return (
-      <Host class={ `ods-switch ods-switch--${this.size}` }
-        onBlur={ this.odsBlur.emit() }>
+      <Host class={ `ods-switch ods-switch--${this.size}` }>
         <slot onSlotchange={ () => this.init() }></slot>
       </Host>
     );