fix: apply proper focus highlight for multiple header rows (#3016) (#…

…3022) Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
vaadin · Nov 11, 2021 · 2232031 · 2232031
1 parent 9020006
commit 2232031
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 0 deletions.
diff --git a/packages/grid/test/visual/lumo/grid.test.js b/packages/grid/test/visual/lumo/grid.test.js
@@ -253,6 +253,23 @@ describe('grid', () => {
         it('row focus', async () => {
           await visualDiff(element, `${dir}-row-focus`);
         });
+
+        it('row focus - header', async () => {
+          // Add a header group
+          const group = document.createElement('vaadin-grid-column-group');
+          group.header = 'Address';
+          group.appendChild(element.querySelector('[path="location.city"]'));
+          element.appendChild(group);
+          flushGrid(element);
+          await nextRender(element);
+
+          // Focus a header row
+          element.tabIndex = 0;
+          element.focus();
+          await sendKeys({ press: 'Tab' });
+
+          await visualDiff(element, `${dir}-row-focus-header`);
+        });
       });
     });
   });

diff --git a/packages/grid/test/visual/lumo/screenshots/grid/baseline/ltr-row-focus-header.png b/packages/grid/test/visual/lumo/screenshots/grid/baseline/ltr-row-focus-header.png
diff --git a/packages/grid/test/visual/lumo/screenshots/grid/baseline/rtl-row-focus-header.png b/packages/grid/test/visual/lumo/screenshots/grid/baseline/rtl-row-focus-header.png
diff --git a/packages/grid/test/visual/material/grid.test.js b/packages/grid/test/visual/material/grid.test.js
@@ -253,6 +253,23 @@ describe('grid', () => {
         it('row focus', async () => {
           await visualDiff(element, `${dir}-row-focus`);
         });
+
+        it('row focus - header', async () => {
+          // Add a header group
+          const group = document.createElement('vaadin-grid-column-group');
+          group.header = 'Address';
+          group.appendChild(element.querySelector('[path="location.city"]'));
+          element.appendChild(group);
+          flushGrid(element);
+          await nextRender(element);
+
+          // Focus a header row
+          element.tabIndex = 0;
+          element.focus();
+          await sendKeys({ press: 'Tab' });
+
+          await visualDiff(element, `${dir}-row-focus-header`);
+        });
       });
     });
   });

diff --git a/...es/grid/test/visual/material/screenshots/grid/baseline/ltr-row-focus-header.png b/...es/grid/test/visual/material/screenshots/grid/baseline/ltr-row-focus-header.png
diff --git a/...es/grid/test/visual/material/screenshots/grid/baseline/rtl-row-focus-header.png b/...es/grid/test/visual/material/screenshots/grid/baseline/rtl-row-focus-header.png
diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js
@@ -60,6 +60,10 @@ registerStyles(
 
     /* Focus-ring */
 
+    [part~='row'] {
+      position: relative;
+    }
+
     [part~='row']:focus,
     [part~='cell']:focus {
       outline: none;

diff --git a/packages/grid/theme/material/vaadin-grid-styles.js b/packages/grid/theme/material/vaadin-grid-styles.js
@@ -118,6 +118,10 @@ registerStyles(
 
     /* Keyboard navigation */
 
+    [part~='row'] {
+      position: relative;
+    }
+
     [part~='row']:focus,
     [part~='cell']:focus {
       outline: none;