This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
Refactor ContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility)
#7353
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
New TooltipTarget & TextWithTooltip were not roving-accessible
… t3chguy/a11y2 � Conflicts: � src/components/views/rooms/EventTile.tsx
MadLittleMods
added
the
T-Task
MadLittleMods
commented
Dec 14, 2021
MadLittleMods
commented
Dec 14, 2021
- Also fix the clear button to actually show and work
MadLittleMods
commented
Dec 14, 2021
MadLittleMods
commented
Dec 14, 2021
MadLittleMods
commented
Dec 14, 2021
MadLittleMods
commented
Dec 14, 2021
MadLittleMods
commented
Dec 14, 2021
MadLittleMods
commented
Dec 15, 2021
t3chguy
reviewed
Dec 15, 2021
…rom the sort change See #7353 (comment) Previously, the ContextMenu would only update and render if shouldComponentUpdate said it should. This excludes the options mutated by the ContextMenu. We forceUpdate for the other things in the ContextMenu. Previously, the ContextMenu only rendered properly when it also changed the sort of the rooms in the list which triggered a render as well.
MadLittleMods
commented
Dec 16, 2021
| @@ -25,7 +25,7 @@ import { Key } from "../../Keyboard"; | |||
| import { Writeable } from "../../@types/common"; | |||
There was a problem hiding this comment.
Testing strategy:
Everything appears to work now. Just a few that weren't keyboard accessible before and still aren't which we can tackle in later PR's as desired.
- ✅
UserMenu(make sure can still navigate with custom user status messages) - ✅
MessageActionBar - ✅
ReactionsRow- The reaction picker does a lot of it's own thing but everything seems in order to how it worked before
- ✅
RoomTile->renderGeneralMenu - ✅
RoomTile->renderNotificationsMenu - ✅
RoomSubList(the settings...on each room list heading for sorting stuff) - ✅
RoomListHeader(the+next to the "Rooms" heading) - ✅
ThreadPanelHeader"My threads" vs "All threads" (accessed via the top bar, not a thread in the timeline) - ✅
NetworkDropdownin the explore rooms modal - ✅ Spaces
QuickSettings(under feature flag, at bottom of Spaces panel) - ✅
SpaceCreateMenu - ✅
WidgetContextMenu(/addwidget https://something, open the room info right panel, under the "Widgets" section, hover your widget, open the...menu)- Since it only displays on hover, can't get to it via keyboard but the
ContextMenuoptions works fine once it's open
- Since it only displays on hover, can't get to it via keyboard but the
- ✅
CallContextMenu(start a 1:1 call (has to be answered) to see the...button labelled "More") - ✖
DialpadContextMenu(editsrc/components/views/voip/CallView/CallViewButtons.tsx#L216for it to always show, then make a call and look for the dialpad icon button)- Was not keyboard accessible before
- ✖
Stickerpicker- Was not keyboard accessible before
There was a problem hiding this comment.
The Stickerpicker isn't owned by Element-Web either, its an iframe
MadLittleMods
commented
Dec 16, 2021
MadLittleMods
commented
Dec 16, 2021
MadLittleMods
commented
Dec 16, 2021
MadLittleMods
changed the title
ContextMenu to use RovingTabIndexContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility)
MadLittleMods
commented
Dec 16, 2021
t3chguy
reviewed
Dec 16, 2021
MadLittleMods
deleted the
madlittlemods/roving-tab-index-context-menu
branch
|
Thanks for the review @t3chguy 🐗 |
5 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Refactor
ContextMenuto useRovingTabIndexto make the keyboard navigation accessibility (a11y) more consistent across Element.With
RovingTabIndex, the page has different regions available to navigate focus byTab/Shift + Tab(or whatever screen reader jumping mechanism) and then navigate each region byArrowkeys orHome/End.Split off from #7339
Testing strategy
Search for
<IconizedContextMenu\b,<ContextMenu\buseContextMenuandcreateMenu(this list isn't exhaustive but covers the variety/range of context menus and skips some of same simple ones)
UserMenu(make sure can still navigate with custom user status messages)MessageActionBarReactionsRowRoomTile->renderGeneralMenuRoomTile->renderNotificationsMenuRoomSubList(the settings...on each room list heading for sorting stuff)RoomListHeader(the+next to the "Rooms" heading)ThreadPanelHeader"My threads" vs "All threads" (accessed via the top bar, not a thread in the timeline)NetworkDropdownin the explore rooms modalQuickSettings(under "Meta Spaces" feature flag, at bottom of Spaces panel)SpaceCreateMenuWidgetContextMenu(/addwidget https://something, open the room info right panel, under the "Widgets" section, hover your widget, open the...menu)CallContextMenu(start a 1:1 call (has to be answered) to see the...button labelled "More")DialpadContextMenu(editsrc/components/views/voip/CallView/CallViewButtons.tsx#L216for it to always show, then make a call and look for the dialpad icon button)StickerpickerDev notes
Screen recordings:
TODO
RovingTabIndexchanges toMenuItemMenuItemCheckboxMenuItemRadioStyledMenuItemCheckboxStyledMenuItemRadioThis change is marked as an internal change (Task), so will not be included in the changelog.
Preview: https://61bb82159f265c080eed2b5d--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.