Skip to main content

Keyboard Shortcuts

Comprehensive guide to keyboard navigation and shortcuts in Shyfts, designed for power users and accessibility compliance.

Overview​

Shyfts is designed to be fully keyboard accessible, following WCAG 2.1 AA guidelines. While the application prioritises touch-friendly mobile interactions, all features can be accessed via keyboard.

CategoryDescription
NavigationMove between pages and elements
ModalsOpen and close dialogs
FormsSubmit and navigate form fields
MessagingCompose and send messages
SessionActivity tracking and timeout management

Global Shortcuts​

Standard Web Navigation​

ShortcutAction
TabMove to next focusable element
Shift + TabMove to previous focusable element
EnterActivate focused link or button
SpaceActivate focused button or checkbox
EscapeClose modal or menu

Focus Indicators​

All focusable elements display a visible focus indicator:

  • Links and buttons show a ring outline
  • Form inputs highlight with border colour change
  • Interactive cards display elevation and scale effects

Closing Modals​

Shortcut: Escape

All modal dialogs in Shyfts can be closed by pressing the Escape key:

// Source: src/components/modals/LogoutConfirmModal.tsx:20-31
React.useEffect(() => {
  const handleEscape = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose()
    }
  }

  if (isOpen) {
    document.addEventListener('keydown', handleEscape)
    return () => document.removeEventListener('keydown', handleEscape)
  }
}, [isOpen, onClose])

Applies to:

  • Logout confirmation modal
  • Shift creation/edit modals
  • Leave request modals
  • Staff profile modals
  • Session timeout warning

Focus Trapping​

When a modal is open, focus is trapped within the modal:

ShortcutBehaviour
TabCycle forward through modal elements
Shift + TabCycle backward through modal elements
Focus wraps from last to first element

This prevents keyboard users from accidentally navigating outside the modal.

Mobile Menu Shortcuts​

The mobile navigation menu includes full keyboard support.

Opening the Menu​

  1. Navigate to the hamburger menu button using Tab
  2. Press Enter or Space to open

Within the Menu​

ShortcutAction
TabMove to next menu item
Shift + TabMove to previous menu item
EnterActivate menu link
EscapeClose menu
// Source: src/components/navigation/MobileMenu.tsx:85-110
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Tab') {
    const focusableElements = menuRef.current?.querySelectorAll<HTMLElement>(
      'a, button, [tabindex]:not([tabindex="-1"])'
    )

    if (!focusableElements || focusableElements.length === 0) return

    const firstElement = focusableElements[0]
    const lastElement = focusableElements[focusableElements.length - 1]

    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault()
      lastElement?.focus()
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault()
      firstElement?.focus()
    }
  } else if (e.key === 'Escape') {
    onClose()
  }
}

Touch Equivalent​

On touch devices, swipe left (50px threshold) to close the menu.

Messaging Shortcuts​

Message Composer​

When composing messages in the inbox:

ShortcutAction
EnterSend message immediately
Shift + EnterInsert new line (multi-line message)
// Source: src/components/messages/MessageThread.tsx:160-165
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    sendMessage()
  }
}
Quick Send

Press Enter to send your message instantly. Use Shift + Enter if you need to add line breaks within your message.

Message Composer Placeholder​

The message input shows a reminder:

Write a message... (Enter to send, Shift+Enter for new line)

Calendar Shortcuts​

Shift blocks in the calendar are keyboard focusable:

// Source: src/components/calendar/ShiftBlock.tsx:59-61
role="button"
tabIndex={0}
aria-label={`Shift for ${shift.staff?.first_name} ${shift.staff?.last_name}`}
ShortcutAction
TabMove to next shift block
Shift + TabMove to previous shift block
Enter or SpaceOpen shift details

Drag Operations​

Currently, drag-and-drop operations (moving shifts between times/rooms) require mouse or touch interaction. Keyboard-accessible shift editing is available through:

  1. Focus the shift block
  2. Press Enter to open details
  3. Edit time/room in the modal form
  4. Submit changes

Form Shortcuts​

Standard Form Navigation​

ShortcutAction
TabMove to next form field
Shift + TabMove to previous form field
EnterSubmit form (in most cases)
SpaceToggle checkbox or radio
Arrow keysNavigate select options

Date and Time Inputs​

ShortcutAction
Arrow Up/DownIncrement/decrement value
TabMove between date segments
EnterConfirm selection

Form Validation​

Invalid fields are announced to screen readers and display visual error indicators.

Session Management​

Activity Tracking​

The session monitor tracks keyboard activity to reset the inactivity timer:

// Source: src/components/auth/SessionMonitor.tsx:94
const events = ['mousedown', 'keydown', 'scroll', 'touchstart', 'click']

events.forEach(event => {
  window.addEventListener(event, handleActivity)
})

Session Behaviour:

  • Session timeout: 30 minutes of inactivity
  • Warning appears: 5 minutes before timeout
  • Any keyboard activity resets the timer

Session Timeout Modal​

When the session warning appears:

ActionKeyboard Access
Continue workingTab to "Continue" button, Enter
LogoutTab to "Logout" button, Enter
DismissEscape (continues session)

Accessibility Features​

Skip links allow keyboard users to bypass repetitive navigation:

  1. Press Tab immediately after page load
  2. A "Skip to content" link appears
  3. Press Enter to jump to main content

ARIA Labels​

All interactive elements include descriptive labels for screen readers:

// Example: Shift block aria-label
aria-label={`Shift for ${shift.staff?.first_name} ${shift.staff?.last_name}`}

// Example: Mobile menu close button
aria-label="Close mobile menu"

Focus Management​

  • Focus returns to trigger element when modals close
  • New page content announces to screen readers
  • Error messages are announced immediately

Touch Targets​

All interactive elements maintain 44px minimum touch/click targets for accessibility:

// Source: src/components/navigation/MobileMenu.tsx:193
className="min-h-[44px]" // 44px touch target

This ensures keyboard users with motor impairments can easily activate elements.

Quick Reference Card​

Modal/Menu Shortcuts​

ContextShortcutAction
Any modalEscapeClose modal
Mobile menuEscapeClose menu
ModalTabNext element (trapped)
ModalShift + TabPrevious element (trapped)

Messaging Shortcuts​

ContextShortcutAction
Message inputEnterSend message
Message inputShift + EnterNew line
ContextShortcutAction
GlobalTabNext focusable element
GlobalShift + TabPrevious focusable element
GlobalEnterActivate link/button
GlobalSpaceActivate button/checkbox

Browser Shortcuts​

Shyfts supports standard browser shortcuts that work across all pages:

ShortcutAction
Ctrl/Cmd + RRefresh page
Ctrl/Cmd + FSearch on page
Alt + Left ArrowGo back
Alt + Right ArrowGo forward
F11Toggle fullscreen

Screen Reader Support​

Shyfts is compatible with popular screen readers:

Screen ReaderPlatformSupport
NVDAWindows✅ Full
JAWSWindows✅ Full
VoiceOvermacOS/iOS✅ Full
TalkBackAndroid✅ Full

Announcements​

The application announces:

  • Page navigation changes
  • Form validation errors
  • Toast notifications
  • Modal open/close events
  • Session timeout warnings

Source Files:

  • src/components/navigation/MobileMenu.tsx - Mobile menu keyboard handling
  • src/components/modals/LogoutConfirmModal.tsx - Modal escape key handling
  • src/components/messages/MessageThread.tsx - Message composer shortcuts
  • src/components/auth/SessionMonitor.tsx - Activity tracking
  • src/components/calendar/ShiftBlock.tsx - Calendar accessibility