Navigating Issues/PRs with keyboard shortcuts

• Up/down comments - j/k (not up and down arrows for a11y reasons)
• New comment - n
• When comment focused:
  • Resolve comment - r
  • Delete comment - d
  • Edit comment - e
  • Reactions?
    • 👍 + (=)
    • 👎 -

[yakov116]

I had fun trying this out.

The j k was beyond me, but I think the code from cycle-lists-with-keyboard-shortcuts should be able to help ou.

import select from 'select-dom';
import * as pageDetect from 'github-url-detection';

import features from '.';

const shortcutKeys = new Set(['e', 'd', 'h']);
const shortcutClass: Record<string, string> = {
	e: '.rgh-edit-comment, [aria-label="Edit comment"]',
	d: '[aria-label="Delete comment"]',
	h: '[aria-label="Hide comment"]'
};

function triggerShortcut(shortcut: string) {
	const selectedComment = select(location.hash)!;
	select<HTMLButtonElement>(shortcutClass[shortcut], selectedComment)?.click();
}

function init(): void {
	document.addEventListener('keypress', event => {
		if (!shortcutKeys.has(event.key) || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLInputElement) {
			return;
		}
		event.preventDefault();
		if (location.hash) {
			triggerShortcut(event.key);
		}
	});
}

void features.add({
	id: __filebasename,
	description: '',
	screenshot: false
}, {
	include: [
		pageDetect.hasComments
	],
	repeatOnAjax: false,
	init
});

[fregante]

Looks reasonable. Let’s see a PR