Uplift GOV.UK Frontend select component

Author: colinrotherham

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

@@ -1,44 +1,53 @@
 @use "../../core/settings" as *;
 @use "../../core/tools" as *;
 @use "../../core/helpers" as *;
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
 
 ////
 /// Select component
 ///
-/// Input sizing:
-///
-/// 1. Uses rems so that safari input scales with font size
-/// 2. This min-width was chosen because:
-///    - it makes the Select wider than it is tall (which is what users expect)
-///    - 20ex + 3ex matches the 'width-10' variant of the input component
-///    - it fits comfortably on screens as narrow as 240px wide
-///
 /// @group components/select
 ////
 
 @include nhsuk-exports("nhsuk/components/select") {
   .nhsuk-select {
-    background-color: $nhsuk-input-background-colour;
-    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
     box-sizing: border-box;
-    color: $nhsuk-text-colour;
-    height: 2.5rem; // [1]
-    min-width: 20ex + 3ex; // [2]
+
+    // This min-width was chosen because:
+    // - it makes the Select wider than it is tall (which is what users expect)
+    // - 20ex + 3ex matches the 'length-10' variant of the input component
+    // - it fits comfortably on screens as narrow as 240px wide
+    min-width: 20ex + 3ex;
     max-width: 100%;
+    height: nhsuk-px-to-rem(40px);
     padding: nhsuk-spacing(1);
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
 
-    @include nhsuk-font(19);
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (https://github.com/alphagov/govuk-frontend/issues/2435)
+    color: $nhsuk-text-colour;
+    background-color: $nhsuk-input-background-colour;
+
+    @include nhsuk-font($size: 19, $line-height: 1.25);
 
     &:focus {
       @include nhsuk-focused-input;
     }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      cursor: not-allowed;
+    }
   }
 
   .nhsuk-select option:active,
   .nhsuk-select option:checked,
   .nhsuk-select:focus::-ms-value {
-    background-color: nhsuk-colour("blue");
     color: $nhsuk-reverse-text-colour;
+    background-color: nhsuk-colour("blue");
   }
 
   .nhsuk-select--error {

packages/nhsuk-frontend/src/nhsuk/components/select/template.njk

@@ -1,11 +1,11 @@
+{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}
 {% from "nhsuk/components/error-message/macro.njk" import errorMessage -%}
 {% from "nhsuk/components/hint/macro.njk" import hint %}
 {% from "nhsuk/components/label/macro.njk" import label %}
-{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
-   aria-describedby – for example hints or error messages -#}
-{%- set describedBy = params.describedBy if params.describedBy else "" -%}
+  aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
 {%- set id = params.id if params.id else params.name -%}
 
 <div class="nhsuk-form-group {%- if params.errorMessage %} nhsuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}"
@@ -17,28 +17,30 @@
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
     for: id
-  }) | indent(2) | trim }}
-{%- if params.hint %}
-  {%- set hintId = id + '-hint' %}
-  {%- set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  }) | trim | indent(2) }}
+{% if params.hint %}
+  {% set hintId = id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ hint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
     html: params.hint.html,
     text: params.hint.text
-  }) | indent(2) | trim }}
-{%- endif -%}
-{%- if params.errorMessage %}
-  {%- set errorId = id + '-error' %}
-  {%- set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+  }) | trim | indent(2) }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = id + '-error' %}
+  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ errorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
     html: params.errorMessage.html,
-    text: params.errorMessage.text
-  }) | indent(2) | trim }}
-{%- endif %}
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | trim | indent(2) }}
+{% endif %}
 {% if params.formGroup.beforeInput %}
   {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
@@ -47,7 +49,7 @@
     {%- if params.disabled %} disabled{% endif %}
     {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
     {{- nhsukAttributes(params.attributes) }}>
-  {%- for item in params.items %}
+  {% for item in params.items %}
     {% if item %}
     {#- Allow selecting by text content (the value for an option when no value attribute is specified) #}
     {%- set effectiveValue = item.value | default(item.text) %}
@@ -58,7 +60,7 @@
       {{- item.text -}}
     </option>
     {% endif %}
-  {%- endfor %}
+  {% endfor %}
   </select>
 {% if params.formGroup.afterInput %}
   {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}