Fixes info modal icon click and keyboard navigation

[MisRob]

Summary

• Fixes info modal not appearing on help icon click

• Fixes help icon not being included in keyboard navigation

• By using KIconButton instead of KIcon

@jamalex @tomiwaoLE note visual differences. This is as close as possible that I can get with options available in KIconButton currently. Is it fine or do we need to plan some KDS updates?

(note that I don't know if we should use the 'before' state as a reference of what it should actually look like - Studio icons underwent some refactors few months ago as part of migrating to KDS so it's all in flux)

Reviewer guidance

• Go to Settings > Storage > Request more space > Open form
• Click the help icon next to "Who can use your content?"
• Also keyboard navigate the icon

Notes

I will open issues for few visual problems I noticed:

• Hover state for mini KIconButton is ellipsis rather than circlular
• Blue themed focus ring doesn't appear on keyboard navigation - this seems to be larger Studio problem as I see it happening frequently for other elements

[MisRob]

@bjester I think that this is quite a high priority since users cannot open licenses info modal at all. Should I target hotfixes, or how does it work?

[MisRob]

This actually also fixes clicking / keyboard of the help icon to open 'About resource visibility' modal from resource's 'Edit details'. After:

[bjester]

@bjester I think that this is quite a high priority since users cannot open licenses info modal at all. Should I target hotfixes, or how does it work?

Yeah I think you can target hotfixes.

[MisRob]

Thanks @bjester, done

[tomiwaoLE]

Hey @misha – sorry for the delay! Thanks for proposing this fix and for confirming we’re already using the smallest (mini) size of KIconButton.

Size: For dense form labels, we still need that smaller 16 px footprint. I’d be happy for us to explore adding a tiny/xs size in KDS—happy to open the ticket and draft the specs.

Hover & Focus: I’ll create an inverted-fill icon state (solid circle + knockout “?”) to use for both hover and :focus-visible. This provides a clear affordance and also serves as a consistent keyboard-focus indicator to replace the current blue ring.

I can share the SVGs and create demo wireframes if helpful.

[MisRob]

FYI we talked with @tomiwaoLE and there will be related KDS updates that will improve how icon buttons look like here. Details and priority to be determined soon. So we could address that at first, but if we're close to release at any point and this would be good to merge, I can also try some temporary overrides on Studio side.