diff --git a/app/assets/main.css b/app/assets/main.css index 463478d..ebf9d56 100644 --- a/app/assets/main.css +++ b/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; } diff --git a/app/create-bookmarks/contentscript.js b/app/create-bookmarks/contentscript.js index fffd297..6e68f39 100644 --- a/app/create-bookmarks/contentscript.js +++ b/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` +
  • + +
  • + `); + hideMenu(); menuEl = html` `; 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) {