Show a warning if a <section> does not have a heading element within it

[jackdomleo7]

Describe the new a11y feature or project enhancement

According to MDN and w3, a <section> "should" contain a heading element (the heading element is used to describe the section). This should only be a warning and not an error because MDN and w3 both state "should" and not "must"; it's an advisory rather than a requirement.

Link(s)

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

[shamahdev]

Hey there, I can help you with this feature, can you assign it to me?

[jackdomleo7]

@shamahdotdev certainly. I've had a couple of attempts at this already and couldn't figure it out so would be interesting if you can figure it out 🙂

[shamahdev]

Thank you @jackdomleo7, and yes it would've been easier to use :has() pseudo selector but unfortunately it's still on experiment and no browser was supported yet. So my attempt is to paint all last child element on a section with warning messages and remove it if heading element exist, i also use :before to make sure it didn't conflict with other error/warning. I hope it's find because i think there's no better implementation for it.

[jackdomleo7]

I like the idea of :has(), shame it has 0% support on caniuse.com. But I think your suggested approach is a good one for now. I'd be happy to look at your PR now.