Any slotted content is risky to me, we don't want a button that can carry an iframe to make the most extreme example.
What do we expect for a button to contain. Nothing interactive, nothing block.
Do we need to guard against that? Not that we should emulate everything other frameworks do but is there an example you can point me to that doesn't provide a slot? I couldn't fine one:
If someone puts an iframe in a button, I think it's just like HTML5 where garbage-in gives you garbage-out. In my understanding, this problem can be solved by documentation if it needs to be solved at all.
Regarding T255902 acceptance criteria:
Component template is guided by the above skeleton structure.
Component follows the WAI best-practice and applies descriptive ARIA roles and attributes.
I didn't add any since it's a semantic and literal button element. If you see something that should be there, please let me know.
Component styling is guided by OOUI CSS properties, uses WikimediaUI Base variables and follows BEM conventions.
Component is documented with a couple configurations in Storybook.
Component has Jest tests for at least the snapshots.
Any functions or methods added have a JSDoc description and TypeScript typing.
Any lessons learned, development tips, and usage notes wanted are documented in the readme or the migration guide.
I revised the linter config but didn't see any other changes to make.
Update the skeleton in this task too so it's easy to see what is being targeted for subsequent components.