You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Background
I often see people using the variant prop of the <Text> component to change the styling of a text element (as it is intended). However, without supplying an as prop, the variant changes the tag the element is rendered as, often having implications in the accessibility of the document. For example, it's easy to use some title3 variant in order to get slightly emphasized text without the element having any semantic significance, but with the current defaults it gets rendered as an <h3> and thus can screw up the heading tree of a page.
Suggestion
Similarly to "no aria is better than bad aria", I feel that we should render all <Text> components as <p> by default. Perhaps have some kind of an opt-in toggle for them to render as semantically significant elements if the tedium of manually specifying as-prop feels too big?
I feel that in an ideal world things would work as they are currently, but I'm not sure what kinds of safeguards could be implemented to guide the users to correct patterns 🤔
Other notes
Is there a reason that variants body, bodySmall, bodyLarge and bodyStrong are rendered as <span> rather than <p>?
The text was updated successfully, but these errors were encountered:
Background
I often see people using the
variant
prop of the<Text>
component to change the styling of a text element (as it is intended). However, without supplying anas
prop, thevariant
changes the tag the element is rendered as, often having implications in the accessibility of the document. For example, it's easy to use sometitle3
variant in order to get slightly emphasized text without the element having any semantic significance, but with the current defaults it gets rendered as an<h3>
and thus can screw up the heading tree of a page.Suggestion
Similarly to "no aria is better than bad aria", I feel that we should render all
<Text>
components as<p>
by default. Perhaps have some kind of an opt-in toggle for them to render as semantically significant elements if the tedium of manually specifyingas
-prop feels too big?I feel that in an ideal world things would work as they are currently, but I'm not sure what kinds of safeguards could be implemented to guide the users to correct patterns 🤔
Other notes
Is there a reason that variants
body
,bodySmall
,bodyLarge
andbodyStrong
are rendered as<span>
rather than<p>
?The text was updated successfully, but these errors were encountered: