"Tabs"

Would like to have standard tabs...

✅

Everybody

Its gonna take a minute to get there until it is universal

was in html5...

and was removed

<details>
9 year implementation history to reality

- chrome 2011

- WebKit 2012

- Firefox 2016

- Edge 2020

Has implemented tabs

✅

Way less, but still lotsa people

That are accessible

✅

Way less, but still lotsa people

...as a custom element

✅

Fewer people

...which might easily map to native elements?

✅

Even fewer people

... and are stylable

✅

Even fewer people

Has very widely tested that

✅

?

HTTPArchive March 2020

At least 0.01%* of pages have an element that indicates it's trying to use declarative tabs (592 pages / 4.5m)

75 different elements involved.

... and are progressively enhanced

✅

~ us

It cannot get simpler.

The devil is in the details.

Even we disagree on some important ones

1. Can we reduce disagreement and collaborate?
2. Can we collectively push, test, get data?
3. Would we be interested in a standard option like this
   1. Who wants to also work on open-ui?
      1. It probably won't be just this, though it might be possible to be also this.

1. Progressive Enhancement

<seven-minute-tabs>

  <div role="tablist" aria-label="What does this tab chooser do?">

  <a href="#first-tab" id="first-tab-btn" role="tab" aria-controls="first-tab" aria-selected="true">Ingredients</a>

  <a href="#second-tab" id="second-tab-btn" role="tab" aria-controls="second-tab" aria-selected="false">Directions</a>

  <a href="#third-tab" id="third-tab-btn" role="tab" aria-controls="third-tab" aria-selected="false">Nutritional Information</a>

</div>

<div id="first-tab" role="tabpanel" aria-labelledby="first-tab-btn">

  <ul>

https://panel-set.glitch.me/nojstoc.html

    

<generic-tabs label="receipes">

    <button slot="tab">Ingredients</button>

    <button slot="tab">Directions</button>

    <button slot="tab">Nutritional Information</button>

    <div slot="panel">

  ...

https://panel-set.glitch.me/nojsbuttons.html​

    

<ui-tabs label="receipes">

    <dt><dd>?

  ...

    <panel-set>
      <h2 x-title>Ingredients</h2>
      <div x-content>
        some content here that lists ingredients
      </div>
      <h2 x-title>Directions</h2>
      <div x-content>
        some content here describing the direction to prepare
      </div>
      <h2 x-title>Nutrition</h2>
      <div x-content>
        some content here about nutritional information
      </div>
    </panel-set>

https://panel-set.glitch.me/nojs.html