asciidoctor-tabs 1.0.0.alpha.10 → 1.0.0.alpha.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 07f0dd2b889d4de8d8c69e590e6f491ba46921cd666cfa035a4d96aee505626b
-  data.tar.gz: bee696a1b3f4e0cafa3ddf758cb43cec40c826f56c142a5fdb648346a13db8c2
+  metadata.gz: 7fabd40d3903b96a2982c4bb90a3a6d783fe55369bea21e06f98e4ec97a306bd
+  data.tar.gz: b6259434eb0eafd0c3c8a5a51bc1f786a111120fe68786ad21b4ad52b737412b
 SHA512:
-  metadata.gz: 32166ea582c1644e3cc2d4da17158f1d9e21fafa5353d455bb116fb9601e0df1001dc308cfe2d75dec16bd612e92d7755c465c9f031927ce237578a890c9eae6
-  data.tar.gz: dfca342f289480ae0c56ba93d00b9f36be79f175981b5ac9e827b81e25cd64be245ba527853c0e4562326df3be4ec11cc41617668214702f3aafe5b9d159c3ea
+  metadata.gz: 8990b67f318bbe16cb3441dadc8f8af8cbb78b4e8f31f53da1c4e8ef855e51eb458a024e1ed2886ceb66bc58bc38ab860c244e2a500bf13c43f87bf2b4212155
+  data.tar.gz: baca94e8a45013ef881a2a2bc689225225892d145a877a6ec51d7bb4cf697fb98ae7bdd57f516fa831170b9e8e7b6c1c60e0310a5f850ddefcb046225ba7077b

data/CHANGELOG.adoc

@@ -4,6 +4,30 @@
 This document provides a curated view of the changes to Asciidoctor Tabs per release.
 For a detailed view of what has changed, refer to the {url-repo}/commits/main[commit history] on GitHub.
 
+== 1.0.0-alpha.11 (2022-12-08) - @mojavelinux
+
+=== Changed
+
+* *BREAKING CHANGE:* Align terminology with ARIA / Open UI recommendations for a tabs component; requires change to custom CSS (#38)
+ ** `.tabset` becomes `.tabs`
+ ** `.tabs` becomes `.tablist`
+ ** `.tab-panel` becomes `.tabpanel`
+ ** `.is-active` for selected tab becomes `.is-selected`
+ ** `.is-active` for visible panel becomes `:not(.is-hidden)`
+* Assign ARIA attributes in JavaScript (i.e., role, aria-controls, aria-selected, hidden) where recommended (#38)
+* *BREAKING CHANGE:* Convert tabs block to openblock instead of passthrough block (#15)
+ ** `openblock` class added to `.tabs`
+ ** `.tablist` becomes child of `.content`
+ ** `.tabpanel` elements become siblings of `.tablist`
+
+=== Fixed
+
+* Clear margin on .tablist.ulist and child ul
+
+=== Details
+
+{url-repo}/releases/tag/v1.0.0-alpha.11[git tag] | {url-repo}/compare/v1.0.0-alpha.10\...v1.0.0-alpha.11[full diff]
+
 == 1.0.0-alpha.10 (2022-12-08) - @mojavelinux
 
 === Fixed

data/README.adoc

@@ -1,6 +1,6 @@
 = Asciidoctor Tabs
 Dan Allen <https://github.com/mojavelinux[@mojavelinux]>
-v1.0.0-alpha.10, 2022-12-08
+v1.0.0-alpha.11, 2022-12-08
 :idprefix:
 :idseparator: -
 ifndef::env-github[:icons: font]
@@ -14,7 +14,8 @@ An Asciidoctor extension that adds a tabs block to the AsciiDoc syntax.
 NOTE: This extension is intended to be used with HTML backends (e.g., `html5`).
 For all other backends (i.e., the filetype is not html), the custom block enclosure is taken away and its contents (a dlist) is converted normally.
 
-TIP: This extension is also published as an npm package named `@asciidoctor/tabs` for use with Asciidoctor.js (and thus Antora).
+TIP: This extension is also published as an npm package named `@asciidoctor/tabs` for use with Asciidoctor.js.
+See the xref:js/README.adoc[README in the js folder] for details.
 
 == Overview
 

data/asciidoctor-tabs.gemspec

@@ -35,5 +35,5 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency 'asciidoctor', ['>= 2.0.0', '< 3.0.0']
 
   s.add_development_dependency 'rake', '~> 13.0.0'
-  s.add_development_dependency 'rspec', '~> 3.11.0'
+  s.add_development_dependency 'rspec', '~> 3.12.0'
 end

data/data/css/tabs.css

@@ -1,17 +1,17 @@
 /*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
-.tabset {
+.tabs {
   margin-bottom: 1.25em;
 }
 
-.tabs > ul {
+.tablist > ul {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: 0 -0.25em 0 0;
+  margin: 0;
   padding: 0;
 }
 
-.tabs > ul li {
+.tablist > ul li {
   align-items: center;
   background-color: #fff;
   cursor: pointer;
@@ -22,26 +22,22 @@
   position: relative;
 }
 
-.tabs.ulist > ul li {
-  margin: 0;
-}
-
-.tabs > ul p {
-  line-height: inherit;
+.tablist.ulist,
+.tablist.ulist > ul li {
   margin: 0;
 }
 
-.tabs.ulist > ul li + li {
+.tablist.ulist > ul li + li {
   margin-left: 0.25em;
 }
 
-.tabset.is-loading .tabs li:not(:first-child),
-.tabset:not(.is-loading) .tabs li:not(.is-active) {
+.tabs.is-loading .tablist li:not(:first-child),
+.tabs:not(.is-loading) .tablist li:not(.is-selected) {
   background-color: #f5f5f5;
 }
 
-.tabset.is-loading .tabs li:first-child::after,
-.tabset:not(.is-loading) .tabs li.is-active::after {
+.tabs.is-loading .tablist li:first-child::after,
+.tabs:not(.is-loading) .tablist li.is-selected::after {
   background-color: inherit;
   content: "";
   display: block;
@@ -52,37 +48,42 @@
   right: 0;
 }
 
-.tab-pane {
+.tablist > ul p {
+  line-height: inherit;
+  margin: 0;
+}
+
+.tabpanel {
   background-color: #fff;
   padding: 1.25em;
 }
 
-.tab-pane > table.tableblock {
+.tabpanel > table.tableblock {
   border-width: 0;
   display: block;
   overflow-x: auto;
 }
 
-.tabs > ul li,
-.tab-pane {
+.tablist > ul li,
+.tabpanel {
   border: 1px solid #dcdcdc;
 }
 
-.tabs > ul li {
+.tablist > ul li {
   border-bottom: 0;
 }
 
-.tabset.is-loading .tab-pane:not(:first-child),
-.tabset:not(.is-loading) .tab-pane:not(.is-active) {
+.tabs.is-loading .tabpanel:not(:first-child),
+.tabs:not(.is-loading) .tabpanel.is-hidden {
   display: none;
 }
 
-.tab-pane > :first-child {
+.tabpanel > :first-child {
   margin-top: 0;
 }
 
-#content .tab-pane > :last-child,
-#content .tab-pane > :last-child > :last-child,
-#content .tab-pane > :last-child > :last-child > li:last-child > :last-child {
+#content .tabpanel > :last-child,
+#content .tabpanel > :last-child > :last-child,
+#content .tabpanel > :last-child > :last-child > li:last-child > :last-child {
   margin-bottom: 0;
 }

data/data/js/tabs.js

@@ -3,26 +3,29 @@
 
   var forEach = Array.prototype.forEach
 
-  init(document.querySelectorAll('.tabset'))
+  init(document.querySelectorAll('.tabs'))
 
-  function init (tabsets) {
-    if (!tabsets.length) return
-    forEach.call(tabsets, function (tabset) {
-      var tabs = tabset.querySelectorAll('.tabs li')
-      var syncIds = tabset.classList.contains('is-sync') ? {} : undefined
-      forEach.call(tabs, function (tab, idx) {
-        var id = tab.id
-        if (!id) {
-          var anchor = tab.querySelector('a[id]')
-          if (!anchor) return // invalid state
+  function init (tabsBlocks) {
+    if (!tabsBlocks.length) return
+    forEach.call(tabsBlocks, function (tabs) {
+      var syncIds = tabs.classList.contains('is-sync') ? {} : undefined
+      var tablist = tabs.querySelector('.tablist ul')
+      tablist.setAttribute('role', 'tablist')
+      forEach.call(tablist.querySelectorAll('li'), function (tab, idx) {
+        tab.setAttribute('role', (tab.className = 'tab')) // NOTE converter may not have set class on li
+        var id, anchor
+        if (!(id = tab.id)) {
+          if (!(anchor = tab.querySelector('a[id]'))) return // invalid state
           tab.id = id = anchor.parentNode.removeChild(anchor).id
         }
-        tab.className = idx ? 'tab' : 'tab is-active'
-        var pane = tabset.querySelector('.tab-pane[aria-labelledby~="' + id + '"]')
-        if (!pane) return // invalid state
-        if (!idx) pane.classList.add('is-active')
+        var panel = tabs.querySelector('.tabpanel[aria-labelledby~="' + id + '"]')
+        if (!panel) return // invalid state
+        tab.tabIndex = -1
+        tab.setAttribute('aria-controls', panel.id)
+        panel.setAttribute('role', 'tabpanel')
+        idx ? toggleHidden(panel, true) : toggleSelected(tab, true)
         var onClick = activateTab
-        var instance = { tabset: tabset, tab: tab, pane: pane }
+        var instance = { tabs: tabs, tab: tab, panel: panel }
         var syncId
         if (syncIds && !((syncId = tab.textContent.trim()) in syncIds)) {
           syncIds[(tab.dataset.syncId = syncId)] = true
@@ -32,18 +35,21 @@
       })
     })
     onHashChange()
-    forEach.call(tabsets, function (tabset) {
-      tabset.classList.remove('is-loading')
+    forEach.call(tabsBlocks, function (tabs) {
+      tabs.classList.remove('is-loading')
     })
     window.addEventListener('hashchange', onHashChange)
   }
 
   function activateTab (e) {
     var tab = this.tab
-    var tabset = this.tabset || (this.tabset = tab.closest('.tabset'))
-    var pane = this.pane || tabset.querySelector('.tab-pane[aria-labelledby~="' + tab.id + '"]')
-    forEach.call(tabset.querySelectorAll('.tabs li, .tab-pane'), function (el) {
-      el === tab || el === pane ? el.classList.add('is-active') : el.classList.remove('is-active')
+    var tabs = this.tabs || (this.tabs = tab.closest('.tabs'))
+    var panel = this.panel || (this.panel = document.getElementById(tab.getAttribute('aria-controls')))
+    forEach.call(tabs.querySelectorAll('.tablist .tab'), function (el) {
+      toggleSelected(el, el === tab)
+    })
+    forEach.call(tabs.querySelectorAll('.tabpanel'), function (el) {
+      toggleHidden(el, el !== panel)
     })
     if (!e) return
     var loc = window.location
@@ -54,16 +60,26 @@
 
   function activateTabSync (e) {
     activateTab.call(this, e)
-    var tabset = this.tabset
+    var tabs = this.tabs
     var thisTab = this.tab
-    var initialY = tabset.getBoundingClientRect().y
-    forEach.call(document.querySelectorAll('.tabs li'), function (tab) {
+    var initialY = tabs.getBoundingClientRect().y
+    forEach.call(document.querySelectorAll('.tabs .tablist .tab'), function (tab) {
       if (tab !== thisTab && tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tab: tab })
     })
-    var shiftedBy = tabset.getBoundingClientRect().y - initialY
+    var shiftedBy = tabs.getBoundingClientRect().y - initialY
     if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' })
   }
 
+  function toggleHidden (el, state) {
+    el.classList.toggle('is-hidden', (el.hidden = state))
+  }
+
+  function toggleSelected (el, state) {
+    el.setAttribute('aria-selected', state)
+    el.classList.toggle('is-selected', state)
+    el.tabIndex = state ? 0 : -1
+  }
+
   function onHashChange () {
     var id = window.location.hash.slice(1)
     if (!id) return

data/lib/asciidoctor/tabs/block.rb

@@ -9,38 +9,34 @@ module Asciidoctor
       def process parent, reader, attrs
         block = create_block parent, attrs['cloaked-context'], nil, attrs, content_model: :compound
         children = (parse_content block, reader).blocks
-        return block unless children.size == 1 && (source_tabs = children[0]).context == :dlist && source_tabs.items?
+        return block unless children.size == 1 && (seed_tabs = children[0]).context == :dlist && seed_tabs.items?
         unless (doc = parent.document).attr? 'filetype', 'html'
-          (id = attrs['id']) && (doc.register :refs, [(source_tabs.id = id), source_tabs]) unless source_tabs.id
-          (reftext = attrs['reftext']) && (source_tabs.set_attr 'reftext', reftext) unless source_tabs.reftext?
-          parent << source_tabs
+          (id = attrs['id']) && (doc.register :refs, [(seed_tabs.id = id), seed_tabs]) unless seed_tabs.id
+          (reftext = attrs['reftext']) && (seed_tabs.set_attr 'reftext', reftext) unless seed_tabs.reftext?
+          parent << seed_tabs
           return
         end
-        tabset_number = doc.counter 'tabset-number'
-        tabs_id = attrs['id'] || (generate_id %(tabset #{tabset_number}), doc)
+        tabs_number = doc.counter 'tabs-number'
+        tabs_id = attrs['id'] || (generate_id %(tabs #{tabs_number}), doc)
         sync = !(block.option? 'nosync') && ((block.option? 'sync') || (doc.option? 'tabs-sync')) ? ' is-sync' : nil
-        parent << (create_html_fragment parent, %(<div id="#{tabs_id}" class="tabset#{sync || ''} is-loading">))
-        if (title = attrs['title'])
-          parent << (create_html_fragment parent, %(<div class="title">#{parent.apply_subs title}</div>))
-        end
-        tabs = create_list parent, :ulist
-        tabs.add_role 'tabs'
+        tabs = create_open_block parent, nil, { 'id' => tabs_id, 'role' => %(tabs#{sync || ''} is-loading) }
+        tabs.title = attrs['title']
+        tablist = create_list parent, :ulist, { 'role' => 'tablist' }
         panes = {}
         set_id_on_tab = (doc.backend == 'html5') || (list_item_supports_id? doc)
-        source_tabs.items.each do |labels, content|
+        seed_tabs.items.each do |labels, content|
           tab_ids = labels.map do |tab|
-            tabs << tab
+            tablist << tab
             tab_id = generate_id tab.text, doc, tabs_id
-            tab_source_text = tab.instance_variable_get :@text
-            set_id_on_tab ? (tab.id = tab_id) : (tab.text = %([[#{tab_id}]]#{tab_source_text}))
-            tab.add_role 'tab'
-            (doc.register :refs, [tab_id, tab]).set_attr 'reftext', tab_source_text
+            tab_text_source = tab.instance_variable_get :@text
+            set_id_on_tab ? (tab.id = tab_id) : (tab.text = %([[#{tab_id}]]#{tab_text_source}))
+            tab.role = 'tab'
+            (doc.register :refs, [tab_id, tab]).set_attr 'reftext', tab_text_source
             tab_id
           end
           if content
             tab_blocks = content.text? ?
-              [(create_paragraph parent, (content.instance_variable_get :@text), nil, subs: :normal)]
-              : []
+              [(create_paragraph parent, (content.instance_variable_get :@text), nil, subs: :normal)] : []
             if content.blocks?
               if (block0 = (blocks = content.blocks)[0]).context == :open && blocks.size == 1 && block0.blocks?
                 blocks = block0.blocks
@@ -50,15 +46,14 @@ module Asciidoctor
           end
           panes[tab_ids] = tab_blocks || []
         end
-        parent << tabs
-        parent << (create_html_fragment parent, '<div class="content">')
+        tabs << tablist
         panes.each do |tab_ids, blocks|
-          parent << (create_html_fragment parent, %(<div class="tab-pane" aria-labelledby="#{tab_ids.join ' '}">))
-          blocks.each {|it| parent << it }
-          parent << (create_html_fragment parent, '</div>')
+          attrs = %( id="#{tab_ids[0]}--panel" class="tabpanel" aria-labelledby="#{tab_ids.join ' '}")
+          tabs << (create_html_fragment parent, %(<div#{attrs}>))
+          blocks.each {|it| tabs << it }
+          tabs << (create_html_fragment parent, '</div>')
         end
-        parent << (create_html_fragment parent, '</div>')
-        create_html_fragment parent, '</div>', 'id' => tabs_id
+        tabs
       end
 
       private

data/lib/asciidoctor/tabs/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Tabs
-    VERSION = '1.0.0.alpha.10'
+    VERSION = '1.0.0.alpha.11'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: asciidoctor-tabs
 version: !ruby/object:Gem::Version
-  version: 1.0.0.alpha.10
+  version: 1.0.0.alpha.11
 platform: ruby
 authors:
 - Dan Allen
@@ -50,14 +50,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.11.0
+        version: 3.12.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.11.0
+        version: 3.12.0
 description: An Asciidoctor extension that adds a tabs block to the AsciiDoc syntax.
   The tabset is constructed from a dlist enclosed in an example block marked with
   the tabs style.