Skip to content

New room list: add keyboard navigation support #29805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
May 6, 2025

Conversation

florianduros
Copy link
Member

@florianduros florianduros commented Apr 24, 2025

Task https://github.com/element-hq/wat-internal/issues/204

This PR is a first step to add keyboard navigation to the new room list:

  • Navigation with Arrow up/down. This is done with the RovingTabIndex component
  • Tabbing in a room list item to be able to open the more or the notification menu
  • Landmark shortcut support
Screen.Recording.2025-05-06.at.11.44.26.mov

NB: The landmark shortcut support for the search bar of the left panel will be added in another PR.

@florianduros florianduros force-pushed the florianduros/new-room-list/a11y-keyboard branch from c9b8eeb to 94920e4 Compare April 28, 2025 14:11
@florianduros florianduros force-pushed the florianduros/new-room-list/a11y-keyboard branch from cf8056d to 0387c0f Compare April 30, 2025 13:53
@florianduros florianduros force-pushed the florianduros/new-room-list/a11y-keyboard branch from 0387c0f to 697fc8e Compare April 30, 2025 15:23
@florianduros florianduros force-pushed the florianduros/new-room-list/a11y-keyboard branch from 697fc8e to 3b9e8f2 Compare April 30, 2025 18:17
@florianduros florianduros force-pushed the florianduros/new-room-list/a11y-keyboard branch from 3b9e8f2 to 56677d7 Compare May 5, 2025 12:50
@florianduros florianduros force-pushed the florianduros/new-room-list/a11y-keyboard branch from 4e57094 to dc457f4 Compare May 6, 2025 08:38
@florianduros florianduros marked this pull request as ready for review May 6, 2025 09:46
@florianduros florianduros requested a review from a team as a code owner May 6, 2025 09:46
@florianduros florianduros requested review from dbkr and MidhunSureshR May 6, 2025 09:46
const vm = useRoomListItemViewModel(room);

const [isHover, setIsHover] = useState(false);
const [isHover, setIsHover] = useIsHover();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [isHover, setIsHover] = useIsHover();
const [isHover, setIsHoverWithDelay] = useIsHover();

to match maybe?

@florianduros florianduros enabled auto-merge May 6, 2025 15:50
@florianduros florianduros added this pull request to the merge queue May 6, 2025
Merged via the queue into develop with commit 74fbd89 May 6, 2025
33 checks passed
@florianduros florianduros deleted the florianduros/new-room-list/a11y-keyboard branch May 6, 2025 16:24
parsatorb pushed a commit to iluvatar-tech/element-web that referenced this pull request May 6, 2025
* feat: support up/down arrow navigation in the new room list

* feat: support tabbing in the new room list

* test: update snapshots

* test(e2e): fix room list test

* test(new room list): add landmark navigation test

* test(e2e): update screenshot test

* test: add test to `RoomListItemView`

* test(e2e): add keyboard navigation tests

* refactor: rename `setIsHover` on `setIsHoverWithDelay`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants