Clickable entries in Details summary?

Flow
1

When we use Details, I currently always open just the 1st one.
However, my users might want it differently.

I’m toying with the idea of putting a lock/unlock icon in the summary. That works, but click on the lock also toggles the Details open/close. Is there any way to prevent the click from propagating?

2

You can use the Element API to add a click listener that is configured to stop the event from propagating to the parent element:

button.getElement().addEventListener("click", event -> {}).stopPropagation();
1 Like
3

That worked like a charm :grinning:

image

1 Like
4

Keep in mind that the summary itself is a button. Placing a button inside a button is not valid valid HTML and it can cause accessibility issues.

You could wrap the details and lock button in a layout instead and use absolute positioning to place the button to the right.

1 Like
5

We have decided against lock/unlock buttons, but I’m curious:
It is a <vaadin-details-summary … role=“button”>
Where does it actually state that an <xxx … role=“button”> can’t contain <yyy … role=“button”> ?

6

Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.

https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element

7

But that is for <button>, not <xxx … role=“button”>

I can see the “walks like a duck, quacks like a duck” logic, and that maybe it can cause accessibility issues, but I’m still not convinced that it isn’t valid html.

8 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div role="button">
      <div role="button"></div>
    </div>
  </body>
</html>

Error: An element with the attribute role=button must not appear as a descendant of an element with the attribute role=button.

https://validator.w3.org/nu/#textarea

9

Can’t argue with that. Thanks :smiley: