Hotkey Mapper Tool accessibility improvements

[github]

Hotkey Mapper Tool accessibility improvements

[jscholes]

CC @sinabahram who might find this interesting.

[jscholes]

Update (from the same conversation): looks like the role and tabindex attributes are dynamically added by the clipboard-copy component, so that might be a bit tricky. You could temporarily get around it in this code by adding role="none" and tabindex="-1" to the actual child <button>, plus moving aria-label="Copy to clipboard" onto the clipboard-copy element directly. But that's a temporary solution.

[theinterned]

Maybe the shortcut should be in a kbd element?

[jscholes]

@theinterned The kbd element doesn't currently have any impact on screen readers. Although, even if it did, my recommendation of role="application" would override those semantics anyway. If you want to be 100% semantically correct, you can render a kbd element inside the input div.