Spicy Sections: An (almost) proposal

OpenUI has been doing considerable research on how we can standardize more UI components. High among the obvious targets are to provide native answers for patterns already standardized through ARIA, like tabs and accordions. From this, we've been developing a proposal which suggests that these should be user affordances attributed to otherwise well-structured content rather than individual elements - in much the same way that the platform handles scroll panes. For much more information on this, see Design Affordance Controls

In order to prove, disprove, or improve such a proposal, we are providing a custom element and asking authors to try it out and provide feedback.

If you want to cut to the chase and see something working, check out this demonstration and resize your browser window to see the afforances change.

General Use

In order to use, include the custom element script module...

<script type="module" src="/SpicySections.js"></script>

The <spicy-sections> element can be wrapped around pairs of elements indicating labels (what would be in a tab label) and content (in much the same way dl contains dt and dd pairs).

<spicy-sections>
  <!-- any heading here, followed by an element containing content --!>
  <h2>Ingredients</h2>
  <div>A list of ingredients</div>

  <!-- repeat the pattern... --!>
  <h2>Instructions</h2>
  <div>A list of instructions</div>
</spicy-sections>

Authors can then express when different affordances should be presented. This can be via an attribute, or a CSS Custom Property (though, this is read only once). To present these on a smaller screen as a series of collapses (as if they were summary/details like), this would look like...

[screen and (max-width: 800px)] collapse

This custom element itself isn't a proposal. It is something which we can use to roughly evaluate the concept an element which could present different Design Affordance Controls". There are many efforts happening in parallel discussing precisely how this should (and shouldn't or can and can't) work, but we'd love feedback about the crux of the idea itself. Please check it out: Play with it. Build something useful. Ask questions, show us your uses, give us feedback about what you like or don't.

If you want to see more details on the custom element there's more in SpicySections.html.