Extra Particulars on `particulars`

Plenty of chatter across the ol’ <particulars> and <abstract> parts currently! I noticed Lea Verou not too long ago tweet an remark in regards to the factor’s show conduct and that sorta splintered into extra observations and utilization notes from of us, together with a revived dialogue on whether or not <abstract> ought to be allowed to include interactive parts or not.

There are a variety of dots to attach and I’ll do my greatest right here to do precisely that.

Can we alter the show of parts nested within the <particulars> factor?

Tremendous bizarre! If we crack open DevTools, the person agent stylesheet tells us <particulars> is a displayed as a block factor.

Discover the required <abstract> factor and the 2 further <div>s in there. We will override the show, proper?

What we would anticipate is that <particulars> now has an specific peak of 40vh and three rows the place the third row takes up the remaining house leftover from the primary two. Like this:

Ugh, however the third row doesn’t… do… that.

Apparently what we’re coping with is a grid container that’s unable to use grid conduct to its grid gadgets. However the HTML spec tells us:

The particulars factor is anticipated to render as a block field. The factor can also be anticipated to have an inside shadow tree with two slots.

(Emphasis mine)

And a bit later:

The particulars factor’s second slot is predicted to have its model attribute set to “show: block; content-visibility: hidden;” when the particulars factor doesn’t have an open attribute. When it does have the open attribute, the model attribute is predicted to be faraway from the second slot.

(Emphasis mine, once more)

So, the spec says the second slot — the 2 further <div>s from the instance — are solely coerced into being block parts when <particulars> is closed. When it’s open — <particulars open> — they need to conform to the grid show that overrides the person agent styling… proper?

That’s the talk. I get that slots are set to show: contents by default, however jamming nested parts into slots and eradicating the power to model them appears off. Is it a spec difficulty that the contents are slots, or a browser difficulty that we can not override their show although they’re within the field tree? Smarter individuals can enlighten me but it surely looks like an incorrect implementation.

Is <particulars> a container or an interactive factor?

A lot of of us are utilizing <particulars> to toggle menus open and closed. It’s a observe popularized by GitHub.

Appears cheap. The spec certain permits it:

The particulars factor represents a disclosure widget from which the person can receive further data or controls.

(Emphasis mine)

Alright, so we would anticipate that <particulars> is the container (it has an implicit position=group) and <abstract> is an interactive factor that units the container’s open state. Is sensible since <abstract> has an implcit button position in some contexts (however no corresponding WAI-ARIA position).

However Melanie Sumner did some digging that not solely appears to contradict that, however results in the conclusion that utilizing <particulars> as a menu most likely ain’t the perfect factor. See what occurs when <particulars> is rendered with out the <abstract> factor:

It does precisely what the spec suggests when it’s lacking a <abstract> — it makes its personal:

The primary abstract factor baby of the factor, if any, represents the abstract or legend of the small print. If there isn’t a baby abstract factor, the person agent ought to present its personal legend (e.g. “Particulars”).

(Emphasis mine)

Melanie ran that via an HTML validator and — shock! — it’s invalid:

So, <particulars> requires the <abstract>. And when <abstract> is lacking, <particulars> creates it’s personal, although it’s relayed as invalid markup. It’s all hunky-dory and legitimate when <abstract> is there:

All of which results in a brand new query: why is <abstract> given an implcit button position when <particulars> is what seems to be the interactive factor? Maybe that is one other case the place the browser implementation is wrong? Then once more, the spec does categorize each as interactive parts. You possibly can see how totally complicated all of this turns into.

Both means, Melanie’s final conclusion that we should keep away from utilizing <particulars> for menus is predicated on how assistive tech reads and pronounces <particulars> that include interactive parts. The factor is introduced, however there isn’t a point out of interactive controls past that till you, er, work together with <particulars>. Solely then will one thing like an inventory of hyperlinks be introduced.

In addition to, content material inside a collapsed <particulars> is excluded from in-page looking out (besides in Chromium browsers, which may entry the collapsed content material on the time of writing), making issues much more troublesome to seek out.

Ought to <abstract> permit interactive parts?

That’s the query posed in this open thread. The concept is that one thing like this could be invalid:

<particulars>
<abstract><a href=”…”>Hyperlink factor</a></abstract>
</particulars>

<!– or –>

<particulars>
<abstract><enter></abstract>
</particulars>

Scott O’Hara sums up properly why this is a matter:

The hyperlink shouldn’t be discoverable in any respect to JAWS when navigating with its digital cursor. If navigating to the abstract factor by way of the Tab key, JAWS pronounces “instance textual content, button” because the identify and position of the factor. If hitting Tab key once more, JAWS once more pronounces “instance textual content, button” although keyboard focus is on the hyperlink.

[…]

There’s extra I may go on about with the varied issues totally different AT have with the content material mannequin for abstract… however that might simply lengthen this remark out past what is critical. tldr; the abstract content material mannequin produces very inconsistent and generally simply flat out damaged experiences for individuals utilizing AT.

Scott opened tickets to right this conduct in Chromium and WebKit. Thanks, Scott!

But, it’s legitimate HTML:

Scott goes additional in a separate weblog put up. For instance, he explains how slapping position=button on <abstract> may look like an inexpensive repair to make sure it’s persistently introduced by assistive tech. That might additionally settle the talk over whether or not <abstract> ought to permit interactive parts as a result of buttons can not include interactive parts. The one downside then is that Safari then treats <abstract> as a typical button, which loses it’s expanded and collapsed states. So, the right position is introduced, however now it’s state shouldn’t be. 🙃

The place can we go now?

Are you scared to make use of <particulars>/<abstract> with all of those points and inconsistencies? I certain am, however solely insofar as to make it possible for what’s in it gives the fitting form of expertise and expectations for customers.

I’m simply glad these conversations are occurring and that they’re happening within the open. Due to that, you may touch upon Scott’s three proposed options for the way the content material mannequin for <abstract> is outlined, upvote his tickets, and report your individual points and use instances when you’re at it. Hopefully, the higher we perceive how the weather are used and what we anticipate them to do, the higher they’re applied.

Extra Particulars on `particulars` initially printed on CSS-Methods, which is a part of the DigitalOcean household. You need to get the publication.