grb
January 8, 2024, 8:56pm
4
Keyboard navigation is also discussed in the following Feature Request (which is amalgamation of various loosely related requests, some of which have been implemented — to avoid confusion, I recommend voting in Feature Request threads that are more specific, like the present one):
Taken from Keyboard shortcuts / hotkeys · Issue #26 · bitwarden/desktop · GitHub . Please comment if I forgot anything.
At the moment there are nearly no keyboard shortcuts defined and keyboard navigation does not work at all.
Navigate items with arrow keys (optionally also with VI like j/k navigation)
Copy login and password from selected item
Edit item
Save and cancel (while editing)
Generate password from entry (a variant which uses the current settings to generate the password and automati…
Of interest to those supporting this thread is that community MVP @Quexten has been working on a pull request to implement keyboard navigation, but the PR is currently in draft form, and not yet ready to be merged:
bitwarden:main ← quexten:feature/browser-keyboard-navigation
opened 07:54AM - 09 Aug 23 UTC
## Type of change
```
- [ ] Bug fix
- [x] New feature development
- [ … ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other
```
## Objective
Since https://github.com/bitwarden/clients/pull/1962 seems to never have gotten rewritten, I gave it a shot using a11y's FocusKeyManager. Before spending too much time on this, I wanted to confirm with @eliykat that this is the approach to move forward with (since he also reviewed https://github.com/bitwarden/clients/pull/1962 at the time).
~~The PR is not ready and missing some stuff, but the basic approach for navigating the vault entries should be solid.~~
Edit: Also added some other hotkeys as listed in the first post below. This also picks back up https://github.com/bitwarden/clients/pull/1961.
## Code changes
- navigatable-list.component.ts/.html: This component uses a11y focus manager to make any list of components (navigatable-list-item) keyboard navigatable
- navigatable-list-item.component.ts/html: This component is used to wrap any element that should bey keyboard navigatable. F.e if a button should be keyboard navigatable, one would write:
```html
<navigatable-item>
<button>
</button>
</navigatable-item>
```
- cipher-row.component.ts: Change the tabindex so that the entire cipher row gets highlighted instead of just the label; Add hotkeys for copying totp/username/password/launching
- all other ts/html files: Wrap navigatable items & add nagitabable lists to make them navigatable
- for the ts/html files with a search field: Add the ctrl+f shortcut to jump to the search bar
## Screenshots
[Screencast from 2023-08-12 02-29-06.webm](https://github.com/bitwarden/clients/assets/11866552/67738675-612d-450d-9d02-223d7f4b5b04)
## Before you submit
- Please add **unit tests** where it makes sense to do so (encouraged but not required)
- If this change requires a **documentation update** - notify the documentation team
- If this change has particular **deployment requirements** - notify the DevOps team
- Ensure that all UI additions follow [WCAG AA requirements](https://contributing.bitwarden.com/contributing/accessibility/)
1 Like