#666 ic-select refactor by lz405 · Pull Request #4219 · mi6/ic-ui-kit

lz405 · 2026-01-28T14:51:00Z

Summary of the changes

Refactor ic-select

Related issues

Refactor ic-select code #666
Update ic-select and ic-menu to follow the combobox pattern #3757
Screen reader incorrectly announces default select can be typed in #4079
Add prop to toggle native select #3771
ic-select and ic-multi-select won't close #4233
Update current value when options change #4081

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 · 2026-01-28T14:52:31Z

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/666-refactor-branch/web-components
View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/666-refactor-branch/react

packages/web-components/src/components/ic-select/ic-select.tsx

github-actions · 2026-01-28T15:16:35Z

Cypress visual tests failed.
View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/666-refactor-branch/cypress-image-diff-screenshots/diff
View the html report here: https://mi6.github.io/ic-ui-kit/branches/666-refactor-branch/cypress-image-diff-html-report/cypress-image-diff-html-report.html

GCHQ-Developer-299

I think you need to regenerate the cypress images , currently the diff is showing that you've deleted them.

Regards commits, you can squash the cypress test and regenerated images into one commit, and I think you should add more detail to the 'add word' commit message.

GCHQ-Developer-299 · 2026-02-05T15:05:26Z

Review in progress: all three versions seem to work well in keyboard, and function the same as Develop branch.

Interestingly it looks like one visual issue has been fixed even - the top-padding on grouped select. (develop vs. your branch)

Will now test with Voiceover screenreader :)

(note: I think you still need to regenerate those cypress images)

GCHQ-Developer-299

The 'loading with error' story no longer functions the same as it does on develop

Other than that, and the Cypress images, so far everything looks great! The three select variants all seem to work fine in voiceover :)

GCHQ-Developer-299 · 2026-02-06T15:24:32Z

packages/web-components/src/components/ic-select/readme.md

 | `"icon"`        | Content will be placed to the left of the select text input. |


-## CSS Custom Properties


I think this section needs to be added back in (an npm run build should do it?)

GCHQ-Developer-299

Nice work fixing the Loading story behaviour :)
I have spotted some styling inconsistencies though

GCHQ-Developer-299 · 2026-02-06T15:27:39Z

...eact/cypress-image-diff-screenshots/baseline/IcSelect.cy.tsx/input-focused-high-contrast.png

The Select should be showing focussed styles (blue) in this image

GCHQ-Developer-299 · 2026-02-06T15:28:54Z

...t/cypress-image-diff-screenshots/baseline/IcSelect.cy.tsx/recommended-open-high-contrast.png

It looks like the 'selected' styles aren't properly translated to high contrast here - before there was a full border

GCHQ-Developer-299 · 2026-02-06T15:30:22Z

...-screenshots/baseline/IcSelectMulti.cy.tsx/multi-select-option-highlighted-high-contrast.png

Another example of highlighted options styles not showing in High Contrast

GCHQ-Developer-299 · 2026-02-06T15:31:15Z

...cypress-image-diff-screenshots/baseline/IcSelectMulti.cy.tsx/multi-select-shift-arrow-up.png

This image has significantly changed - the two items aren't checked, and the highlighted item isn't anymore

lz405 · 2026-02-12T10:58:52Z

Should have fixed #4233. Compare the 'sizes' storybook on either branch.

GCHQ-Developer-299 · 2026-02-16T15:21:34Z

@lz405 we merged a change to readme.md generation today that's caused a conflict for you - a fresh build oughta sort it

…low combobox pattern refactor ic-select to simplify code and follow the combobox pattern re #666

update cypress tests for ic-select test #666

update docs for ic-select docs #666

…s that depend on ic-select update readme and metadata for components that depend on ic-select docs #666

update canary docs for ic-select dependencies docs #666

…c-select validation skip ic-pagination-bar tests that fail because they try to confidently set 'All' to the value of a select which does not contain 'All' in its options test #666

GCHQ-Developer-847

I've looked through all the stories but still need to finish looking at the actual code. Left a few comments on the things I've found so far

But overall it's looking really good! Amazing work on such a complex ticket 🤩

GCHQ-Developer-847 · 2026-02-17T12:04:50Z

packages/web-components/src/components/ic-select/ic-select.tsx

With the searchable and multi-select - when you have a long list of options, e.g. in the 'Scroll behaviour' story, and you're focusing through them using the keyboard, the focused option doesn't scroll into view

GCHQ-Developer-847 · 2026-02-17T12:05:32Z

packages/web-components/src/components/ic-select/ic-select.tsx

In the 'Loading with error' stories, I've noticed that if you focus on the 'Retry' button and press Space / Enter, the select loses focus completely

GCHQ-Developer-847 · 2026-02-17T12:08:07Z

packages/web-components/src/components/ic-select/ic-select.tsx

In the 'Update input value from external request' searchable story, there's a slight difference when compared to the develop branch. On develop, when you select ‘unknown’ and look in the console, it emits both icChange and icOptionSelect with ‘unknown’. But on this branch, it does the same but with an extra icChange with value ‘item-1’

GCHQ-Developer-847 · 2026-02-17T16:11:44Z

Finished reviewing now - everything else looks good to me, will be happy to approve once those issues I commented about are addressed!

GCHQ-Developer-299 reviewed Jan 28, 2026

View reviewed changes

packages/web-components/src/components/ic-select/ic-select.tsx Show resolved Hide resolved

lz405 force-pushed the 666-refactor-branch branch 15 times, most recently from 3df416e to a63ddd0 Compare February 4, 2026 16:00

GCHQ-Developer-299 requested changes Feb 5, 2026

View reviewed changes

lz405 force-pushed the 666-refactor-branch branch from a63ddd0 to f1db419 Compare February 5, 2026 11:24

GCHQ-Developer-299 requested changes Feb 5, 2026

View reviewed changes

lz405 force-pushed the 666-refactor-branch branch 3 times, most recently from 75e7c34 to e05d032 Compare February 6, 2026 14:01

GCHQ-Developer-299 reviewed Feb 6, 2026

View reviewed changes

GCHQ-Developer-299 requested changes Feb 6, 2026

View reviewed changes

lz405 force-pushed the 666-refactor-branch branch 3 times, most recently from 81ecabf to 1efe017 Compare February 11, 2026 09:47

lz405 force-pushed the 666-refactor-branch branch 4 times, most recently from dd8add4 to ecec77d Compare February 11, 2026 15:27

lz405 requested a review from GCHQ-Developer-299 February 11, 2026 16:10

lz405 force-pushed the 666-refactor-branch branch from ecec77d to 18b0562 Compare February 12, 2026 10:46

lz405 force-pushed the 666-refactor-branch branch 2 times, most recently from 0b19c82 to 82d6fe4 Compare February 13, 2026 09:02

lz405 force-pushed the 666-refactor-branch branch from 82d6fe4 to 9f16731 Compare February 17, 2026 09:54

lz405 added 8 commits February 17, 2026 10:06

refactor(web-components): refactor ic-select to simplify code and fol…

2c3194d

…low combobox pattern refactor ic-select to simplify code and follow the combobox pattern re #666

test(react): update cypress tests for ic-select

649718e

update cypress tests for ic-select test #666

feat(react): update Cypress visual regression test baseline images

8fa8da7

chore(root): add 'unflatten' to list of spellcheck ignore words

ecbb733

docs(docs): update docs for ic-select

097e6b3

update docs for ic-select docs #666

docs(canary-web-components): update readme and metadata for component…

34b3d63

…s that depend on ic-select update readme and metadata for components that depend on ic-select docs #666

docs(canary-docs): update canary docs for ic-select dependencies

037224d

update canary docs for ic-select dependencies docs #666

test(canary-react): skip ic-pagination-bar tests failing due to new i…

6b5deab

…c-select validation skip ic-pagination-bar tests that fail because they try to confidently set 'All' to the value of a select which does not contain 'All' in its options test #666

lz405 force-pushed the 666-refactor-branch branch from 9f16731 to 6b5deab Compare February 17, 2026 10:15

GCHQ-Developer-847 requested changes Feb 17, 2026

View reviewed changes

		\| `"icon"` \| Content will be placed to the left of the select text input. \|


		## CSS Custom Properties

Conversation

lz405 commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of the changes

Related issues

Checklist

General

Testing

Accessibility

Resize/zoom behaviour

System modes

Testing content extremes

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

GCHQ-Developer-299 commented Feb 5, 2026

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lz405 commented Feb 12, 2026

Uh oh!

GCHQ-Developer-299 commented Feb 16, 2026

Uh oh!

GCHQ-Developer-847 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GCHQ-Developer-847 commented Feb 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lz405 commented Jan 28, 2026 •

edited

Loading