Fix Animation Consistency

src/app/components/dropdown/dropdown.ts

@@ -14,21 +14,23 @@ export interface DropdownOption {
   templateUrl: './dropdown.html',
   styleUrl: './dropdown.scss',
   host: {
-    'role': 'combobox',
+    role: 'combobox',
     'aria-haspopup': 'listbox',
     '[attr.aria-expanded]': 'isOpen()',
     '[attr.aria-controls]': "isOpen() ? dropdownId + '-listbox' : null",
-    '[attr.aria-activedescendant]': "isOpen() && focusedIndex() >= 0 ? dropdownId + '-option-' + focusedIndex() : null",
+    '[attr.aria-activedescendant]':
+      "isOpen() && focusedIndex() >= 0 ? dropdownId + '-option-' + focusedIndex() : null",
     '[attr.aria-label]': 'ariaLabel()',
     '[class.open]': 'isOpen()',
-    'tabindex': '0',
+    '[class.reduce-motion]': 'reduceMotion()',
+    tabindex: '0',
     '(click)': 'toggle()',
     '(keydown.enter)': 'onEnter($event)',
     '(keydown.space)': 'onSpaceDown($event)',
     '(keydown.escape)': 'close()',
     '(keydown.arrowdown)': 'onArrowDown($event)',
-    '(keydown.arrowup)': 'onArrowUp($event)'
-  }
+    '(keydown.arrowup)': 'onArrowUp($event)',
+  },
 })
 export class Dropdown implements OnInit {
   options = input<Array<DropdownOption | string>>([]);
@@ -45,6 +47,12 @@ export class Dropdown implements OnInit {
   private static nextId = 0;
   dropdownId = `dropdown-${Dropdown.nextId++}`;
 
+  reduceMotion = input<boolean>(
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      : false,
+  );
+
   constructor(private el: ElementRef) {}
 
   ngOnInit() {
@@ -58,7 +66,7 @@ export class Dropdown implements OnInit {
   }
 
   normalizedOptions = computed(() => {
-    return this.options().map(opt => {
+    return this.options().map((opt) => {
       if (typeof opt === 'string') {
         return { label: opt, value: opt };
       }
@@ -67,9 +75,9 @@ export class Dropdown implements OnInit {
   });
 
   toggle() {
-    this.isOpen.update(v => !v);
+    this.isOpen.update((v) => !v);
     if (this.isOpen()) {
-      this.focusedIndex.set(this.normalizedOptions().findIndex(o => o.value === this.value()));
+      this.focusedIndex.set(this.normalizedOptions().findIndex((o) => o.value === this.value()));
     }
   }
 
@@ -114,7 +122,7 @@ export class Dropdown implements OnInit {
       this.toggle();
       return;
     }
-    this.focusedIndex.update(i => {
+    this.focusedIndex.update((i) => {
       if (i === -1) return 0;
       return (i + 1) % this.normalizedOptions().length;
     });
@@ -126,7 +134,7 @@ export class Dropdown implements OnInit {
       this.toggle();
       return;
     }
-    this.focusedIndex.update(i => {
+    this.focusedIndex.update((i) => {
       if (i <= 0) return this.normalizedOptions().length - 1;
       return i - 1;
     });
@@ -140,7 +148,7 @@ export class Dropdown implements OnInit {
   }
 
   selectedLabel = computed(() => {
-    const selected = this.normalizedOptions().find(o => o.value === this.value());
+    const selected = this.normalizedOptions().find((o) => o.value === this.value());
     return selected ? selected.label : this.placeholder();
   });
 }