Uplift GOV.UK Frontend password input component

Author: colinrotherham

docs/configuration/javascript-api-reference.md

@@ -10,6 +10,7 @@ This page lists the options available for the following components:
 - [Button](#button)
 - [CharacterCount](#charactercount)
 - [ErrorSummary](#errorsummary)
+- [FileUpload](#fileupload)
 - [NotificationBanner](#notificationbanner)
 
 ## Button
@@ -196,6 +197,98 @@ Default
 false
 ```
 
+## FileUpload
+
+### i18n
+
+Type: object
+
+Messages the component uses for screen reader announcements relating to choosing
+and dropping files.
+
+All of these strings should be short and in plain text.
+
+#### Properties
+
+##### chooseFilesButton
+
+Type: string
+
+The text of the button that opens the file picker.
+
+Default:
+
+```json5
+  'Choose file'
+```
+
+##### dropInstruction
+
+Type: string
+
+The text informing users they can drop files.
+
+Default:
+
+```json5
+  'or drop file'
+```
+
+##### noFileChosen
+
+Type: string
+
+The text to display when no file has been chosen by the user.
+
+Default:
+
+```json5
+  'No file chosen'
+```
+
+##### multipleFilesChosen
+
+Type: object
+
+The text displayed when multiple files have been chosen by the user.
+
+Default:
+
+```json5
+  {
+    // the 'one' string isn't used as the component displays the filename
+    // instead, however it's here for coverage's sake
+    one: '%{count} file chosen',
+    other: '%{count} files chosen'
+  },
+```
+
+##### enteredDropZone
+
+Type: string
+
+The text announced by assistive technology when the user drags files and enters
+the drop zone
+
+Default:
+
+```json5
+  'Entered drop zone'
+```
+
+##### leftDropZone
+
+Type: string
+
+The text announced by assistive technology when user drags files and leaves the
+drop zone without dropping
+
+Default:
+
+```json5
+  'Left drop zone'
+```
+
 ## NotificationBanner
 
 ### disableAutoFocus

packages/nhsuk-frontend/src/nhsuk/components/_index.scss

@@ -26,6 +26,7 @@
 @forward "pagination";
 @forward "panel";
 @forward "checkboxes";
+@forward "password-input";
 @forward "radios";
 @forward "select";
 @forward "skip-link";

packages/nhsuk-frontend/src/nhsuk/components/index.mjs

@@ -4,6 +4,7 @@ export * from './checkboxes/checkboxes.mjs'
 export * from './error-summary/error-summary.mjs'
 export * from './header/header.mjs'
 export * from './notification-banner/notification-banner.mjs'
+export * from './password-input/password-input.mjs'
 export * from './radios/radios.mjs'
 export * from './skip-link/skip-link.mjs'
 export * from './tabs/tabs.mjs'

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

@@ -0,0 +1,64 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../button";
+@forward "../input";
+
+////
+/// Password input component
+///
+/// @group components/password-input
+////
+
+@include nhsuk-exports("nhsuk/components/password-input") {
+  .nhsuk-password-input__wrapper {
+    // This element inherits styles from .nhsuk-input__wrapper, including:
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
+    // - being display: flex above the mobile breakpoint
+
+    @include nhsuk-media-query($from: mobile) {
+      flex-direction: row;
+
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
+      align-items: flex-start;
+    }
+  }
+
+  .nhsuk-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 users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
+    &::-ms-reveal {
+      display: none;
+    }
+  }
+
+  .nhsuk-password-input__toggle {
+    // Add top margin so the button doesn't obscure the input's focus style
+    margin-top: nhsuk-spacing(1);
+
+    // Remove default margin-bottom from button
+    margin-bottom: 0;
+
+    // Hide the button by default, JS removes this attribute
+    &[hidden] {
+      display: none;
+    }
+
+    @include nhsuk-media-query($from: mobile) {
+      // Buttons are normally 100% wide on mobile, but we don't want that here
+      width: auto;
+      flex-shrink: 0;
+      flex-basis: 5em;
+
+      // Move the spacing from top to the left
+      margin-top: 0;
+      margin-left: nhsuk-spacing(1);
+    }
+  }
+}

packages/nhsuk-frontend/src/nhsuk/components/password-input/_password-input.scss

@@ -0,0 +1 @@
+@forward ".";

packages/nhsuk-frontend/src/nhsuk/components/password-input/accessibility.puppeteer.test.mjs

@@ -0,0 +1,21 @@
+import { axe, goToComponent } from '@nhsuk/frontend-helpers/puppeteer.mjs'
+
+import { examples } from './macro-options.mjs'
+
+describe('Password input', () => {
+  /** @type {Page} */
+  let page
+
+  describe('Component examples', () => {
+    it('passes accessibility tests', async () => {
+      for (const example in examples) {
+        page = await goToComponent(browser, 'password-input', { example })
+        await expect(axe(page)).resolves.toHaveNoViolations()
+      }
+    }, 120000)
+  })
+})
+
+/**
+ * @import { Page } from 'puppeteer'
+ */