Improve ic-typography docs to ensure component is used correctly
Summary
I've noticed a lot of misuses of the typography component. I very regularly see code like:
<IcTypography variant="h2">
My heading text
</IcTypogaphy>
for what should be a semantic heading, presumably either thinking it outputs
<h2>
My heading text
</h2>
or not knowing they are supposed to use semantic headings in the first place.
💬 Description
I know using semantic headings is explained in the guidance but it doesn't seem to be enough. Can we explore some ideas to make it clearer so that the component is used correctly?
Could we add a sentence in the header that makes it clearer that the typography component only provides styling, not semantic HTML, with a prompt to read the guidance or look at our "coding for accessibility section?
Can we make the guidance more concise and provide links to pages with more detail to encourage users to read the key points?
Alternative option
MUI try to address this by using an optional component prop in addition to variant, but I've observed that this is also often unused, leading to a similar problem where all text on the page is a paragraph (the default value of the component prop).
We could consider adding a required component prop to force developers to consider what they should be using but this would be a breaking change and annoying for developers who have read the guidance.
May just be the case that we document the new way of setting the html element
This is to update the guidance as a follow up to ic-ui-kit 3754
This ticket was written before a pattern that solves this issue was agreed in UI kit 3754. In addition to writing guidance on how to use the new optional prop that was introduced in 3754, add a sentence to explain why it's important, linking to Accessibility > Coding for developers > Headings.
Explain that the variant prop is for styling and the new one is for structure.
Bear in mind that developers will typically only look at the code tab.
Consider telling users that the new prop will become required in version 4?