Джон Эгеланд написал о реализации в Дискорде подсветки элементов, получивших фокус.

— Шорткаты позволяли переключать каналы, перемещаться по полям форм, открывать поиск и быстрый переключатель. Нужна была возможность полноценной работы с продуктом с помощью одной лишь клавиатуры;
— Сложнее всего было реализовать подсветку элемента, получившего фокус;
— Решение с псевдоклассом :focus и свойством outline в большом проекте ломается: обводка обрезается в контейнере со стилем overflow-hidden, не совпадает с радиусом скругления отдельных элементов, искажается маржинами и падингами;
— В итоге нашли масштабируемое решение, работающее «из коробки». JavaScript, React, подробнее в статье;
— Оно позволяет отследить фокус на отдельном элементе, а подсветить весь включающий его контейнер. Полезно, например, когда в чекбоксе можно нажать и на селектор и на текст, но фокус получает только селектор;
— Покрывает ситуации, когда элементы частично закрыты или прокручены за пределы экрана;
— Позволяет задать любой радиус скругления для обводки (в частности, это нужно, чтобы он совпадал с радиусом скругления элемента или компонента);
— Относительные сложности с подсветкой двигающегося или трансформирующегося элемента (обводка иногда запаздывает), что важно, так как анимаций в интерфейсах становится больше. А также — с изменением цвета обводки в зависимости от цвета фона (решение есть, но некрасивое и неэффективное).