Improve Accessibility of Components

src/app/components/switch/switch.html

@@ -1 +1 @@
-<div class="switch-knob"></div>
+<div class="switch-knob" aria-hidden="true"></div>

src/app/components/switch/switch.ts

@@ -1,4 +1,4 @@
-import { Component, input, model, output } from '@angular/core'
+import { Component, input, model, output } from '@angular/core';
 
 @Component({
   selector: 'switch',
@@ -6,28 +6,28 @@ import { Component, input, model, output } from '@angular/core'
   templateUrl: './switch.html',
   styleUrl: './switch.scss',
   host: {
-    'role': 'switch',
-    'tabindex': '0',
+    role: 'switch',
+    tabindex: '0',
     '[attr.aria-checked]': 'isActive()',
     '[class.active]': 'isActive()',
     '[class.reduce-motion]': 'reduceMotion()',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
-    '(keydown.space)': 'onSpaceDown($event)'
-  }
+    '(keydown.space)': 'onSpaceDown($event)',
+  },
 })
 export class Switch {
   isActive = model<boolean>(false);
   reduceMotion = input<boolean>(
     typeof window !== 'undefined'
       ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-      : false
+      : false,
   );
-  toggle = output<boolean>()
+  toggle = output<boolean>();
 
   onClick(): void {
-    this.isActive.update(value => !value)
-    this.onToggle()
+    this.isActive.update((value) => !value);
+    this.onToggle();
   }
 
   onSpaceDown(event: Event): void {
@@ -36,6 +36,6 @@ export class Switch {
   }
 
   onToggle(): void {
-    this.toggle.emit(this.isActive())
+    this.toggle.emit(this.isActive());
   }
 }