fix: add reveal button focus ring styles (#2345)

packages/password-field/src/vaadin-password-field.js

@@ -155,6 +155,9 @@ export class PasswordField extends TextField {
 
     if (!focused) {
       this._setPasswordVisible(false);
+    } else {
+      // Remove focus-ring from the field when the reveal button gets focused
+      this.toggleAttribute('focus-ring', !this._revealNode.matches(':focus'));
     }
   }
 

packages/password-field/test/password-field.test.js

@@ -1,6 +1,7 @@
 import { expect } from '@esm-bundle/chai';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import { fixtureSync, focusin, focusout, tabKeyDown } from '@vaadin/testing-helpers';
+import { fixtureSync, focusout } from '@vaadin/testing-helpers';
 import { PasswordField } from '../src/vaadin-password-field.js';
 
 customElements.define('vaadin-password-field', PasswordField);
@@ -55,20 +56,6 @@ describe('password-field', () => {
     expect(input.type).to.equal('text');
   });
 
-  it('should set focus-ring attribute when focusing the input with Tab', () => {
-    tabKeyDown(document.body);
-    focusin(input);
-
-    expect(passwordField.hasAttribute('focus-ring')).to.be.true;
-  });
-
-  it('should set focus-ring attribute when focusing reveal button with Shift Tab', () => {
-    tabKeyDown(document.body, ['shift']);
-    focusin(revealButton);
-
-    expect(passwordField.hasAttribute('focus-ring')).to.be.true;
-  });
-
   it('should prevent touchend event on reveal button', () => {
     const e = new CustomEvent('touchend', { cancelable: true });
 
@@ -102,6 +89,78 @@ describe('password-field', () => {
     expect(revealButton.getAttribute('aria-pressed')).to.equal('false');
   });
 
+  describe('focus-ring', () => {
+    describe('Tab', () => {
+      let button;
+
+      beforeEach(() => {
+        button = document.createElement('button');
+        button.textContent = 'Button';
+        passwordField.parentNode.insertBefore(button, passwordField);
+        button.focus();
+      });
+
+      afterEach(() => {
+        document.body.focus();
+        button.remove();
+      });
+
+      it('should set focus-ring attribute when focusing the input with Tab', async () => {
+        await sendKeys({ press: 'Tab' });
+
+        expect(passwordField.hasAttribute('focus-ring')).to.be.true;
+      });
+
+      it('should remove focus-ring attribute when focusing reveal button', async () => {
+        // Tab to the input element
+        await sendKeys({ press: 'Tab' });
+
+        // Tab to the reveal button
+        await sendKeys({ press: 'Tab' });
+
+        expect(passwordField.hasAttribute('focus-ring')).to.be.false;
+      });
+    });
+
+    describe('Shift Tab', () => {
+      let button;
+
+      beforeEach(() => {
+        button = document.createElement('button');
+        button.textContent = 'Button';
+        passwordField.parentNode.appendChild(button);
+        button.focus();
+      });
+
+      afterEach(() => {
+        document.body.focus();
+        button.remove();
+      });
+
+      it('should not set focus-ring attribute when focusing reveal button with Shift Tab', async () => {
+        await sendKeys({ down: 'Shift' });
+        await sendKeys({ press: 'Tab' });
+        await sendKeys({ up: 'Shift' });
+
+        expect(passwordField.hasAttribute('focus-ring')).to.be.false;
+      });
+
+      it('should set focus-ring attribute when focusing the input with Shift Tab', async () => {
+        // Shift+Tab to the reveal button
+        await sendKeys({ down: 'Shift' });
+        await sendKeys({ press: 'Tab' });
+        await sendKeys({ up: 'Shift' });
+
+        // Shift+Tab to the input element
+        await sendKeys({ down: 'Shift' });
+        await sendKeys({ press: 'Tab' });
+        await sendKeys({ up: 'Shift' });
+
+        expect(passwordField.hasAttribute('focus-ring')).to.be.true;
+      });
+    });
+  });
+
   describe('revealButtonHidden', () => {
     let revealPart;
 

packages/password-field/test/visual/lumo/password-field.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-password-field.js';
 import { PasswordField } from '../../../src/vaadin-password-field.js';
@@ -45,6 +46,13 @@ describe('password-field', () => {
         element.revealButtonHidden = true;
         await visualDiff(div, `${import.meta.url}_${dir}-reveal-button-hidden`);
       });
+
+      it('reveal button focus', async () => {
+        element.label = 'Password';
+        element.focus();
+        await sendKeys({ press: 'Tab' });
+        await visualDiff(div, `${import.meta.url}_${dir}-reveal-button-focus`);
+      });
     });
   });
 });

packages/password-field/test/visual/material/password-field.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-password-field.js';
 import { PasswordField } from '../../../src/vaadin-password-field.js';
@@ -45,6 +46,13 @@ describe('password-field', () => {
         element.revealButtonHidden = true;
         await visualDiff(div, `${import.meta.url}_${dir}-reveal-button-hidden`);
       });
+
+      it('reveal button focus', async () => {
+        element.label = 'Password';
+        element.focus();
+        await sendKeys({ press: 'Tab' });
+        await visualDiff(div, `${import.meta.url}_${dir}-reveal-button-focus`);
+      });
     });
   });
 });

packages/password-field/theme/lumo/vaadin-password-field-styles.js

@@ -6,6 +6,7 @@
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
 
 registerStyles(
@@ -39,6 +40,12 @@ registerStyles(
       background: transparent;
       border: none;
     }
+
+    ::slotted([slot='reveal']:focus) {
+      border-radius: var(--lumo-border-radius-s);
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+      outline: none;
+    }
   `,
   { moduleId: 'lumo-password-field', include: ['lumo-input-field-shared-styles'] }
 );

packages/password-field/theme/material/vaadin-password-field-styles.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
 
@@ -45,6 +46,43 @@ registerStyles(
       width: 100%;
       background: transparent;
       border: none;
+      outline: none;
+    }
+
+    ::slotted([slot='reveal'])::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: var(--material-body-text-color);
+      transform: scale(0);
+      opacity: 0;
+      transition: transform 0.08s, opacity 0.01s;
+      will-change: transform, opacity;
+    }
+
+    :host([focused]) ::slotted([slot='reveal'])::before {
+      background-color: var(--material-primary-text-color);
+    }
+
+    ::slotted([slot='reveal']:hover)::before {
+      opacity: 0.08;
+    }
+
+    ::slotted([slot='reveal']:focus)::before {
+      opacity: 0.12;
+    }
+
+    ::slotted([slot='reveal']:active)::before {
+      opacity: 0.16;
+    }
+
+    ::slotted([slot='reveal']:hover)::before,
+    ::slotted([slot='reveal']:focus)::before {
+      transform: scale(1.5);
     }
   `,
   { moduleId: 'material-password-field', include: ['material-input-field-shared-styles'] }