Handle escape and up/down arrows in context menu

app/assets/main.css

@@ -106,7 +106,8 @@ input#volume:focus {
 	font-size: 1em;
 	padding: 4px 20px;
 }
-.context-menu button:hover {
+.context-menu button:hover,
+.context-menu button:focus {
 	background: #dddddd99;
 }
 

app/create-bookmarks/contentscript.js

@@ -28,12 +28,13 @@ function describeMediaFragment({ start, end }) {
 }
 
 export default async function init(playlist) {
-	let menuEl;
+	let menuEl, menuItemElements;
 
 	function hideMenu() {
 		if (!menuEl) return;
 		menuEl.parentNode.removeChild(menuEl);
 		menuEl = undefined;
+		document.body.removeEventListener('keydown', handleKeyDown);
 	}
 
 	function onContextMenu(event) {
@@ -81,21 +82,46 @@ export default async function init(playlist) {
 			},
 		];
 
+		menuItemElements = menuItems.map(({ title, action }) => html`
+			<li>
+				<button onclick=${event => { hideMenu(); action(event); }}>
+					${title}
+				</button>
+			</li>
+		`);
+
 		hideMenu();
 
 		menuEl = html`
 			<ul class="context-menu" style="top: ${top}; left: ${left};">
-			${menuItems.map(({ title, action }) => html`
-				<li>
-					<button onclick=${event => { hideMenu(); action(event); }}>
-						${title}
-					</button>
-				</li>
-			`)}
+				${menuItemElements}
 			</ul>
 		`;
 
 		document.body.appendChild(menuEl);
+
+		document.body.addEventListener('keydown', handleKeyDown);
+	}
+
+	function handleKeyDown(event) {
+		if (event.code === 'Escape') {
+			hideMenu();
+			return;
+		}
+
+		const currentIndex = menuItemElements.findIndex(el => el.querySelector('button:focus'));
+		if (event.code === 'ArrowDown') {
+			const newIndex = (currentIndex === -1 || currentIndex === menuItemElements.length - 1)
+				? 0
+				: currentIndex + 1;
+			menuItemElements[newIndex].querySelector('button').focus();
+		}
+		if (event.code === 'ArrowUp') {
+			const newIndex = (currentIndex === -1 || currentIndex === 0)
+				? menuItemElements.length - 1
+				: currentIndex - 1;
+			menuItemElements[newIndex].querySelector('button').focus();
+		}
 	}
 
 	function onMouseDown(event) {