Accesskey in shadow-root element doesn't work in Firefox

Question

Using an accesskey within an element in shadow DOM doesn't trigger in Firefox.

I tested Chrome and Safari on MacOS where it works as expected. Mapping Keys manually via keydown or keyup event listeners seems complicated, because key mappings differ depending on browser and operating system.

Are there any workarounds or other solutions?

I created simple fiddle: https://jsfiddle.net/jk3mrx98/

class CustomElement extends HTMLElement {
    constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
        const customTextarea = document.createElement('textarea');
    customTextarea.accessKey = 'F';
    customTextarea.innerText = 'Accesskey F'
    shadowRoot.appendChild(customTextarea);
  }
}

window.customElements.define('custom-element', CustomElement);

<textarea accesskey="G">Accesskey G</textarea>
<custom-element></custom-element>

Answer 1

Most likely a bug in Firefox 88 that is fixed in upcoming 89.

Seems that accesskey in shadow root never properly registers in current Firefox stable release (88) and Alt+Shift+F triggers "File" menu there.

But it seems to be fixed in upcoming version: tried your fiddle in Firefox Developer 89.b5 (Aurora release channel) on Windows and both accesskeys works there as expected: Alt+Shift+G focuses "native" textarea, Alt+Shift+F focuses textarea in custom element.

Answer 2

No answer.

Just showing a different way of writing the constructor:

• You can write JS code before the super() call, but there is no 'this' yet
• you can chain on super()

      constructor() {
        const customTextarea = document.createElement('textarea');
        customTextarea.accessKey = 'F';
        customTextarea.innerText = 'Accesskey F';

        super() // sets and returns this scope
          .attachShadow({mode: 'open'}) // sets and returns this.shadowRoot
          .append(customTextarea);
      }