matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-09 08:42:50 +03:00
Code Activity

Refactor ContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility) (#7353)

Browse Source 
Split off from https://github.com/matrix-org/matrix-react-sdk/pull/7339
This commit is contained in:
Eric Eastwood
2021-12-17 11:08:56 -06:00
committed by GitHub
parent 6761ef9540
commit 9289c0c90f
14 changed files with 224 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
View File

@@ -45,29 +45,55 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
`;
exports[`ThreadPanel Header expect that ThreadPanelHeader has the correct option selected in the context menu 1`] = `
<AccessibleButton
<RovingAccessibleButton
aria-checked={true}
className="mx_ThreadPanel_Header_FilterOptionItem"
element="div"
onClick={[Function]}
role="menuitemradio"
tabIndex={-1}
>
<div
<AccessibleButton
aria-checked={true}
className="mx_AccessibleButton mx_ThreadPanel_Header_FilterOptionItem"
className="mx_ThreadPanel_Header_FilterOptionItem"
element="div"
inputRef={
Object {
"current": <div
aria-checked="true"
class="mx_AccessibleButton mx_ThreadPanel_Header_FilterOptionItem"
role="menuitemradio"
tabindex="-1"
>
<span>
All threads
</span>
<span>
Shows all threads from current room
</span>
</div>,
}
}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onFocus={[Function]}
role="menuitemradio"
tabIndex={-1}
>
<span>
All threads
</span>
<span>
Shows all threads from current room
</span>
</div>
</AccessibleButton>
<div
aria-checked={true}
className="mx_AccessibleButton mx_ThreadPanel_Header_FilterOptionItem"
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="menuitemradio"
tabIndex={-1}
>
<span>
All threads
</span>
<span>
Shows all threads from current room
</span>
</div>
</AccessibleButton>
</RovingAccessibleButton>
`;