Hide user agent password reveal function in Microsoft Edge

Microsoft Edge provides its own mechanism for users to show and hide their password in the form of an eye icon within the input. (The feature is built into Chromium itself, however only Edge appears to use it for inputs on the web. Google Chrome only appears to use it in browser dialogs and in the settings area of the browser.)

We don't want to show this to our users. The button visually reproduces the functionality of our toggle, but in a way that we cannot syncronise with, thus it's possible for the two controls to present labelling that conflicts with the actual visibility of the password.

We can use a vendor-prefixed pseudo-element to hide the button in Edge, but this doesn't disable other functionality that is specific to Edge's implementation, like the Alt+F8 keyboard shortcut.

packages/govuk-frontend/src/govuk/components/password-input/_index.scss

@@ -18,6 +18,16 @@
     }
   }
 
+  .govuk-password-input__input {
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We want to hide it, so
+    // that there aren't two controls presented to the user that do the same thing but aren't in
+    // sync with one another. This doesn't affect the function that allows Edge user's to toggle\
+    // password visibility by pressing Alt+F8.
+    &::-ms-reveal {
+      display: none;
+    }
+  }
+
   .govuk-password-input__toggle {
     // Add margin to the top so that the button doesn't obscure the input's focus style
     margin-top: govuk-spacing(1);