Managing Focus Transitions in Slack

At Slack, we believe that designing an optimal keyboard experience is key to delivering a best-in-class product for all our customers. However, despite our design system components being individually accessible, we heard from keyboard users that we were still missing focus transitions in their end-to-end user experience. Non-sighted users who relied on a screenreader constantly…

Slack logo
Slack
•
Divya Kamath
•10 min read•advanced•
--
•View Original
ChefJenkinsKotlinModalReact

Overview

The article discusses the implementation of a central component called FocusTransitionManager in Slack to enhance keyboard navigation and accessibility for users relying on screen readers. It highlights the challenges faced in managing focus transitions and the solutions developed to ensure a seamless user experience.

What You'll Learn

1

How to implement a central focus management system in React applications

2

Why consistent focus transitions are crucial for accessibility in web applications

3

When to use unique identifiers for managing focus in complex user interfaces

Prerequisites & Requirements

  • Understanding of React and accessibility principles
  • Experience with managing focus in web applications(optional)

Key Questions Answered

How does FocusTransitionManager improve keyboard navigation in Slack?
FocusTransitionManager centralizes focus management in Slack, allowing for consistent focus transitions between components. This helps users relying on screen readers to navigate the app more effectively by ensuring that focus moves to the next actionable element seamlessly, enhancing overall accessibility.
What challenges are faced in managing focus transitions in Slack?
The challenges include handling multiple interactions across different sections, ensuring focus returns to the correct element after dialogs close, and maintaining focus during dynamic state changes in the React application. These complexities require careful management to avoid confusing users.
What is the role of unique identifiers in focus management?
Unique identifiers, referred to as focusKeys, are used by components to receive focus instructions. This allows the FocusTransitionManager to direct focus accurately to the intended component, facilitating a smoother user experience, especially in complex interfaces.

Key Statistics & Figures

Number of user flows adopting FocusTransitionManager
100+
Within a couple of months of implementation, the FocusTransitionManager was integrated across over 100 user flows.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used to build the FocusTransitionManager component for managing focus transitions.

Key Actionable Insights

1
Implementing a centralized focus management system can significantly enhance user experience for keyboard users.
By using a system like FocusTransitionManager, developers can ensure that focus transitions are handled consistently, reducing confusion for users relying on screen readers.
2
Utilizing unique identifiers for components can streamline focus management in complex applications.
This practice allows for precise control over focus transitions, which is crucial in maintaining accessibility standards across various user interactions.
3
Regularly testing focus transitions during development can prevent accessibility issues before deployment.
By incorporating focus management testing into the development cycle, teams can identify and resolve potential pitfalls early, ensuring a more inclusive product.

Common Pitfalls

1
Neglecting to manage focus transitions can lead to a confusing experience for users relying on screen readers.
This often occurs when developers overlook the importance of focus management, resulting in users losing track of their navigation context within the application.

Related Concepts

Accessibility In Web Applications
Focus Management In UI Design
React Component Architecture