[FIX] web: error when focus is inside a kanban card

repro steps:
1) in any kanban view that is not grouped, use the arrow key to focus the last card
2) use the up key to focus the previous card
3) use the TAB key to focus any element inside that card
4) use the down key to try to navigate to the last card -> traceback

The error comes from the fact that `focusNextCard` assumes that the
focus is exactly on the card element and not on any of its children.

closes odoo/odoo#112797

X-original-commit: 76434f4959cd0fade41ad02f790226f1a8046fea
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/views/kanban/kanban_renderer.js

@@ -606,16 +606,19 @@ export class KanbanRenderer extends Component {
      */
     focusNextCard(area, direction) {
         const { isGrouped } = this.props.list;
+        const closestCard = document.activeElement.closest(".o_kanban_record");
+        if (!closestCard) {
+            return;
+        }
         const groups = isGrouped ? [...area.querySelectorAll(".o_kanban_group")] : [area];
         const cards = [...groups]
             .map((group) => [...group.querySelectorAll(".o_kanban_record")])
             .filter((group) => group.length);
 
-        // Search current card position
         let iGroup;
         let iCard;
         for (iGroup = 0; iGroup < cards.length; iGroup++) {
-            const i = cards[iGroup].indexOf(document.activeElement);
+            const i = cards[iGroup].indexOf(closestCard);
             if (i !== -1) {
                 iCard = i;
                 break;

addons/web/static/tests/views/kanban_view_tests.js

@@ -9755,6 +9755,31 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(document.activeElement, getCard(0), "the first card should be focussed");
     });
 
+    QUnit.test("keyboard navigation on kanban basic rendering does not crash when the focus is inside a card", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<t t-esc="record.foo.value"/>' +
+                '<field name="foo"/>' +
+                '<a href="#" class="o-this-is-focussable">ho! this is focussable</a>' +
+                "</div>" +
+                "</t></templates></kanban>",
+        });
+
+        getCard(0).querySelector(".o-this-is-focussable").focus();
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            getCard(1),
+            "the second card should be focussed"
+        );
+    });
+
     QUnit.test("keyboard navigation on kanban grouped rendering", async (assert) => {
         await makeView({
             type: "kanban",