Add keyboard navigation to the edit experience

r3bl-org / shortlink

This Chrome extension provides a browser action that simply allows the user to create a shortlink for all the selected tabs in the current window. It can be activated via a keyboard shortcut Alt + L. To use it, in the omnibar, type go then press Tab, then type the phrase you have created a shortlink for earlier & it will open the tab(s).

https://chrome.google.com/webstore/detail/shorty/ffhfkgcfbjoadmhdmdcmigopbfkddial?hl=en-US&gl=US

MIT License

11 stars 13 forks source link

Add keyboard navigation to the edit experience #23

Open nazmulidris opened 12 months ago

nazmulidris commented 12 months ago

Currently, in order to edit shortlinks, the user has to use a mouse. It would be great to have a way to use keyboard shortcuts to navigate the entire editing experience.

This could look like:

The user types a keyboard shortcut to activate edit mode
Then they can press up / down to move focus between the shortlink that is selected
Maybe they press Enter and that triggers the edit button, or they press Delete and that triggers the delete button
As a bonus, if there was a way to search / filter the shortlinks in edit mode, that would be great too!

shlok-2003 commented 11 months ago

Hey @nazmulidris, I would like to work on this issue, Can you please assign it to me :)

nazmulidris commented 11 months ago

Hi 👋🏽 @shlok-2003 , this issue is all yours 👍🏽 . Please take a look at our contributor guide. And we have a discord server if you would like to chat about the issue or PR.

Also, please associate your PR and issue using this technique: https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue

nazmulidris commented 11 months ago

@shlok-2003 Hi 👋🏽 If you don't have time to work on this issue, please let me know and I can assign it to someone else. Thank you for spending your time contributing.

postmeback commented 3 months ago

Hi @nazmulidris, Can you tell me how to run this project locally?

nazmulidris commented 3 months ago

@postmeback The instructions are in the README https://github.com/r3bl-org/shortlink?tab=readme-ov-file#setup

npm install
npm run build
npm run watch

You will find a dist folder on your disk. You can tell Chrome to load an extension from this folder. Here's more info on that: https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world