feat(web): swap u and i focus shortcuts for right sidebar (#2321)

* feat(web): swap u and i focus shortcuts for right sidebar

With the sidebar on the right, I focuses the sidebar and U focuses the grid so keyboard layout matches the UI.

Co-authored-by: Cursor <cursoragent@cursor.com>

* test(e2e): update sidebar focus shortcut from u to i

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: tyler-dane

docs/acceptance/shortcuts.md

@@ -47,8 +47,8 @@ Helpful notes:
 | `J`                         | Day view  | Previous day                      |
 | `K`                         | Day view  | Next day                          |
 | `T`                         | Day view  | Go to today                       |
-| `U`                         | Day view  | Focus sidebar                     |
-| `I`                         | Day view  | Focus calendar                    |
+| `I`                         | Day view  | Focus sidebar                     |
+| `U`                         | Day view  | Focus calendar                    |
 | `C`                         | Day view  | Create timed event                |
 | `A`                         | Day view  | Create all-day event              |
 | `Shift+ArrowUp` / `Shift+ArrowDown` | Day view | Move focused timed event 15 min earlier/later |
@@ -57,8 +57,8 @@ Helpful notes:
 | `T`                         | Week view | Go to today                       |
 | `C`                         | Week view | Create timed event                |
 | `A`                         | Week view | Create all-day event              |
-| `U`                         | Week view | Focus sidebar                     |
-| `I`                         | Week view | Focus first calendar event        |
+| `I`                         | Week view | Focus sidebar                     |
+| `U`                         | Week view | Focus first calendar event        |
 | `Delete`                    | Week view | Delete focused/hovered event      |
 | `Shift+ArrowLeft`           | Week view | Move focused event to previous day |
 | `Shift+ArrowRight`          | Week view | Move focused event to next day    |

e2e/accessibility/focus-visible.spec.ts

@@ -5,11 +5,11 @@ import {
 } from "../utils/event-test-utils";
 
 // Regression guard for "feat(web): ensure all focus areas have visible
-// feedback". The "u" shortcut used to move focus into the sidebar with no
+// feedback". The "i" shortcut used to move focus into the sidebar with no
 // visible indicator (it landed on a month-nav chevron that had no focus
 // style, and a global outline reset stripped the fallback). It now lands on
 // the month picker's tab-stoppable day, which shows an accent focus ring.
-test("the 'u' shortcut moves focus to a visibly-focused sidebar day", async ({
+test("the 'i' shortcut moves focus to a visibly-focused sidebar day", async ({
   page,
 }) => {
   await prepareCalendarPage(page);
@@ -18,7 +18,7 @@ test("the 'u' shortcut moves focus to a visibly-focused sidebar day", async ({
   // A real (trusted) keypress so :focus-visible resolves as it would for a
   // keyboard user, and so the app's keyup shortcut handler fires.
   await page.locator("#mainGrid").focus();
-  await page.keyboard.press("u");
+  await page.keyboard.press("i");
 
   const focused = page.locator(".react-datepicker__day:focus");
   await expect(focused).toBeVisible();

packages/web/src/shortcuts/data/shortcuts.data.test.ts

@@ -123,12 +123,12 @@ describe("shortcuts.data", () => {
         );
 
       expect(findFocus("day")?.shortcuts).toEqual([
-        { keys: ["u"], label: "Focus sidebar" },
-        { keys: ["i"], label: "Focus calendar" },
+        { keys: ["i"], label: "Focus sidebar" },
+        { keys: ["u"], label: "Focus calendar" },
       ]);
       expect(findFocus("week")?.shortcuts).toEqual([
-        { keys: ["u"], label: "Focus sidebar" },
-        { keys: ["i"], label: "Focus calendar event" },
+        { keys: ["i"], label: "Focus sidebar" },
+        { keys: ["u"], label: "Focus calendar event" },
       ]);
     });
 

packages/web/src/shortcuts/data/shortcuts.data.ts

@@ -65,12 +65,12 @@ const getFocusShortcuts = (view: ShortcutMenuView): Shortcut[] =>
     ? []
     : view === "day"
       ? [
-          { keys: ["u"], label: "Focus sidebar" },
-          { keys: ["i"], label: "Focus calendar" },
+          { keys: ["i"], label: "Focus sidebar" },
+          { keys: ["u"], label: "Focus calendar" },
         ]
       : [
-          { keys: ["u"], label: "Focus sidebar" },
-          { keys: ["i"], label: "Focus calendar event" },
+          { keys: ["i"], label: "Focus sidebar" },
+          { keys: ["u"], label: "Focus calendar event" },
         ];
 
 const getEditShortcuts = (view: ShortcutMenuView): Shortcut[] =>

packages/web/src/views/Day/hooks/shortcuts/useDayViewShortcuts.test.tsx

@@ -60,11 +60,11 @@ describe("useDayViewShortcuts create", () => {
 });
 
 describe("useDayViewShortcuts focus", () => {
-  it("focuses the sidebar with U", async () => {
+  it("focuses the sidebar with I", async () => {
     const onFocusSidebar = mock();
 
     renderHook(() => useDayViewShortcuts({ onFocusSidebar }), { wrapper });
-    pressKey("U");
+    pressKey("I");
 
     await waitFor(() => {
       expect(onFocusSidebar).toHaveBeenCalled();

packages/web/src/views/Day/hooks/shortcuts/useDayViewShortcuts.ts

@@ -22,7 +22,7 @@ interface KeyboardShortcutsConfig {
  * Hook to handle keyboard shortcuts for the Day view.
  *
  * Mirrors the Week view's create/focus semantics: "c" creates a timed event,
- * "a" an all-day event, "u" focuses the sidebar, "i" the calendar.
+ * "a" an all-day event, "i" focuses the sidebar, "u" the calendar.
  */
 export function useDayViewShortcuts(config: KeyboardShortcutsConfig) {
   const {
@@ -48,7 +48,7 @@ export function useDayViewShortcuts(config: KeyboardShortcutsConfig) {
   });
 
   useAppShortcutUp("U", () => {
-    onFocusSidebar?.();
+    onFocusCalendar?.();
   });
 
   useAppShortcutUp("C", () => {
@@ -66,8 +66,8 @@ export function useDayViewShortcuts(config: KeyboardShortcutsConfig) {
     blurOnTrigger: true,
   });
 
-  // Calendar shortcuts
+  // Sidebar shortcuts
   useAppShortcutUp("I", () => {
-    onFocusCalendar?.();
+    onFocusSidebar?.();
   });
 }

packages/web/src/views/Day/view/DayViewContent.tsx

@@ -59,7 +59,7 @@ export const DayViewContent = memo(() => {
     viewActions.toggleSidebar();
   }, []);
 
-  // "u" implies the user wants the sidebar; open it first and defer focus a
+  // "i" implies the user wants the sidebar; open it first and defer focus a
   // frame so the sidebar exists in the DOM before we target it.
   const handleFocusSidebar = useCallback(() => {
     if (selectIsSidebarOpen(useViewStore.getState())) {

packages/web/src/views/Week/hooks/shortcuts/useWeekShortcuts.test.tsx

@@ -233,11 +233,11 @@ describe("useWeekShortcuts day shifting", () => {
 });
 
 describe("useWeekShortcuts calendar event targeting", () => {
-  it("focuses the first visible calendar event with I", async () => {
+  it("focuses the first visible calendar event with U", async () => {
     const button = addCalendarTarget();
 
     renderShortcuts();
-    pressKey("I");
+    pressKey("U");
 
     await waitFor(() => {
       expect(document.activeElement).toBe(button);
@@ -566,11 +566,11 @@ const addSidebarFixture = (options?: { includeItem?: boolean }) => {
 };
 
 describe("useWeekShortcuts sidebar focus", () => {
-  it("focuses the first interactive sidebar item with U", async () => {
+  it("focuses the first interactive sidebar item with I", async () => {
     const { weekItem } = addSidebarFixture({ includeItem: true });
 
     renderShortcuts();
-    pressKey("U");
+    pressKey("I");
 
     await waitFor(() => {
       expect(document.activeElement).toBe(weekItem);

packages/web/src/views/Week/hooks/shortcuts/useWeekShortcuts.ts

@@ -336,8 +336,8 @@ export const useWeekShortcuts = ({
   useAppShortcutUp("T", toToday);
   useAppShortcutUp("A", createAllDayDraftEvent);
   useAppShortcutUp("C", createTimedDraftEvent);
-  useAppShortcutUp("U", focusSidebar);
-  useAppShortcutUp("I", focusFirstCalendarEvent);
+  useAppShortcutUp("I", focusSidebar);
+  useAppShortcutUp("U", focusFirstCalendarEvent);
   useAppShortcut("Delete", deleteTargetedCalendarEvent, {
     ignoreInputs: false,
   });