Update Picklist for SLDS2

[msmx-mnakagawa]

What I did

• update markups to combobox pattern
• update classnames for dropdown sizing
• improve a11y for disabled state

Reference

https://v1.lightningdesignsystem.com/components/picklist/

[reg-suit]

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

[stomita]

Scrolling with keyboard is not following the focused item

Before this PR:
https://github.com/user-attachments/assets/905b9b34-3d5c-4b35-8e48-9d29c5f2db87

After this PR:
https://github.com/user-attachments/assets/17e932bd-f4c9-475d-aa56-18e43525203f

[msmx-mnakagawa]

@stomita
Thank you for confirming.
I've tried to add a similar feature to what you mentioned in 5718342.

[msmx-mnakagawa]

FYI:
The same behavior about VRT as DateInput would occur in this PR as well.
https://mashmatrix.github.io/react-lightning-design-system/?path=/story/picklist--default

[stomita]

It seems you are controlling by calculating and setting scroll position, but it may be better to delegate the control with the browser's focus capability as the current DropdownMenu does.

react-lightning-design-system/src/scripts/DropdownMenu.tsx

Line 154 in 356ca4a

anchorEl.focus();

[msmx-mnakagawa]

@stomita
In ecf43a5, I've reintroduced DropdownMenu, just as it was before this PR.

It's likely that portalClassName makes VRT a little flaky though...

[stomita]

@msmx-mnakagawa So you decided not changing the current slds-picklist to slds-combobox, right ?

[msmx-mnakagawa]

@stomita
As we discussed directly, I reverted the DropdownMenu solution.
After that, I added a simple .focus() logic, referring to DropdownMenu, in e1721e4.

You can already confirm this PR!

[msmx-mnakagawa]

FYI, I've removed aria-labelledby in 13fe21d, reflecting #472 (comment).

[msmx-mnakagawa]

FYI: I'm sorry I, added a small change de94337.