In Vector 2022, given menu items can appear in multiple locations we have a problem with access keys. When links share a similar access key, there is no guidance in the WHATWG about how this behave. This means in Chrome and Firefox the experience is different. In Firefox, as flagged in T311281 the button is focused rather than navigated to. This issue also impacts other products including Special:Translate tool (https://github.com/webcompat/web-bugs/issues/116510).
This was intentionally raised as a problem in September 2022 (T318305) and deemed to be a browser bug and an upstream bug was filed: https://bugzilla.mozilla.org/show_bug.cgi?id=1797214 but it doesn't look like a fix will be forthcoming.
Multiple access keys also cause problems in certain browsers when elements are hidden as described in T321428.
# Possible solutions
## Wait on the spec for guidance
Any change we make here will likely need to be revisited on https://bugzilla.mozilla.org/show_bug.cgi?id=1797214 so it might be worth waiting.
## De-duplicate access keys in core / Vector 2022 / gadget
To workaround this inconsistency, one option is to de-duplicate access keys in the page. This can be done either via a gadget or as part of the core software:
```
var isVisible = ( node ) => node.offsetParent === null;
const activeKey = {};
function updateAccessKeys() {
accessKeyNodes.forEach( ( node ) => {
const key = node.dataset.accessKey;
if ( !isVisible( node ) ) {
// do we need to remove?
if ( activeKey[ key ] === node ) {
activeKey[ key ] = null;
node.removeAttribute( 'accesskey' );
}
} else if ( !activeKey[ key ] ) {
// do we need to add ?
activeKey[ key ] = node;
node.setAttribute( 'accesskey', key );
}
} );
}
const accessKeyNodes = Array.from(document.querySelectorAll( '[accesskey]') );
accessKeyNodes.forEach((node) => {
const key = node.getAttribute( 'accesskey' );
node.dataset.accessKey = key;
if ( isVisible( node) && !activeKey[ key ] ) {
activeKey[key] = node;
} else {
node.removeAttribute( 'accesskey' );
}
} );
const belowDesktopMedia = window.matchMedia( '(max-width: 999px)' );
belowDesktopMedia.onchange = () => {
updateAccessKeys();
};
````
Since the feature is most often used by logged in users, solution might be restricted to logged in users.
## Other?
Ideas welcome!