Add lint rule to make sure `<details>` elements have a `<summary>` element

[koddsson]

Hey 👋🏻

Here's a rule that makes sure that <details> elements have a <summary> element as well. While a <details> element doesn't need to have a <summary> element, it's good practice to provide one and not let the user agent inject one. Details elements should have a descriptive <summary> element instead.

I haven't written a rule that checks the child elements of a element before so I'm happy to make revisions if I'm doing the child querying incorrectly.

[khiga8]

@koddsson thank you for this 💪

Would you mind adding a corresponding rule doc in docs/rules/accessibility and linking to it in the README? (side note: we should introduce a workflow action to check this)

[koddsson]

[...] we should introduce a workflow action to check this

We have a meta test in https://github.com/github/eslint-plugin-custom-elements/blob/main/test/check-rules.js that makes sure that each rule is documented in a specific way and that the documentation is linked from the README if you're looking for inspiration.

[koddsson]

Running this on github/github, I'm getting false positives for <details> elements that have content_tag or ViewComponents with tag: :summary.

I feel like I gotta fix those before merging.

[smockle]

Removing my assignment.

cc @github/accessibility-reviewers (this project’s CODEOWNER)