@markout-lang/bootstrap-kit 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markout-lang/bootstrap-kit",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Bootstrap 5.3 as Markout components: one part per component, with the id wiring, the ARIA attributes and the repetition written once",
   "repository": {
     "type": "git",

package/parts/breadcrumb.htm

@@ -7,8 +7,11 @@
     describes the entries, the component owns the markup.
 
     An entry is `{ name, link }`. The one without a `link` is the current
-    page, and gets `active` plus `aria-current` — the `<a>` stays in place
-    either way, since an anchor without an `href` renders as plain text.
+    page, and gets `active` plus `aria-current`. It is also the one entry
+    with no `<a>` around it: an anchor with no `href` renders as plain text,
+    which is why it used to be left in place, but it is still an anchor to
+    everything that reads the document rather than looks at it. Bootstrap's
+    own markup for the current crumb is the text on its own, and so is this.
   -->
   <:define tag="bs-breadcrumb:nav"
     aria-label="breadcrumb"
@@ -34,7 +37,8 @@
         :for-as="item"
         :class-active=${!item.link}
         aria-current=${item.link ? null : 'page'}>
-        <a href=${item.link ?? null}>${item.name}</a>
+        <a :if=${item.link} href=${item.link}>${item.name}</a>
+        <:group :else>${item.name}</:group>
       </li>
     </ol>
   </:define>

package/parts/dropdown.htm

@@ -3,8 +3,17 @@
 
   <!---
     A dropdown. Entries are `{ name, link, active, disabled, header, divider,
-    select }`; the three shapes Bootstrap draws differently — a divider, a
-    header, an item — are three optional regions over the same list.
+    select }`; the shapes Bootstrap draws differently — a divider, a header,
+    an item — are optional regions over the same list.
+
+    An item comes out as an `<a>` when it has a `link` and a `<button>` when
+    it does not, which is the rule the whole kit follows: what navigates is a
+    link, what acts is a button, and what does neither is not an interactive
+    element at all. The alternative -- one `<a>` with the `href` dropped when
+    there is nowhere to go -- looks identical and is reachable only by mouse:
+    an anchor without an `href` takes no focus and reaches the accessibility
+    tree with no role, so `select` could be triggered by a click and by
+    nothing else. Bootstrap styles `.dropdown-item` on both elements.
 
     The menu is tied to its toggle by `aria-labelledby`, and the id for that
     comes from `$id`, which is unique per instance. That is the general
@@ -72,12 +81,26 @@
           :else-if=${item.header}>${item.header}</h6>
 
         <a class="dropdown-item"
-          :else
+          :else-if=${item.link}
           :class-active=${item.active}
           :class-disabled=${item.disabled}
-          href=${item.link ?? null}
+          href=${item.link}
           aria-current=${item.active ? 'true' : null}
+          aria-disabled=${item.disabled ? 'true' : null}
           :on-click=${() => item.select?.(item)}>${item.name}</a>
+
+        <!---
+          `disabled` rather than `.disabled`: on a button the attribute is
+          the real thing, and it takes the entry out of the tab order as
+          well as greying it. Bootstrap's CSS matches both.
+        -->
+        <button class="dropdown-item"
+          type="button"
+          :else
+          :class-active=${item.active}
+          :attr-disabled=${item.disabled}
+          aria-current=${item.active ? 'true' : null}
+          :on-click=${() => item.select?.(item)}>${item.name}</button>
       </li>
     </ul>
   </:define>

package/parts/list-group.htm

@@ -6,10 +6,17 @@
     A list group, from `{ name, link, active, disabled, variant, badge, text }`
     entries.
 
-    Every entry is an `<a>`. Bootstrap only wants `.list-group-item-action`
-    (the hover and focus treatment) on the ones that actually go somewhere, so
-    that class follows `link` rather than being always on — and an anchor with
-    no `href` is inert, which is exactly what a non-link entry should be.
+    An entry with a `link` is an `<a>`; one without is a `<div>`. Both were
+    an `<a>` once, the second with its `href` dropped, which is inert and
+    looks right and is still a link as far as anything reading the document
+    is concerned. `.list-group-item-action` — Bootstrap's hover and focus
+    treatment — goes on the first alone, as it always did, and now it goes on
+    the element that can take focus.
+
+    The body is written twice because the element is what differs and markout
+    has no way to choose a tag name from an expression. Two branches of six
+    lines is the smaller cost: the alternative is a wrapper inside every
+    entry, on every page, to save repeating them here.
   -->
   <:define tag="bs-list-group:div"
 
@@ -31,26 +38,43 @@
 
     class=${_class}
   >
-    <a :for-each=${items}
-      :for-as="item"
-      class="list-group-item d-flex justify-content-between align-items-center"
-      :class-list-group-item-action=${!!item.link}
-      :class-active=${item.active}
-      :class-disabled=${item.disabled}
-      href=${item.link ?? null}
-      aria-current=${item.active ? 'true' : null}
-      aria-disabled=${item.disabled ? 'true' : null}>
-
-      <span>
-        <span :class-fw-bold=${!!item.text}>${item.name}</span>
-        <span class="d-block small opacity-75"
-          :if=${item.text}>${item.text}</span>
-      </span>
-
-      <bs-badge ::variant=${item.badge?.variant ?? 'secondary'}
-        ::pill
-        :if=${item.badge}>${item.badge?.name ?? item.badge}</bs-badge>
-    </a>
+    <:group :for-each=${items} :for-as="item">
+      <a :if=${item.link}
+        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+        :class-active=${item.active}
+        :class-disabled=${item.disabled}
+        href=${item.link}
+        aria-current=${item.active ? 'true' : null}
+        aria-disabled=${item.disabled ? 'true' : null}>
+
+        <span>
+          <span :class-fw-bold=${!!item.text}>${item.name}</span>
+          <span class="d-block small opacity-75"
+            :if=${item.text}>${item.text}</span>
+        </span>
+
+        <bs-badge ::variant=${item.badge?.variant ?? 'secondary'}
+          ::pill
+          :if=${item.badge}>${item.badge?.name ?? item.badge}</bs-badge>
+      </a>
+
+      <div :else
+        class="list-group-item d-flex justify-content-between align-items-center"
+        :class-active=${item.active}
+        :class-disabled=${item.disabled}
+        aria-current=${item.active ? 'true' : null}>
+
+        <span>
+          <span :class-fw-bold=${!!item.text}>${item.name}</span>
+          <span class="d-block small opacity-75"
+            :if=${item.text}>${item.text}</span>
+        </span>
+
+        <bs-badge ::variant=${item.badge?.variant ?? 'secondary'}
+          ::pill
+          :if=${item.badge}>${item.badge?.name ?? item.badge}</bs-badge>
+      </div>
+    </:group>
   </:define>
 
 </lib>

package/parts/nav.htm

@@ -8,6 +8,12 @@
     Entries are `{ name, link, active, disabled, target }`. For a tabbed
     interface set `:toggle="tab"` (or `"pill"`) and give each entry the
     `target` of its pane; `bs-tab-pane` below is the other half.
+
+    Three elements come out of that, one per kind of entry: a `<button>` when
+    the nav switches panes, an `<a>` when the entry has a `link`, and a
+    `<span>` when it has neither and is a label sitting among the links. The
+    third used to be an `<a>` with no `href`, which reads as a link to
+    anything that is not looking at the screen.
   -->
   <:define tag="bs-nav:ul"
 
@@ -53,12 +59,18 @@
         aria-selected=${item.active ? 'true' : 'false'}>${item.name}</button>
 
       <a class="nav-link"
-        :else
+        :else-if=${item.link}
         :class-active=${item.active}
         :class-disabled=${item.disabled}
-        href=${item.link ?? null}
+        href=${item.link}
         aria-current=${item.active ? 'page' : null}
         aria-disabled=${item.disabled ? 'true' : null}>${item.name}</a>
+
+      <span class="nav-link"
+        :else
+        :class-active=${item.active}
+        :class-disabled=${item.disabled}
+        aria-current=${item.active ? 'page' : null}>${item.name}</span>
     </li>
   </:define>
 

package/parts/navbar.htm

@@ -70,14 +70,29 @@
       <div class="collapse navbar-collapse" id=${_id}>
         <ul class=${_navClass}>
           <li class="nav-item" :for-each=${items} :for-as="item">
+            <!---
+              An entry with no `link` is a label among the links rather than
+              a link that goes nowhere, and comes out as a `<span>`. See
+              `nav.htm`, which makes the same distinction for the same
+              reason.
+            -->
             <a class="nav-link"
+              :if=${item.link}
               :class-active=${item.active}
               :class-disabled=${item.disabled}
               :class-btn=${item.button}
               :class-btn-primary=${item.button}
-              href=${item.link ?? null}
+              href=${item.link}
               aria-current=${item.active ? 'page' : null}
               aria-disabled=${item.disabled ? 'true' : null}>${item.name}</a>
+
+            <span class="nav-link"
+              :else
+              :class-active=${item.active}
+              :class-disabled=${item.disabled}
+              :class-btn=${item.button}
+              :class-btn-primary=${item.button}
+              aria-current=${item.active ? 'page' : null}>${item.name}</span>
           </li>
         </ul>
 

package/parts/pagination.htm

@@ -15,6 +15,14 @@
     called with the page number for one that stays on the page. Both are
     ordinary function parameters — a callback the component calls, not a DOM
     event, so it is a value and not an `:on-` handler.
+
+    They also decide the element. `::link` yields an href, so those entries
+    are `<a>`; with `::select` alone — the default, and the mode a page that
+    never reloads uses — there is nowhere to go, and each entry is a
+    `<button>`. Written as an `<a>` with no `href` it looks right and pages
+    for a mouse alone: an anchor without an `href` takes no focus and carries
+    no role, so the whole control is unreachable from the keyboard. Bootstrap
+    styles `.page-link` on both.
   -->
   <:define tag="bs-pagination:nav"
 
@@ -41,11 +49,27 @@
     aria-label=${label}
   >
     <ul class=${_class}>
-      <li class="page-item" :class-disabled=${current <= 1}>
+      <!---
+        `_href` is declared on the `<li>` so the two branches inside read one
+        value rather than calling `link()` twice each. The `<li>` is a scope
+        like any element, which is what makes that the obvious place for it.
+      -->
+      <li class="page-item"
+        :class-disabled=${current <= 1}
+        :_href=${link(current - 1)}>
         <a class="page-link"
-          href=${link(current - 1)}
+          :if=${_href != null}
+          href=${_href}
           aria-label="Previous"
+          aria-disabled=${current <= 1 ? 'true' : null}
           :on-click=${() => current > 1 && select(current - 1)}>${prev}</a>
+
+        <button class="page-link"
+          type="button"
+          :else
+          :attr-disabled=${current <= 1}
+          aria-label="Previous"
+          :on-click=${() => select(current - 1)}>${prev}</button>
       </li>
 
       <li class="page-item"
@@ -53,17 +77,35 @@
         :for-as="n"
         :for-key=${n}
         :class-active=${n === current}
-        aria-current=${n === current ? 'page' : null}>
+        aria-current=${n === current ? 'page' : null}
+        :_href=${link(n)}>
         <a class="page-link"
-          href=${link(n)}
+          :if=${_href != null}
+          href=${_href}
           :on-click=${() => select(n)}>${n}</a>
+
+        <button class="page-link"
+          type="button"
+          :else
+          :on-click=${() => select(n)}>${n}</button>
       </li>
 
-      <li class="page-item" :class-disabled=${current >= pages}>
+      <li class="page-item"
+        :class-disabled=${current >= pages}
+        :_href=${link(current + 1)}>
         <a class="page-link"
-          href=${link(current + 1)}
+          :if=${_href != null}
+          href=${_href}
           aria-label="Next"
+          aria-disabled=${current >= pages ? 'true' : null}
           :on-click=${() => current < pages && select(current + 1)}>${next}</a>
+
+        <button class="page-link"
+          type="button"
+          :else
+          :attr-disabled=${current >= pages}
+          aria-label="Next"
+          :on-click=${() => select(current + 1)}>${next}</button>
       </li>
     </ul>
   </:define>