TechPrufer
Get started
Slack
Slack logoSlack · Feature trail

Keyboard Focus Management System

1 post · Jul 2021

What this trail covers

This thread tracks the evolution of Slack's focus management system for keyboard navigation and accessibility. Initial posts detail the problem of inconsistent focus transitions for keyboard and screen reader users, leading to confusion and difficulty navigating the application. This post introduces the `FocusTransitionManager`, a central React component that coordinates focus movements across the app using `focusKey` identifiers and React Context. It details API methods for transitioning focus, handling metadata, and managing focus conditions. The system has been adopted across numerous user flows and integrated into core design system components like Modals, significantly improving the keyboard user experience and scaling accessibility efforts.

All Slack trails
  1. Managing Focus Transitions in SlackThis post introduces the `FocusTransitionManager`, a new central React component designed to standardize and improve keyboard focus transitions within Slack's application. It details the challenges of managing focus dynamically in a React environment, especially for accessibility. The solution involves a `FocusTransitionManager` component using React Context and `focusKey` identifiers to coordinate focus movements between sender and receiver components. Key features include `transitionFocusTo` and `shouldTransitionFocus` APIs, support for `focusMetadata` for specific element targeting, a `forceFocus` option, and `additionalCondition` for asynchronous readiness. The post also explains heuristics for detecting 'keyboard mode' and the system's impact on routing layer integration and core components like Modals.