4146 date picker disabled with value styling

[GCHQ-Developer-530]

Summary of the changes

Update styling of text and clear button for disabled date picker when there's already a value.
Test disabled with value styling for date picker.

Related issue

#4146

Checklist

General

• Changes to docs package checked and committed.
• All acceptance criteria reviewed and met.

Testing

• Relevant unit tests and visual regression tests added.
• Visual testing against Figma component specification completed.
• Playground stories in React Storybook up to date, with any prop changes and additions addressed.
• Compare performance of modified components against develop using Performance addon in React Storybook.

Accessibility

• Accessibility Insights FastPass performed.
• A11y unit test added and yields no issues.
• A11y plug-in on Storybook yields no issues.
• Manual screen reader testing performed using NVDA and VoiceOver.
• Manual keyboard testing for keyboard controls and logical focus order.
• Correct roles used and ARIA attributes used correctly where required.
• Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

• Page can be zoomed to 400% with no loss of content.
• Screen magnifier used with no issues.
• Text resized to 200% with no loss of content.
• Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

• Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
• Windows High Contrast mode tested with no loss of content.
• System light and dark mode tested with no loss of content.
• Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

• Min/max content examples tested with no loss of content or overflow.
• All prop combinations work without issue.
• Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
• Controlled and uncontrolled input components tested.
• Props/slots can be updated after initial render.

[github-actions]

View your canary branch deployment here: https://mi6.github.io/ic-ui-kit/branches/4146-date-picker-disabled-with-value-styling/canary-web-components
View your canary React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/4146-date-picker-disabled-with-value-styling/canary-react

[github-actions]

Cypress visual tests failed.
View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/4146-date-picker-disabled-with-value-styling/cypress-image-diff-screenshots/diff
View the html report here: https://mi6.github.io/ic-ui-kit/branches/4146-date-picker-disabled-with-value-styling/cypress-image-diff-html-report/cypress-image-diff-html-report.html

[GCHQ-Developer-299]

Checked it out in Storybook, looks good to me :)

note: in the Playground storybook I entered a value and then toggled disabled to true and the styling didn't immediately apply, but when i refreshed the storybook it applied correctly. Because your cypress test shows the styling applying correctly also, i'm happy to approve