Set focus visible when returning to some elements, add types.

[rouilj]

After command-pal gets focus, it will return focus to the element that had it prior to command-pal activation.

When the focused element was an input, textarea or select control, browsers set a focus ring. If you were on a hyperlink ('a' tag) or summary/detail element, you see nothing after command-pal exits.

Your focus is on the hyperlink or summary element but there is no indicator. This patch passes the standard 'focusVisible: true' option to focus() for these elements. This forces an outline around the A or summary element allowing the user to re-orient and understand what happens if they hit a space or return.

Also if we implemnt the ability for a command-pal command to control where the user's focus is placed when command-pal exits, identifying the new focused element will be even more important.

Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#parameters

Only firefox has this implemented currently.

[rouilj]

Consider:

function highlight(element) {
    let defaultBG = element.style.backgroundColor;
    let defaultTransition = element.style.transition;

    element.style.transition = "background 1s";
    element.style.backgroundColor = "#FDFF47";

    setTimeout(function()
    {
        element.style.backgroundColor = defaultBG;
        setTimeout(function() {
            element.style.transition = defaultTransition;
        }, 1000);
    }, 1000);
}

to color the background of the focused element for a second or so after closing command pal. (from: https://stackoverflow.com/questions/1389609/plain-javascript-code-to-highlight-an-html-element)