create rule: github/a11y-no-visually-hidden-interactive-element

[kendallgassner]

What

relates to: https://github.com/github/accessibility/issues/3739

This was an interesting lint rule to write because we not only utilize the className='sr-only' to visually hide react content but we use the Primer component VisuallyHidden.

I wrote an eslint rule for both scenarios. This eslint rule determines if a JSX.Elements is visually hidden (i.e. has the sr-only className or of type VisuallyHidden). If it the element is visually hidden then it checks its self and children to see if it contains and interactive elements.

Coverage

What is an interactive element?

I hard coded a list of interactive elements to check against:

• a
• button
• summary
• select
• option
• textarea

I thought it was better to have a dis-allow list rather then an allow list (e.g. span, div etc.)

What is considered invalid?

• nested interative elements:<VisuallyHidden><div><button>Submit</button></div></VisuallyHidden>
• as props: <VisuallyHidden as='button'>Submit</VisuallyHidden>
• multiple classNames: <button className='other sr-only'>Submit</button>

[kendallgassner]

@khiga8 Love that thought! Great idea... I'll add this in and re-tag you for an in-depth review when its updated.

[kendallgassner]

Interestingly, my passion week project is a use-case where we do want to visuallyHide an interactive element 🤔

[khiga8]

@kendallgassner Could you bring up this example in the channel so we can discuss if it's valid?

[kendallgassner]

@khiga8 I added the documentation updates and the htmlPropName. Can I clean up Component mapping experimental! and add this to getElementType in a follow up pr? -- I think it would be nice to test those changes and look at the logic in a clean state.