Skip to content

Apply hover cursor from Details component to Details element too #948

@janbrasna

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug 🪲Something isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions