[FIX] web: doesn't apply the invisible data-hotkey

The purpose of this commit is to prevent the activation of data-hotkeys
associated with hidden elements of the dom.

Task-2591069 - BUG 1

addons/web/static/src/core/hotkeys/hotkey_service.js

@@ -125,10 +125,9 @@ export const hotkeyService = {
                 reg.callback();
                 dispatched = true;
             }
-
             if (!event.repeat && isAlted) {
                 // Click on all elements having a data-hotkey attribute matching the actual hotkey.
-                const elems = activeElement.querySelectorAll(`[data-hotkey='${hotkey}' i]`);
+                const elems = ui.getVisibleElements(`[data-hotkey='${hotkey}' i]`);
                 for (const el of elems) {
                     // AAB: not sure it is enough, we might need to trigger all events that occur when you actually click
                     el.focus();

addons/web/static/tests/core/hotkeys/hotkey_service_tests.js

@@ -78,6 +78,35 @@ QUnit.test("data-hotkey", async (assert) => {
     comp.destroy();
 });
 
+QUnit.test("invisible data-hotkeys are not enabled. ", async (assert) => {
+    assert.expect(3);
+
+    class MyComponent extends Component {
+        onClick() {
+            assert.step("click");
+        }
+    }
+    MyComponent.template = xml`
+        <div>
+        <button t-on-click="onClick" data-hotkey="b" class="myButton"/>
+        </div>
+    `;
+
+    const key = "b";
+    const comp = await mount(MyComponent, { env, target });
+
+    triggerHotkey(key);
+    await nextTick();
+    assert.verifySteps(["click"])
+
+    comp.el.querySelector(".myButton").disabled = true;
+    triggerHotkey(key);
+    await nextTick();
+    assert.verifySteps([], "shouldn't trigger the hotkey of an invisible button");
+
+    comp.destroy();
+});
+
 QUnit.test("hook", async (assert) => {
     const key = "q";
     class TestComponent extends Component {

addons/web/static/tests/webclient/commands/command_service_tests.js

@@ -141,6 +141,7 @@ QUnit.test("data-hotkey added to command palette", async (assert) => {
     <div>
       <button title="Aria Stark" data-hotkey="a" t-on-click="onClick" />
       <input title="Bran Stark" type="text" data-hotkey="b" />
+      <button title="Sansa Stark" data-hotkey="b" style="display: none;" />
       <TestComponent />
     </div>
   `;