Apply hover cursor from Details component to Details element too

[janbrasna]

Description

Details element https://protocol.mozilla.org/components/detail/details, when compared to Details component https://protocol.mozilla.org/components/detail/details-component--default, doesn't offer the same cursor: pointer that improves its usability/affordance.

The current state perfectly matches how a <details> element behaves in default browser styles, which is somewhat sub-par if not styled better. (The plaintext selection caret may obscure the fact such element is to be interacted with.)

Steps to reproduce

Using only basic <details> instead of the more complex mzp-c-details, ref: mozilla/bedrock#14781

Expected result

Interactive mouse pointer signaling the UI element has a function, to match it with the Details Protocol component.

Actual result

Only default pointer affordance (text selection, caret) styling on hover.

(UA defaults: https://stackoverflow.com/a/77766654; styling tips: https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/#aa-changing-the-summary-cursor-value incl. @supports not (-ms-ime-align: auto) for not applying it when not interactive.)

Environment

macOS Catalina
FXDX 128b8, Chromium 127r1313161

[reemhamz]

Thanks for bringing this up!
I've always been a fan of changing cursors to pointers when it comes to an expected clicking user interaction on a given element, and this suggested change would be something I welcome.
I also did some reading around, and most styling examples of the < details > element suggest cursor: pointer to be one of the styles.

For example, MDN also styles it that way when recommending some styling.

It's not a breaking change and I doubt it'd lead to user issues, but rather improve user experience :) 👍🏼

[janbrasna]

I wasn't sure whether this wasn't intentional, as to match what UAs style by default.

(Pragmatic me would indeed prefer this added to the ‹summary› to get an ideal affordance whenever using it, for free.)

What's your general opinion on using @supports not (-ms-ime-align: auto) fence not applying the active appearance for UAs that don't have ‹details› interactive? (With a handful of false negatives falling into the trap too [think decade-old chromium and webkit], for details see link above.)