1---
2title: No Animation for Keyboard Navigation
3impact: MEDIUM
4tags: none, keyboard, a11y
5---
6 
7## No Animation for Keyboard Navigation
8 
9Keyboard navigation should be instant, no animation.
10 
11**Incorrect (animated focus):**
12 
13```tsx
14function Menu() {
15  return items.map(item => (
16    <motion.li
17      whileFocus={{ scale: 1.05 }}
18      transition={{ duration: 0.2 }}
19    />
20  ));
21}
22```
23 
24**Correct (CSS focus-visible only):**
25 
26```tsx
27function Menu() {
28  return items.map(item => (
29    <li className={styles.menuItem} />
30  ));
31}
32```
33