Ability to disable toggling/closing details

[jacobrask]

What problem are you trying to solve?

There are several use cases where you would want to disable the opening and closing of details – especially as browsers will now automatically toggle details based on for example Find in Page:

• Tab-like interfaces with exclusive details where one is always open
• Requiring completion of one step before continuing to the next
• Preventing closing a currently active step with required data entry

Details

When implementing accordions, in some designs it's not appropriate to allow closing of an open details without opening another. This is especially true of "tab-like" accordions. Tabs and Accordions have similarities and are sometimes used interchangeably depending on the viewport size, and in a tabbed interface you typically can't close the active tab without opening another. The desired pattern is similar to the exclusive pattern with the name attribute on details, but should also prevent the currently expanded details from being closed. See https://www.makethingsaccessible.com/guides/responsive-and-accessible-tabbed-interfaces/ for some details.

Other examples are components where you step through a set of required steps, one expanding after the other. You may be allowed to expand the next steps, but should not be allowed to close the current step until it has been completed. In other cases you should not be able to show the next step until the current one has been completed.

The GitHub Issues reporter is a good example, where you can expand the next sections by interacting with their forms, but you cannot explicitly collapse the section you are current writing in.

What solutions exist today?

You would need to use a MutationObserver to reset the open state since you cannot preventDefault the toggle event. You also have to disable keyboard and mouse events on summary.

VoiceOver currently reports <summary aria-disabled="true"> as "Disclosure Triangle, dimmed".

How would you solve it?

Adding a disabled attribute to summary:

<details name="accordion" open>
  <summary disabled>Summary 1</summary>
  Details 1
</details>
<details name="accordion">
  <summary>Summary 1</summary>
  Details 2
</details>

would solve most of the use cases above, even if it would still require tracking of the open state in JavaScript to update the disabled state accordingly.

Anything else?

No response