refactor: include tfoot in table navigation (refs SFKUI-7709)

Author: dvitamin

packages/vue-labs/src/components/FTable/FTable.cy.ts

@@ -1260,8 +1260,9 @@ describe("5 tabstop", () => {
         table.cell({ row: 1, col: 1 }).should("have.attr", "tabindex", "0");
     });
 
-    it("should set correct tabstop for all types of headers and cells on navigation", () => {
-        const { buttonBeforeTable } = mountNavigationTestbed();
+    it("should set correct tabstop for all types of headers, cells and footer on navigation", () => {
+        const slots = { footer: "footer" };
+        const { buttonBeforeTable } = mountNavigationTestbed(slots);
         cy.get(buttonBeforeTable).focus();
         cy.focused().press(Cypress.Keyboard.Keys.TAB);
         // {1, 1}: expand button
@@ -1381,10 +1382,23 @@ describe("5 tabstop", () => {
             .should("have.prop", "tagName", "TD")
             .should("not.have.text")
             .should("have.attr", "tabindex", 0);
+        cy.focused().press(Cypress.Keyboard.Keys.DOWN);
+        // {3, 1}: expand footer
+        cy.focused()
+            .should("have.prop", "tagName", "TD")
+            .should("have.text", "footer")
+            .should("have.attr", "tabindex", 0);
+        cy.focused().press(Cypress.Keyboard.Keys.UP);
+        // {2, 1}: expand for child (empty)
+        cy.focused()
+            .should("have.prop", "tagName", "TD")
+            .should("not.have.text")
+            .should("have.attr", "tabindex", 0);
     });
 
-    it("should set correct tabstop for all types of headers and cells on click", () => {
-        mountNavigationTestbed();
+    it("should set correct tabstop for all types of headers, cells and footer on click", () => {
+        const slots = { footer: "footer" };
+        mountNavigationTestbed(slots);
 
         // {1, 1}: expand button
         table.cell({ row: 1, col: 1 }).click();
@@ -1493,6 +1507,12 @@ describe("5 tabstop", () => {
             .should("have.prop", "tagName", "TD")
             .should("not.have.text")
             .should("have.attr", "tabindex", 0);
+        // {3, 1}: expand footer
+        table.footer().click();
+        cy.focused()
+            .should("have.prop", "tagName", "TD")
+            .should("have.text", "footer")
+            .should("have.attr", "tabindex", 0);
     });
 
     it("should allow tab navigation in and out of expanded row", () => {
@@ -1526,23 +1546,6 @@ describe("5 tabstop", () => {
         cy.focused().press(Cypress.Keyboard.Keys.TAB);
         table.cell({ row: 2, col: 2 }).should("have.focus");
     });
-
-    it("should not change footer tabindex", () => {
-        const footerButtonSelector = "footerButton";
-        const slots = {
-            footer: renderButton("Footer button", {
-                dataTest: footerButtonSelector,
-            }),
-        };
-        mountNavigationTestbed(slots);
-        const footerButton = getTestSelector(footerButtonSelector);
-
-        table.cell({ row: 1, col: 3 }).click();
-        cy.focused().press(Cypress.Keyboard.Keys.TAB);
-        cy.get(footerButton).should("have.focus");
-        cy.focused().realPress(["Shift", "Tab"]);
-        table.cell({ row: 1, col: 3 }).should("have.focus");
-    });
 });
 
 describe("Radio button single‑select functionality in table", () => {

packages/vue-labs/src/components/FTable/FTable.vue

@@ -171,7 +171,7 @@ function onClick(e: MouseEvent): void {
 function onTableFocusin(e: FocusEvent): void {
     assertRef(tableRef);
 
-    for (const it of tableRef.value.querySelectorAll(`:not(tfoot)[tabindex="0"]`)) {
+    for (const it of tableRef.value.querySelectorAll(`[tabindex="0"]`)) {
         if (it !== e.target) {
             it.setAttribute("tabindex", "-1");
         }
@@ -199,8 +199,7 @@ function onTableFocusout(e: FocusEvent): void {
         return;
     }
 
-    const outsideTable =
-        Boolean(tableRef.value.tFoot?.contains(relatedTarget)) || !tableRef.value.contains(relatedTarget);
+    const outsideTable = !tableRef.value.contains(relatedTarget);
 
     if (outsideTable) {
         const cell = target.closest<HTMLElement>("td, th");
@@ -296,11 +295,20 @@ onMounted(() => {
 </script>
 
 <template>
-    <table ref="table" :role :class="tableClasses" :aria-rowcount>
+    <table
+        ref="table"
+        :role
+        :class="tableClasses"
+        :aria-rowcount
+        @focusin="onTableFocusin"
+        @focusout="onTableFocusout"
+        @click="onClick"
+        @keydown="onKeydown"
+    >
         <caption v-if="hasCaption" data-test="caption">
             <slot name="caption"></slot>
         </caption>
-        <thead @focusin="onTableFocusin" @focusout="onTableFocusout" @click="onClick" @keydown="onKeydown">
+        <thead>
             <tr class="table-ng__row" aria-rowindex="1">
                 <th v-if="isTreegrid" scope="col" tabindex="-1" class="table-ng__column"></th>
                 <i-table-header-selectable
@@ -323,7 +331,7 @@ onMounted(() => {
             </tr>
         </thead>
 
-        <tbody @focusin="onTableFocusin" @focusout="onTableFocusout" @click="onClick" @keydown="onKeydown">
+        <tbody>
             <template v-if="isEmpty">
                 <tr class="table-ng__row--empty">
                     <td :colspan="columnCount" class="table-ng__cell">

packages/vue-labs/src/components/FTable/use-tabstop.ts

@@ -65,9 +65,8 @@ export function useTabstop(
 
         // resolve current tabstop details
         assertRef(tableRef);
-        const oldTabstopElement = tableRef.value.querySelector<HTMLElement>(
-            `:not(tfoot)[tabindex="0"]`,
-        );
+        const oldTabstopElement =
+            tableRef.value.querySelector<HTMLElement>(`[tabindex="0"]`);
         assertSet(oldTabstopElement);
         const oldTabstopFocused = oldTabstopElement === document.activeElement;