Merge branch 'feature/tabs-click-event' into dev

examples/accessible-tabs/README.md

@@ -81,8 +81,9 @@ Tabs.initFromPreset();
 
 ### Options
 
-| name               | type    | default                | description                                                                |
-|--------------------|---------|------------------------|----------------------------------------------------------------------------|
-| `auto`             | boolean | `false`                | Determines if you have to press Enter button on a tab to reveal the panel. |
-| `tabListSelector`  | string  | `button[role="tab"]`   | The selector of the tab list.                                              |
-| `tabPanelSelector` | string  | `div[role="tabpanel"]` | The selector of the panel(s).                                              |
+| name               | type     | default                | description                                                                |
+|--------------------|----------|------------------------|----------------------------------------------------------------------------|
+| `auto`             | boolean  | `false`                | Determines if you have to press Enter button on a tab to reveal the panel. |
+| `onTabChange`      | Function | `() => {}`             | Callback on tab change.                                                    |
+| `tabListSelector`  | string   | `button[role="tab"]`   | The selector of the tab list.                                              |
+| `tabPanelSelector` | string   | `div[role="tabpanel"]` | The selector of the panel(s).                                              |

examples/accessible-tabs/index.html

@@ -81,6 +81,39 @@ <h3>Suggestion</h3>
                 <p>Lay the pineapple flat and slice it. Remove the core from the slices. Reconstitute the pineapple by stacking the slices on top of each other. Then style the pineapple with its plume of sheets. Squeeze a lime and sprinkle the pineapple with the lemon juice to prevent the flesh from oxidizing.</p>
             </div>
         </div>
+
+        <h3>With events</h3>
+
+        <div id="tab-demo-3" class="tabs tabs--auto">
+            <div class="tabs__tablist" role="tablist" aria-label="Trim a pineapple">
+                <button class="tabs__tab" role="tab" aria-selected="true" aria-controls="tab-panel-9" id="tab-9">Tab 1</button>
+                <button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-10" id="tab-10">Tab 2</button>
+                <button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-11" id="tab-11" data-deletable>Tab 3</button>
+                <button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-12" id="tab-12">Tab 4</button>
+            </div>
+
+            <div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-9" aria-labelledby="tab-9">
+                <h3>Steps</h3>
+                <ol>
+                    <li>Cut the two ends of the fruit so that it can be placed vertically on the worktop.</li>
+                    <li>Slice the skin from top to bottom going around the fruit.</li>
+                    <li>Retirez les “yeux” avec la pointe du couteau d’office.</li>
+                    <li>Tranchez l’ananas en quartier puis, au besoin, ôtez la partie centrale dure.</li>
+                </ol>
+            </div>
+            <div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-10" aria-labelledby="tab-10" hidden>
+                <h3>Variant</h3>
+                <p>To remove pineapple eyes, you can use an effective but more difficult technique. The eyes form parallel and continuous spirals between them around the fruit. You can dig regular trenches with a knife, following these spirals. Remove the parts containing the eyes: the pineapple is sculpted with pretty parallel grooves.</p>
+            </div>
+            <div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-11" aria-labelledby="tab-11" hidden>
+                <h3>Practice</h3>
+                <p>You can eat the whole pineapple (eyes removed), “to the bite” as is often done on the islands. Just cut the fruit into quarters. The quarter plumes then serve as an improvised “handle” to bite into the pineapple. According to taste, sprinkle it with grated coconut.</p>
+            </div>
+            <div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-12" aria-labelledby="tab-12" hidden>
+                <h3>Suggestion</h3>
+                <p>Lay the pineapple flat and slice it. Remove the core from the slices. Reconstitute the pineapple by stacking the slices on top of each other. Then style the pineapple with its plume of sheets. Squeeze a lime and sprinkle the pineapple with the lemon juice to prevent the flesh from oxidizing.</p>
+            </div>
+        </div>
 
         <h2>Code</h2>
 
@@ -102,6 +135,11 @@ <h2>Code</h2>
                 '#tab-demo-2': {
                     auto: true,
                 },
+                '#tab-demo-3': {
+                    onTabChange: function() {
+                        alert('Tab changed!')
+                    }
+                }
             }
 
             Tabs.initFromPreset()

src/classes/Tabs.js

@@ -86,6 +86,7 @@ class Tabs extends AbstractDomElement {
    */
   open(button) {
     const buttons = this._element.querySelectorAll(this._settings.tabListSelector)
+    const { onTabChange } = this._settings
     const panel = document.getElementById(button.getAttribute('aria-controls'))
 
     buttons.forEach((button) => this.close(button))
@@ -94,6 +95,10 @@ class Tabs extends AbstractDomElement {
     button.setAttribute('aria-selected', 'true')
     button.removeAttribute('tabindex')
     panel.removeAttribute('hidden')
+
+    if (onTabChange) {
+      onTabChange.bind(this)()
+    }
   }
 
   /**
@@ -272,6 +277,7 @@ function handleKeydown(e) {
 
 Tabs.defaults = {
   auto: false,
+  onTabChange: () => {},
   tabListSelector: 'button[role="tab"]',
   tabPanelSelector: 'div[role="tabpanel"]',
 }