Problem statement
Primer React provides a couple of low-level utility components such as <Box>
, <Text>
, and <Heading>
.
In particular, <Box>
seems to be used in all sorts of ways, outside of what the doc describes:
basic wrapper component for most layout related needs.
For example, there's <Box as="h1">
, <Box as="button">
, when people could be rendering <Heading>
or <h1>
, or <Button>
instead. Box usage outside of "wrapper-y" elements (e.g. div
, section
) feel like code smells.
There is an opportunity to create a linter that suggests a more appropriate element or component based on the as
prop.
This isn't directly tied to accessibility, but components being used in a predictable manner is important.
<Box>
rendered without sx
are unnecessarily verbose and might as well just be semantic HTML elements. This will not only improve readability, but it would also apparently improve performance.
Related slack thread
Acceptance criteria