Sunday, September 18, 2022
HomeWebsite DesignExtra Particulars on `particulars` | CSS-Tips

Extra Particulars on `particulars` | CSS-Tips

A number of chatter across the ol’ <particulars> and <abstract> components these days! I noticed Lea Verou lately tweet an commentary concerning the ingredient’s show conduct and that sorta splintered into extra observations and utilization notes from people, together with a revived dialogue on whether or not <abstract> needs to be allowed to include interactive components or not.

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

Can we modify the show of components nested within the <particulars> ingredient?

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

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

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

Open details element with a summary of foo and two child elements, one yellow and one blue. The blue element takes up the rest of the space left by summary and the first child.

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

Open details element with a summary of foo and two child elements, one yellow and one blue. The summary and two child elements are all the same height.

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

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

(Emphasis mine)

And slightly later:

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

(Emphasis mine, once more)

So, the spec says the second slot — the 2 extra <div>s from the instance — are solely coerced into being block components 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 components into slots and eradicating the power to fashion them appears off. Is it a spec concern that the contents are slots, or a browser concern that we can not override their show despite the fact that they’re within the field tree? Smarter folks can enlighten me nevertheless it looks as if an incorrect implementation.

Is <particulars> a container or an interactive ingredient?

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

DevTools open with the details element highlighted in orange.

Appears affordable. The spec positive permits it:

The particulars ingredient represents a disclosure widget from which the person can receive extra info or controls.

(Emphasis mine)

Alright, so we would count on that <particulars> is the container (it has an implicit position=group) and <abstract> is an interactive ingredient that units the container’s open state. Is smart 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 in all probability ain’t the very best factor. See what occurs when <particulars> is rendered with out the <abstract> ingredient:

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

The primary abstract ingredient youngster of the ingredient, if anyrepresents the abstract or legend of the main points. If there is no such thing as a youngster abstract ingredient, the person agent ought to present its personal legend (e.g. “Particulars”).

(Emphasis mine)

DevTools open with the summary markup highlighted in orange.

Melanie ran that by means of an HTML validator and — shock! — it’s invalid:

Error, element details is missing a required instance of child element summary.

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:

Success message from the W3C HTML validator with the markup for a details element and summary that contains a link element.

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 ingredient? Maybe that is one other case the place the browser implementation is inaccurate? Then once more, the spec does categorize each as interactive components. You may see how completely complicated all of this turns into.

Both manner, Melanie’s final conclusion that we must keep away from utilizing <particulars> for menus is predicated on how assistive tech reads and proclaims <particulars> that include interactive components. The ingredient is introduced, however there is no such thing as a point out of interactive controls past that till you, er, work together with <particulars>. Solely then will one thing like a listing of hyperlinks be introduced.

Moreover, content material inside a collapsed <particulars> is excluded from in-page looking out (besides in Chromium browsers, which might entry the collapsed content material on the time of writing), making issues much more tough to search out.

Ought to <abstract> permit interactive components?

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

  <abstract><a href="">Hyperlink ingredient</a></abstract>

<!-- or -->


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 ingredient through the Tab key, JAWS proclaims “instance textual content, button” because the title and position of the ingredient. If hitting Tab key once more, JAWS once more proclaims “instance textual content, button” despite the fact that keyboard focus is on the hyperlink.


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

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

But, it’s legitimate HTML:

Success message from the W3C validator with details markup.

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

The place will we go now?

Are you scared to make use of <particulars>/<abstract> with all of those points and inconsistencies? I positive am, however solely insofar as to ensure that what’s in it offers the suitable kind of expertise and expectations for customers.

I’m simply glad these conversations are taking place and that they’re going down within the open. Due to that, you’ll be able to 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 circumstances when you’re at it. Hopefully, the higher we perceive how the weather are used and what we count on them to do, the higher they’re carried out.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments