3963 time input milliseconds ampm

[GCHQ-Developer-530]

Summary of the changes

• Update toggle button to be able to externally set the active toggle button
• Add milliseconds time format and AM/PM toggle

Known issues:

• Have to pass disabled prop to both the toggle buttons individually and the toggle button group because it's not passing through
• Disabled toggle buttons are focusable (will be fixed in https://github.com/mi6/ic-ui-kit/issues/4031)

Related issue

#3963

Checklist

General

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

Testing

• [x] Relevant unit tests and visual regression tests added.
• [x] Visual testing against Figma component specification completed.
• [x] Playground stories in React Storybook up to date, with any prop changes and additions addressed.

Accessibility

• [x] Accessibility Insights FastPass performed.
• [x] A11y unit test added and yields no issues.
• [x] A11y plug-in on Storybook yields no issues.
• [x] Manual screen reader testing performed using NVDA and VoiceOver.
• [x] Manual keyboard testing for keyboard controls and logical focus order.

Resize/zoom behaviour

• [x] Page can be zoomed to 400% with no loss of content.
• [x] Text resized to 200% with no loss of content.
• [x] Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

• [x] Windows High Contrast mode tested with no loss of content.
• [x] System light and dark mode tested with no loss of content.
• [x] Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

• [x] All prop combinations work without issue.
• [x] Props/slots can be updated after initial render.

[github-actions[bot]]

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3963-time-input-milliseconds-ampm/web-components View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3963-time-input-milliseconds-ampm/react

[github-actions[bot]]

View your canary branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3963-time-input-milliseconds-ampm/canary-web-components View your canary React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3963-time-input-milliseconds-ampm/canary-react

[github-actions[bot]]

Cypress visual tests failed. View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/3963-time-input-milliseconds-ampm/cypress-image-diff-screenshots/diff View the html report here: https://mi6.github.io/ic-ui-kit/branches/3963-time-input-milliseconds-ampm/cypress-image-diff-html-report/cypress-image-diff-html-report.html

[jd3267]

Not entirely sure what the intended behavior should be, but the time input with milliseconds allows the continues input of numbers into the box but only shows the first 6 (HH:MM:SS), with the most recent 3 digits for SSS. Once clicked away, the first 3 SSS digits are shown

For example, entering the numbers :1234567890123, initially shows 12:34:56.123 when entered, however when clicking away it then switches to 12:34:56.789.

Is there a limit to the precision supported for fractions of a second? If so, maybe a limit is needed to only allow 3 digits to be entered (like with the normal time entry)

[ad9242]

based on looking at am\pm on selector, i wonder if it would be better to have slightly different styling of the am\pm, more like the outlined toggle button group, to make it more obvious you can only select 1

probably another one for design decision

[GCHQ-Developer-530]

based on looking at am\pm on selector, i wonder if it would be better to have slightly different styling of the am\pm, more like the outlined toggle button group, to make it more obvious you can only select 1

probably another one for design decision

Have made the updates for the other comments and asked a designer about this