feat(web): navigate with keyboard on person page #5486
Conversation
web/src/lib/components/faces-page/merge-suggestion-modal.svelte
Outdated
Show resolved
Hide resolved
| if (!$showAssetViewer) { | ||
| event.stopPropagation(); | ||
| switch (event.key) { | ||
| case 'Tab': |
There was a problem hiding this comment.
Tabbing through focusable elements is something that is built into the browser. We don't need to re-invent the wheel here.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
There was a problem hiding this comment.
Yeah I know but I couldn't find a way to limit the focus to the suggested people only.
There was a problem hiding this comment.
tabindex=-1 tells the browser to skip it.
There was a problem hiding this comment.
Yeah I tried it but the issue is that you want to navigate only through the suggested people, not all the buttons on the page. Do you have any ideas 🤔 ?
There was a problem hiding this comment.
Does using an actual browser model still let you focus on background elements?
There was a problem hiding this comment.
What's an actual browser model ?
There was a problem hiding this comment.
There was a problem hiding this comment.
Mmmh, just tried it, does it work only for dialogs ?
There was a problem hiding this comment.
I don't think we want dialogs to display suggested people 😅
martabal
changed the title
|
I think it is fine to add keyboard shortcuts, but we should do it in a way that doesn't make the site less accessible (which is the outcome of overriding the tab behavior or preventing other default key behaviors) |
I agree 100% with you. But in this case we want to navigate with the tabs and arrow keys which is a little unusual. I don't know what's the good way for that case 😅 |
|
Can you just use arrow keys and enter instead? |
Deploying with
|
| Latest commit: |
46d7456
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1ac984d2.immich.pages.dev |
| Branch Preview URL: | https://feat-keyboard-navigation-per.immich.pages.dev |
Changes made in this PR
With this PR, users can navigate through suggested people with Tab and Arrow keys. On the suggestion merge modal, pressing the Tab key will only switch between the
NoandYesbuttons.Resolves #5400 and #5398