make sample table sequentially focusable when no cell is active (#1101)

* make sample table sequentially focusable when no cell is active

* add comment about test

* changelog

---------

Co-authored-by: Gael Varoquaux <[email protected]>

CHANGES.rst

@@ -18,6 +18,10 @@ Major changes
 Minor changes
 -------------
 
+* In the TableReport it is now possible, before clicking any of the cells, to
+  reach the dataframe sample table and activate a cell with tab key navigation.
+  :pr:`1101` by :user:`Jérôme Dockès <jeromedockes>`.
+
 * The "Column name" column of the "summary statistics" table in the TableReport
   is now always visible when scrolling the table. :pr:`1102` by :user:`Jérôme
   Dockès <jeromedockes>`.

skrub/_reporting/_data/templates/dataframe-sample.html

@@ -16,7 +16,7 @@
     data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
     {% include "table-bar.html" %}
 
-    <div class="horizontal-scroll">
+    <div class="horizontal-scroll" tabindex="-1">
         <table class="pure-table pure-table-striped table-with-selectable-cells"
                data-manager="SampleTable"
         data-start-i="{{ summary['sample_table']['start_i'] }}"

skrub/_reporting/_data/templates/report.js

@@ -327,6 +327,8 @@ if (customElements.get('skrub-table-report') === undefined) {
             this.elem.addEventListener('keydown', (e) => this.onKeyDown(e));
             this.elem.addEventListener('skrub-keydown', (e) => this.onKeyDown(
                 unwrapSkrubKeyDown(e)));
+            this.elem.tabIndex = "0";
+            this.elem.addEventListener('focus', (e) => this.activateFirstCell());
         }
 
         onKeyDown(event) {
@@ -411,6 +413,45 @@ if (customElements.get('skrub-table-report') === undefined) {
                 j) => (this
                 .stopI <= i));
         }
+
+        /*
+          When no cell is active, the table itself is sequentially focusable.
+          When it receives focus, it redirects it to the first visible data cell
+          (if any). Once a cell is active, the cell is sequentially focusable
+          and the table is not. If a cell is active but the focus is given to
+          the table (by clicking one of the non-clickable elements such as the
+          ellipsis "..." cells), focus is set on the active cell rather than the
+          first one.
+         */
+        activateFirstCell() {
+            const activeCell = this.elem.querySelector("[data-is-active]");
+            if (activeCell){
+                activeCell.focus();
+                return;
+            }
+            const firstCell = this.elem.querySelector(
+                "[data-role='dataframe-data']:not([data-excluded-by-column-filter])"
+                );
+            if (!firstCell) {
+                return;
+            }
+            // blur immediately to avoid the focus ring flashing before the cell
+            // grabs keyboard focus.
+            this.elem.blur();
+            this.exchange.send({
+                kind: "ACTIVATE_SAMPLE_TABLE_CELL",
+                cellId: firstCell.id
+            });
+        }
+
+        SAMPLE_TABLE_CELL_ACTIVATED() {
+            this.elem.tabIndex = "-1";
+        }
+
+        SAMPLE_TABLE_CELL_DEACTIVATED() {
+            this.elem.tabIndex = "0";
+        }
+
     }
     SkrubTableReport.register(SampleTable);
 

skrub/_reporting/js_tests/cypress/e2e/dataframe-sample.cy.js

@@ -140,4 +140,10 @@ describe('test the dataframe sample tab', () => {
         getIJ(0, 0).should('have.focus');
         getIJ(0, 0).should('have.attr', 'data-role', 'dataframe-data');
     });
+
+    it('can reach the sample table with the tab key', () => {
+        // TODO whenever cypress adds support for testing tab key navigation,
+        // or we start using a testing tool that does
+        // https://github.com/cypress-io/cypress/issues/299
+    });
 });