fix(editor): fix accessibility issues with editor tabs and close buttons #3916
Conversation
- Add role="tab" to tabs - Add aria-expanded attribute to indicate the active tab - Enable keyboard focus on tabs - Support arrow keys: left or up arrow moves to the previous tab, right or down arrow moves to the next tab, end key moves to the last tab, home key moves to the first tab - Support Enter or Space key to activate the focused tab, and Menu key to open the context menu - Add role="button", aria-label, and keyboard shortcut hints to all tab close buttons - Add keyboard focus to the close button of the active tab, support Space or Enter key to activate the close button Closes opensumi#3900
|
|
Walkthrough此次更改显著提升了编辑器中 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Keyboard
participant TabsComponent
User->>Keyboard: 按下方向键
Keyboard->>TabsComponent: 触发 handleKeyDown
TabsComponent->>TabsComponent: 处理导航 (移动焦点)
TabsComponent->>User: 更新高亮状态
User->>Keyboard: 按下 Space 或 Enter
Keyboard->>TabsComponent: 触发 simulateClick
TabsComponent->>TabsComponent: 执行当前标签的点击操作
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #3916 +/- ##
==========================================
- Coverage 54.84% 54.83% -0.01%
==========================================
Files 1559 1559
Lines 95181 95181
Branches 19497 19497
==========================================
- Hits 52198 52195 -3
- Misses 35707 35709 +2
- Partials 7276 7277 +1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| @@ -370,15 +371,91 @@ export const Tabs = ({ group }: ITabsProps) => { | |||
| [editorService], | |||
| ); | |||
|
|
|||
| // 处理选项卡键盘事件 | |||
| const handleKeyDown = (e: React.KeyboardEvent) => { | |||
There was a problem hiding this comment.
在 OpenSumi 中目前针对快捷键有统一实现，不建议通过这种方式绑定键盘事件处理，可以通过 keybindingService 去注册快捷键方式实现，而选项卡是否聚焦，应该设定相应的 when 来控制，相关可参考的代码见：
注册与前端组件绑定的 contextKey（when）：
当前实现后续可能会出现快捷键冲突问题
There was a problem hiding this comment.
收到
请问a给组件添加aria、role、tabIndex属性这些可以直接加在组件上吗，有没有统一处理机制。我们先加常规的无障碍属性和tabIndex。键盘的单独提交
|
单个 PR 内容可以简化一下，例如本次可以先把部分属性状态的更新提交 @lilangtop |
请问给组件添加键盘点击的支持是否可以使用这种方式呢。 const handleKeyDown = (e: React.KeyboardEvent) => { |
| tabIndex={isCurrent ? 0 : -1} | ||
| role='button' | ||
| aria-label={editorCloseTabButtonAriaLabel} | ||
| aria-description={isMacintosh ? '⌘W' : 'Ctrl+W'} |
There was a problem hiding this comment.
这里的快捷键 ⌘W 是跟随着快捷键配置走的，不一定一直是 ⌘W。
你可以通过 keybindingRegistry 来获取 EDITOR_COMMANDS.CLOSE.id 所绑定的快捷键信息，并将其转为文案显示。可以参考这里
https://github.com/opensumi/core/blob/v3.2/packages/ai-native/src/browser/widget/inline-hint/inline-hint-line-widget.tsx#L38-L45
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| // 模拟鼠标左键点击事件 | ||
| const mouseDownEvent = new window.MouseEvent('mousedown', { bubbles: true, button: 0 }); |
There was a problem hiding this comment.
直接调用 group.close(resource.uri) 吧。和 onMouseDown 的事件一样，不需要通过 MouseEvent 去模拟
| } | ||
| }; | ||
|
|
||
| if (['ArrowLeft', 'ArrowUp'].includes(e.key)) { |
There was a problem hiding this comment.
这里的硬编码都使用 packages/core-browser/src/keyboard/keys.ts 文件里的变量吧
| const currentElement = e.currentTarget; | ||
| const parentNode = currentElement.parentElement?.parentElement?.parentElement; | ||
| if (parentNode) { | ||
| const tabs = Array.from(parentNode.querySelectorAll('[role="tab"][aria-expanded]')) as HTMLElement[]; |
There was a problem hiding this comment.
这里通过 react 的 ref 去访问 role='tab' 的元素吧，不要通过 querySelectorAll 的方式。
| }; | ||
|
|
||
| const simulateContextMenu = (element: HTMLElement) => { | ||
| const mouseDownEvent = new window.MouseEvent('contextmenu', { bubbles: true, button: 2 }); |
There was a problem hiding this comment.
这里的 simulateContextMenu 可以直接调用 tabTitleMenuService.show 方法，和 onContextMenu 的事件处理一致就行
| }; | ||
|
|
||
| const simulateClick = (element: HTMLElement) => { | ||
| const mouseDownEvent = new window.MouseEvent('mousedown', { bubbles: true, button: 0 }); |
Types
Background or solution
关联issuse #3900
为编辑器的选项卡和关闭按钮添加键盘操作支持、适配屏幕阅读器
Changelog
Summary by CodeRabbit
新功能
可访问性