ffeeeedd__onglets

ffeeeedd__onglets

<div data-function="tabs" class="ffeeeedd__onglets">
  <h3 data-role="tab" id="onglet_1-titre">
    <a href="#onglet_1">Onglet 1</a>
  </h3>
  <div data-role="panel" data-label="onglet_1-titre" id="onglet_1">
    <div>Lorem ipsum dolor sit amet</div>
  </div>  

  <h3 data-role="tab" id="onglet_2-titre">
    <a href="#onglet_2">Onglet 2</a>
  </h3>
  <div data-role="panel" data-label="onglet_2-titre" id="onglet_2">
    <div>Lorem ipsum dolor sit amet</div>
  </div>

  <h3 data-role="tab" id="onglet_2-titre">
    <a href="#onglet_2">Onglet 2</a>
  </h3>
  <div data-role="panel" data-label="onglet_2-titre" id="onglet_2">
    <div>Lorem ipsum dolor sit amet</div>
  </div>
</div>

<script>
  ;(function($) {

  /**
   * ffeeeedd__onglets
   * @author Gaël Poupard
   * @see http://www.ffoodd.fr
   * @note Basé sur jQuery Simple Tabs Plugin
   * @author TYR Théo-Maxime
   * @see https://github.com/bluety/simpleTabs
   */

  $.fn.tabs = function() {
    return $(this).each(function() {
      var $el = $(this),
          // On récupère tous les éléments onglets (tab) et leur contenu (tabpanel)
          $tabs = $el.find('[data-role="tab"]'),
          $panels = $el.find('[data-role="panel"]'),

          // On crée le groupe d’onglets (tablist) puis on lui adjoint les onglets (tab)
          $nav = $('<div role="tablist">').append( $tabs );

      var initialise = function () {
        // En premier lieu les onglets (tab) sont tous inactifs
        // Pour chacun, la cible du lien sert à ajouter l’attribut aria-controls
        $tabs.each(function() {
          $this = $(this);
          $this.attr({
            'role': 'tab',
            'aria-selected': 'false',
            'aria-expanded': 'false',
            'aria-controls': $this.find('a').attr('href').replace('#', '')
          });
          $this.removeAttr('data-role');
        });

        // Les contenus (tabpanel) sont également désactivés dans un premier temps
        // On récupère aussi data-label pour remplir aria-labbelledby
        $panels.each(function() {
          $this = $(this);
          $this.attr({
            'role': 'tabpanel',
            'aria-hidden': 'true',
            'tabindex': '-1',
            'aria-labelledby': $this.data('label')
          });
          $this.removeAttr('data-role data-label');
        });

        // Puis les premiers de chaque type sont activés.
        $tabs.first().attr({
          'aria-selected': 'true',
          'aria-expanded': 'true'
        });
        $panels.first().attr({
          'aria-hidden': 'false',
          'tabindex': '0'
        });

        // Et on génère tout ce petit monde en HTML
        $el.prepend($nav).append($panels);
      }
      initialise();

      // Au clic sur un onglet (tab)
      $tabs.on('click', function(e) {
        e.preventDefault();
        var $self = $(this);
        // On récupère l’ID du contenu qu’il contrôle
        $index = $self.find('a').attr('href');

        // Puis on désactive tous les onglets (tab) et leurs contenus (tabpanel)
        $tabs.attr({
          'aria-selected': 'false',
          'aria-expanded': 'false'
        });
        $panels.attr({
          'aria-hidden': 'true',
          'tabindex': '-1'
        });

        // On active l’onglet cliqué (tab) ainsi que son contenu associé (tabpanel)
        $self.attr({
          'aria-selected': 'true',
          'aria-expanded': 'true'
        });
        $($index).attr({
          'aria-hidden': 'false',
          'tabindex':'0'
        }).focus();
      });
    });
  };

})(jQuery);

jQuery(document).ready(function($){
  /* On initie Simple Tabs */
  $('[data-function="tabs"]').tabs();
});
</script>

<style>
  @charset "UTF-8";
  /**
   * @author Gaël Poupard
   * @see http://www.ffoodd.fr
   */

  /* ----------------------------- */
  /* == Onglets
   * @note Cette feuille de style est conçue pour styler l’extension « ffeeeedd__onglets ».
   * @note On s’appuie sur les attributs ARIA afin de ne styler les onglets que s’ils sont générés via Javascript.
   * @note Si le javascript n’est pas activé, les attributs ARIA n’existent pas et le DOM n’est pas manipulé.
   * @note On retombe donc sur les styles définis pour les niveaux de titres et les paragraphes.
    ----------------------------- */

  .js .ffeeeedd__onglets,
  .js [role="tabpanel"] {
    position: relative;
  }

  .js [role="tab"] {
    border: 1px solid gray;
    bottom: -1px;
    color: gray;
    cursor: pointer;
    margin: 0;
    padding: .5em 1em;
    z-index: 1;
  }

  .js [role="tab"][aria-selected="true"] {
    border-color: darkgray;
    color: darkgray;
    z-index: 2;
   }

  .js [role="tab"][aria-selected="true"] a { 
    color: inherit;
  }

  .js [role="tabpanel"] {
    display: none;
  }

  .js [role="tabpanel"][aria-hidden="false"] {
    display: block;
    z-index: 1;
  }

  .js .ffeeeedd__onglets [role="tab"] {
    border-bottom-color: darkgray;
    position: relative;
  }

  .js .ffeeeedd__onglets [role="tab"] + [role="tab"] { 
    margin-left: .5em;
  }

  .js .ffeeeedd__onglets [role="tab"][aria-selected="true"] { 
    border-bottom-color: lightgray;
  }

  .js .ffeeeedd__onglets  [role="tabpanel"] { 
    border: 1px solid darkgray;
  }
</style>

La navigation au clavier entre les onglets devrait se faire via les flèches et non en tabulant : cf

• https://twitter.com/eQRoeil/status/494472142944485376
• http://test.cita.illinois.edu/aria/tabpanel/index.php
• https://delicious.com/atalan/onglets