Create a lint rule that restricts tag usage
khiga8 opened this issue · comments
Some components allow a as prop to be set. This flexibility can lead to non-semantic component usage which is very detrimental to accessibility.
For example, a <Heading> component should only ever render with a heading tag. However, it can currently be rendered with any tag like <p>.
Until a system-level update is made to define an allowlist for each component that accepts prop, we should restrict as values with a lint rule.
If we can make a system-level change, that would be preferable, but I'm not sure what work is involved for that.
We landed on deciding to do a runtime check here: https://github.com/github/accessibility/issues/1504#issuecomment-1201546810. @inkblotty is this something the accessibility team was planning to pick up?
Yes, @lesliecdubs we have it planned for the Button component in Sprint 3 (starting Aug 15). We should expect to adjust other components at a later time.
I will close this issue when this is resolved by the sprint 3 work :)
Awesome, thank you - great idea to add this lint rule!
@khiga8 I'm going to assign you on this issue so you can close out when done 👍🏻
I think @kendallgassner worked on this from a different angle in https://github.com/github/accessibility/issues/1504.