browser-specific fixes

vaadin · Sep 18, 2024 · f0e8234 · f0e8234
1 parent 69d9865
commit f0e8234
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -68,4 +68,8 @@ export const dashboardWidgetAndSectionStyles = css`
   #remove-button::before {
     content: '×';
   }
+
+  button:focus {
+    outline: 1px solid blue;
+  }
 `;
diff --git a/packages/dashboard/test/dashboard-keyboard.test.ts b/packages/dashboard/test/dashboard-keyboard.test.ts
@@ -39,7 +39,15 @@ describe('dashboard - keyboard interaction', () => {
         root.appendChild(widget);
       }
     };
-    document.body.focus();
+    await nextFrame();
+
+    // Make sure the following tab goes back to the first widget
+    const widget = getElementFromCell(dashboard, 0, 0)!;
+    widget.focus();
+    await nextFrame();
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
     await nextFrame();
   });
 
@@ -115,7 +123,8 @@ describe('dashboard - keyboard interaction', () => {
 
     it('should deselect the widget on blur', async () => {
       const widget = getElementFromCell(dashboard, 0, 0)!;
-      widget.blur();
+      const anotherWidget = getElementFromCell(dashboard, 0, 1)!;
+      anotherWidget.focus();
       await nextFrame();
       expect(widget.hasAttribute('selected')).to.be.false;
       expect(widget.hasAttribute('focused')).to.be.false;
@@ -294,7 +303,8 @@ describe('dashboard - keyboard interaction', () => {
     });
 
     it('should deselect the section on blur', async () => {
-      section.blur();
+      const anotherWidget = getElementFromCell(dashboard, 0, 1)!;
+      anotherWidget.focus();
       await nextFrame();
       expect(section.hasAttribute('selected')).to.be.false;
       expect(section.hasAttribute('focused')).to.be.false;