Merge pull request #2615 from alphagov/disabled-hint-color

Fix hints for disabled checkboxes/radios appearing darker than the associated labels

CHANGELOG.md

@@ -73,6 +73,7 @@ We’ve also made fixes in the following pull requests:
 - [#2549: Fix header with product name focus and hover state length](https://github.com/alphagov/govuk-frontend/pull/2549)
 - [#2573: Better handle cases where `$govuk-text-colour` is set to a non-colour value](https://github.com/alphagov/govuk-frontend/pull/2573)
 - [#2590: Remove `maxlength` attribute from `textarea` after character count JavaScript has been initialised](https://github.com/alphagov/govuk-frontend/pull/2590)
+- [#2615: Fix hints for disabled checkboxes/radios appearing darker than the associated labels](https://github.com/alphagov/govuk-frontend/pull/2615)
 
 ## 4.0.1 (Fix release)
 

src/govuk/components/checkboxes/_index.scss

@@ -150,7 +150,8 @@
     cursor: default;
   }
 
-  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
+  .govuk-checkboxes__input:disabled ~ .govuk-hint {
     opacity: .5;
   }
 

src/govuk/components/checkboxes/checkboxes.yaml

@@ -219,14 +219,24 @@ examples:
 
 - name: with disabled item
   data:
-    name: colours
+    name: sign-in
+    fieldset:
+      legend:
+        text: How do you want to sign in?
+        isPageHeading: true
     items:
-      - value: red
-        text: Red
-      - value: green
-        text: Green
-      - value: blue
-        text: Blue
+      - name: gateway
+        id: government-gateway
+        value: gov-gateway
+        text: Sign in with Government Gateway
+        hint:
+          text: You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.
+      - name: verify
+        id: govuk-verify
+        value: gov-verify
+        text: Sign in with GOV.UK Verify
+        hint:
+          text: You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
         disabled: true
 
 - name: with legend as a page heading

src/govuk/components/radios/_index.scss

@@ -148,7 +148,8 @@
     cursor: default;
   }
 
-  .govuk-radios__input:disabled + .govuk-radios__label {
+  .govuk-radios__input:disabled + .govuk-radios__label,
+  .govuk-radios__input:disabled ~ .govuk-hint {
     opacity: .5;
   }
 

src/govuk/components/radios/radios.yaml

@@ -137,19 +137,23 @@ examples:
 
 - name: with disabled
   data:
-    idPrefix: example-disabled
-    name: example-disabled
+    idPrefix: gov
+    name: gov
     fieldset:
       legend:
-        text: Have you changed your name?
-    hint:
-      text: This includes changing your last name or spelling your name differently.
+        text: How do you want to sign in?
+        isPageHeading: true
     items:
-      - value: yes
-        text: Yes
-        disabled: true
-      - value: no
-        text: No
+      - value: gateway
+        text: Sign in with Government Gateway
+        id: gateway
+        hint:
+          text: You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
+      - value: verify
+        text: Sign in with GOV.UK Verify
+        id: verify
+        hint:
+          text: You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
         disabled: true
 
 - name: with legend as page heading

src/govuk/components/radios/template.test.js

@@ -117,10 +117,7 @@ describe('Radios', () => {
 
       const $component = $('.govuk-radios')
 
-      const $firstInput = $component.find('.govuk-radios__item:first-child input')
-      expect($firstInput.attr('disabled')).toEqual('disabled')
-
-      const $lastInput = $component.find('.govuk-radios__item:last-child input')
+      const $lastInput = $component.find('input[value="verify"]')
       expect($lastInput.attr('disabled')).toEqual('disabled')
     })