CryptPad 通知菜单焦点丢失问题分析与解决方案

问题背景

在 CryptPad 5.7.0 版本中，Windows 平台使用 Firefox 浏览器时，用户报告了一个键盘导航相关的可访问性问题。当用户通过键盘操作删除通知菜单中的项目后，系统焦点会丢失，导致后续无法继续使用键盘导航浏览剩余通知。

技术分析

焦点管理机制

在现代 Web 应用中，键盘导航的可访问性依赖于正确的焦点管理。当 DOM 元素被动态移除时，浏览器需要重新计算并设置新的焦点位置。CryptPad 的通知菜单在删除项目后，未能正确处理这一焦点转移逻辑。

问题根源

1. 焦点未正确转移：删除通知项后，应用没有主动将焦点设置到相邻的通知项上
2. 事件处理不完整：删除操作可能没有考虑到键盘用户的特殊需求
3. 动态内容更新：通知列表的动态更新可能打断了原有的焦点流

解决方案

最佳实践

1. 焦点恢复策略：在删除元素前，先确定下一个应该获得焦点的元素
2. ARIA 实时区域：使用 aria-live 属性确保屏幕阅读器能正确感知变化
3. 键盘事件处理：完善键盘事件处理逻辑，确保操作后焦点位置合理

具体实现建议

function deleteNotification(notificationElement) {
    // 获取相邻元素作为备用焦点目标
    const nextFocusTarget = notificationElement.nextElementSibling || 
                          notificationElement.previousElementSibling ||
                          document.querySelector('.notifications-header');
    
    // 执行删除操作
    notificationElement.remove();
    
    // 设置新焦点
    if (nextFocusTarget) {
        nextFocusTarget.focus();
    } else {
        // 如果没有通知了，返回菜单按钮
        document.querySelector('.notifications-toggle').focus();
    }
}

用户体验考量

1. 可预测性：用户应能预测键盘操作后的焦点位置
2. 连续性：操作流程不应因焦点丢失而中断
3. 反馈机制：应为视觉障碍用户提供操作成功的听觉反馈

测试建议

1. 键盘导航测试：全程使用键盘测试通知操作流程
2. 屏幕阅读器测试：验证操作后焦点和朗读内容是否正确
3. 边界测试：测试删除最后一个通知时的焦点行为

总结

CryptPad 作为注重隐私的协作平台，可访问性是其核心价值之一。通过完善通知菜单的焦点管理，可以显著提升键盘用户和辅助技术用户的使用体验。这类问题的解决不仅修复了特定场景下的缺陷，也为整个应用的可访问性树立了良好实践。