Skip to content

Comments

Improvements for keyboard navigation in feeds#35853

Merged
diondiondion merged 10 commits intomainfrom
dion/improve-feed-hotkeys
Aug 22, 2025
Merged

Improvements for keyboard navigation in feeds#35853
diondiondion merged 10 commits intomainfrom
dion/improve-feed-hotkeys

Conversation

@diondiondion
Copy link
Contributor

@diondiondion diondiondion commented Aug 21, 2025

Fixes #35316
Fixes #32795
Fixes #19100
Fixes #19592
Fixes #27242
Fixes #29114

Changes proposed in this PR:

  • Removes the Up and Down keys shortcuts for navigating to the next/previous post, as those hotkeys conflicted with the browser's native scroll functionality
  • Improves post navigation via J and K keys:
    • Autofocus the topmost item in view when pressing J/K when the feed isn't focused yet
    • The "Who to follow" widget or load gaps no longer break keyboard navigation, now you can just navigate past them
  • In non-advanced UI, pressing the number 1 focuses the top of the feed
  • Adds a new shortcut L to move focus to the first found "Load gap" element (if any)
  • Deeply refactors how keyboard navigation works in feeds:
    • Navigation is now handled globally & doesn't rely on item ids anymore as this was very brittle
    • Individual feed items don't need to implement their own "select next/prev item" logic
    • Introduces 3 new utility functions for handling feed item focus tasks: getFocusedItemIndex, focusColumn, focusItemSibling

Screencap

Screen.Recording.2025-08-21.at.16.54.38.mov

@diondiondion diondiondion requested a review from a team August 21, 2025 15:06
Copy link
Contributor

@ChaosExAnima ChaosExAnima left a comment

Choose a reason for hiding this comment

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

overall looks good. minor nit- the focus border around the feed item is cut off by about 1px on the bottom:

Image

@diondiondion
Copy link
Contributor Author

diondiondion commented Aug 22, 2025

minor nit- the focus border around the feed item is cut off by about 1px on the bottom:

That's a good point, it's been like that for a while. But I just had an idea for how to fix it and will open a follow-up PR that also improves the focus indicator on the "Load more" buttons. (EDIT: Done)

@diondiondion diondiondion added this pull request to the merge queue Aug 22, 2025
Merged via the queue into main with commit 118c30f Aug 22, 2025
29 checks passed
@diondiondion diondiondion deleted the dion/improve-feed-hotkeys branch August 22, 2025 10:10
ClearlyClaire added a commit to glitch-soc/mastodon that referenced this pull request Aug 24, 2025
* Update dependency vite-plugin-pwa to v1.0.3 (mastodon#35830)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* New Crowdin Translations (automated) (mastodon#35829)

Co-authored-by: GitHub Actions <[email protected]>

* Status quote button (mastodon#35822)

* Use `debug?` query method on httplog initializer check (mastodon#35833)

* Fix display of quotes in threads in WebUI (mastodon#35834)

* Update dependency ruby-vips to v2.2.5 (mastodon#35836)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Disable `Metrics/*` cops (mastodon#35000)

* Update dependency core-js to v3.45.1 (mastodon#35843)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* New Crowdin Translations (automated) (mastodon#35844)

Co-authored-by: GitHub Actions <[email protected]>

* Update dependency vite-plugin-static-copy to v3.1.2 (mastodon#35846)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update dependency rubyzip to v3.0.2 (mastodon#35845)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Composer quote improvements (mastodon#35835)

Co-authored-by: Claire <[email protected]>
Co-authored-by: diondiondion <[email protected]>

* Refactor to reuse the one status partial across moderation tools (mastodon#35644)

* Fix layout shift caused by "Who to follow" widget (mastodon#35861)

* Improvements for keyboard navigation in feeds (mastodon#35853)

* Improve feed item focus outlines (mastodon#35864)

* Visibility Modal fixes (mastodon#35865)

* New Crowdin Translations (automated) (mastodon#35859)

Co-authored-by: GitHub Actions <[email protected]>

* [Glitch] Status quote button

Port 8268323 to glitch-soc

Signed-off-by: Claire <[email protected]>

* [Glitch] Fix display of quotes in threads in WebUI

Port 45ec4c9 to glitch-soc

Signed-off-by: Claire <[email protected]>

* [Glitch] Composer quote improvements

Port f85f0ee to glitch-soc

Co-authored-by: Claire <[email protected]>
Co-authored-by: diondiondion <[email protected]>
Signed-off-by: Claire <[email protected]>

* [Glitch] Refactor to reuse the one status partial across moderation tools

Port 4f49478 to glitch-soc

Signed-off-by: Claire <[email protected]>

* [Glitch] Fix layout shift caused by "Who to follow" widget

Port 511e10d to glitch-soc

Signed-off-by: Claire <[email protected]>

* [Glitch] Improvements for keyboard navigation in feeds

Port 118c30f to glitch-soc

Signed-off-by: Claire <[email protected]>

* [Glitch] Improve feed item focus outlines

Port a1c7b85 to glitch-soc

Signed-off-by: Claire <[email protected]>

* [Glitch] Visibility Modal fixes

Port 4df50b9 to glitch-soc

Signed-off-by: Claire <[email protected]>

---------

Signed-off-by: Claire <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: GitHub Actions <[email protected]>
Co-authored-by: Echo <[email protected]>
Co-authored-by: Matt Jankowski <[email protected]>
Co-authored-by: diondiondion <[email protected]>
Co-authored-by: Emelia Smith <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment