fix(designer-ui): [A11Y] Auto-focus color picker in HTML toolbar

[ek68794998]

• Please check if the PR fulfills these requirements

• [x] The commit message follows our guidelines

• [ ] Tests for the changes have been added (for bug fixes/features)

• [ ] Docs have been added / updated (for bug fixes / features)

• What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

Bug fix (accessibility)

• What is the current behavior? (You can also link to an open issue here)

HTML toolbar color picker popover cannot be focused by keyboard. Fixes #4457.

• What is the new behavior (if this is a feature change)?

HTML toolbar color picker auto-focuses when selected.

• Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

No

[ek68794998]

Note: I think this whole HTML editor toolbar should be replaced with Fluent <Toolbar> component along with <Popover> and <MenuItem> for best accessibility, but this is a larger change than I wanted to do here since A11Y has a narrow SLA window.

cc @Eric-B-Wu

[Eric-B-Wu]

Note: I think this whole HTML editor toolbar should be replaced with Fluent <Toolbar> component along with <Popover> and <MenuItem> for best accessibility, but this is a larger change than I wanted to do here since A11Y has a narrow SLA window.

cc @Eric-B-Wu

agreed, yeah this would be a larger change to move this all over, but would be good to do it instead of building a separate component just for this

[ek68794998]

Note: I think this whole HTML editor toolbar should be replaced with Fluent <Toolbar> component along with <Popover> and <MenuItem> for best accessibility, but this is a larger change than I wanted to do here since A11Y has a narrow SLA window. cc @Eric-B-Wu

agreed, yeah this would be a larger change to move this all over, but would be good to do it instead of building a separate component just for this

Awesome. I opened tracking item #4814.