openvibers/openvibe.shared Commits

4.46.0: touch targets from the fleet audit (#187)

OP OpenVibers committed 14 days ago · c23bbbfe73 · 9 files, +38 −7

On touch screens only: the navbar's Sign In, menu and orb reach 44px to a finger
(drawn as before), the brand mark 44 and the site's name 44 tall, with the orb
growing little sideways so the name keeps its taps; footer column links are
32px rows and the social links 44px; the shipped strip's lines get a taller hit
box with no layout change; kit small buttons and the find bar's controls are 44px.
Measured with the audit's method (elementFromPoint over the 44px square) on a
live page before and after.

Changes

ddiff --git a/CHANGELOG.md b/CHANGELOG.md
iindex 76b37a3..9f6b885 100644
---- a/CHANGELOG.md
++++ b/CHANGELOG.md
@@@ -6,6 +6,19 @@ A release is the git tag `vX.Y.Z`; consumers pin the tag's tarball (see README).
  
  ## Unreleased
  
++## 4.46.0 — 2026-10-29
++
++- **Touch targets from the fleet audit** (effective hit areas at 390 px: a 7x7 grid of `elementFromPoint` probes over
++  the 44 px square around each target, `research-2026-10-29/tap-targets.md`). On touch screens (`pointer: coarse`)
++  only:
++  - navbar: Sign In, the menu button and the orb get an invisible 44 px hit area (drawn as before). The brand mark's grows
++    to 44. The site's name is 44 tall. The orb grows only 4 px sideways, so the name 8 px away keeps its own taps;
++  - footer: column links are rows of 32 px (the footer is ~180 px taller on a phone; WCAG 2.5.8 AA asks 24). The social
++    links are 44 px, and the legal links in the bar get a taller hit area;
++  - the shipped strip's lines get a taller hit box with no layout change (padding in, margin out);
++  - kit: `.ovk-btn--small` is 44 px tall, `.ovk-go` reaches 44 px invisibly, and the find bar's field and select are
++    44 px tall.
++
  ## 4.45.1 — 2026-10-29
  
  - **The generated native code is compiled now, not just read.** `scripts/native-check.js` writes the theme's Compose
ddiff --git a/README.md b/README.md
iindex 81fa468..dd83004 100644
---- a/README.md
++++ b/README.md
@@@ -2,7 +2,7 @@
  
  > Versioned UI, the OpenVibe Frame (the navbar, footer and "shipped" views every site sits in), SEO, legal and release-client packages every OpenVibe site renders.
  
--**Status:** alpha, v4.45.1 (every release is a tag; see [CHANGELOG.md](CHANGELOG.md)). Every deployed
++**Status:** alpha, v4.46.0 (every release is a tag; see [CHANGELOG.md](CHANGELOG.md)). Every deployed
  consumer installs a tagged release and none keeps a vendored copy
  ([docs/migration-plan.md](docs/migration-plan.md) is done); each repository's `package.json` names
  the tag it pins.
ddiff --git a/STATUS.json b/STATUS.json
iindex b4fe1af..f77fdd6 100644
---- a/STATUS.json
++++ b/STATUS.json
@@@ -4,7 +4,7 @@
    "code": true,
    "wave": "W2",
    "package": "openvibe-shared",
--  "version": "4.45.1",
++  "version": "4.46.0",
    "plan": "OpenVibe End-to-End Realignment & Implementation Plan, revision 3 (20 Sep 2026)",
    "deployed": false,
    "deployment": "none of its own: a package released as git tags; OpenVibe.Network serves /shared/* from its pinned tag, and a site can serve its own pinned copy (openvibe-shared/serve)",
ddiff --git a/footer.js b/footer.js
iindex 95da71c..ac41641 100644
---- a/footer.js
++++ b/footer.js
@@@ -384,6 +384,7 @@
  .ovf-col h3{margin:0 0 2px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#8b93ad)}
  .ovf-col a{color:var(--text-secondary,#b6bdd2);font-size:.86rem;text-decoration:none;line-height:1.4;width:fit-content;transition:color .15s,transform .15s}
  .ovf-col a:hover{color:var(--accent,#60a5fa);transform:translateX(2px)}
++@media (pointer:coarse){.ovf-col a{display:inline-flex;align-items:center;min-height:32px}.ovf-col .ovf-social a{width:44px;height:44px}.ovf-legal-inline a,.ovf-compact-links a{position:relative}.ovf-legal-inline a::after,.ovf-compact-links a::after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}}
  .ovf-more{font-weight:600;opacity:.85}.ovf-ic{flex:none;vertical-align:-.14em}.ovf-more .ovf-ic{font-size:.85em;margin-left:3px;transition:transform .15s}.ovf-more:hover .ovf-ic{transform:translateX(3px)}.ovf-social .ovf-ic{font-size:17px}.ovf-account-links .ovf-ic{font-size:1.05em;opacity:.85}
  .ovf-brand{display:inline-flex;align-items:center;gap:9px;color:var(--text-primary,#f1f4fb);font-size:1.05rem;font-weight:700;text-decoration:none}
  .ovf-brand--sm{font-size:.9rem}
ddiff --git a/kit.css b/kit.css
iindex 0f707c0..bf06bef 100644
---- a/kit.css
++++ b/kit.css
@@@ -264,3 +264,12 @@ div.ovk-set-row { cursor: default; }
  }
  @media (prefers-reduced-motion: reduce) { .ovk-switch, .ovk-switch::after, .ovk-fold > summary > .ovk-i, .ovk-head, .ovk-btn { transition: none; } }
  @media print { .ovk-head, .ovk-dock, .ovk-save { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }
++
++/* Touch (4.46.0, the fleet tap audit): small buttons are 44px tall on a touch screen, the find bar's go button reaches
++   44px to a finger and looks the same, and the find bar's field and select are 44px tall. */
++@media (pointer: coarse) {
++    .ovk-btn--small { min-height: 44px; }
++    .ovk-go { position: relative; }
++    .ovk-go::after { content: ''; position: absolute; inset: -3px; }
++    .ovk-find input, .ovk-find select { min-height: 44px; }
++}
ddiff --git a/navbar.js b/navbar.js
iindex 3e99998..8d30309 100644
---- a/navbar.js
++++ b/navbar.js
@@@ -66,9 +66,15 @@
              /* A finger needs about 44px: on touch screens the wordmark's links reach the navbar's height and the mark
                 gets a clear ring, without moving anything (they were 22px and 30px tall). */
              @media (pointer: coarse) {
--                .openvibe-navbar .openvibe-navbar-brand .name a { padding-top: 11px; padding-bottom: 11px; margin-top: -8px; margin-bottom: -8px; }
++                .openvibe-navbar .openvibe-navbar-brand .name a { padding-top: 14px; padding-bottom: 14px; margin-top: -11px; margin-bottom: -11px; }
                  .openvibe-navbar .openvibe-navbar-brand a.flame { position: relative; }
--                .openvibe-navbar .openvibe-navbar-brand a.flame::after { content: ''; position: absolute; inset: -7px; }
++                .openvibe-navbar .openvibe-navbar-brand a.flame::after { content: ''; position: absolute; inset: -8px; }
++                /* 4.46.0 (the fleet tap audit): Sign In, the menu and the orb reach 44px to a finger, still drawn as before. */
++                .openvibe-navbar .openvibe-navbar-login, .openvibe-navbar .ovnav-burger, .openvibe-navbar .ovnav-orb { position: relative; }
++                .openvibe-navbar .openvibe-navbar-login::after { content: ''; position: absolute; inset: -6px 0; }
++                .openvibe-navbar .ovnav-burger::after { content: ''; position: absolute; inset: -3px -5px; }
++                /* The orb grows up and down only a little sideways: the site's name sits 8px from it and keeps its own taps. */
++                .openvibe-navbar .ovnav-orb::after { content: ''; position: absolute; inset: -6px -4px; }
              }
              .openvibe-navbar .ovnav-dd { position: relative; display: inline-flex; flex: none; }
              .openvibe-navbar .ovnav-dd-menu { display: none; position: fixed; top: 56px; left: 0; min-width: 180px; padding: 5px; border-radius: 12px; z-index: 1002; background: var(--bg-elevated, var(--bg-secondary, #111826)); border: 1px solid var(--border, rgba(255,255,255,.12)); box-shadow: 0 18px 44px rgba(0,0,0,.45); flex-direction: column; gap: 2px; }
ddiff --git a/package-lock.json b/package-lock.json
iindex 38cd00a..77b8858 100644
---- a/package-lock.json
++++ b/package-lock.json
@@@ -1,12 +1,12 @@
  {
    "name": "openvibe-shared",
--  "version": "4.45.1",
++  "version": "4.46.0",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
      "": {
        "name": "openvibe-shared",
--      "version": "4.45.1",
++      "version": "4.46.0",
        "license": "MIT",
        "dependencies": {
          "jsonwebtoken": "^9.0.0",
ddiff --git a/package.json b/package.json
iindex 5c74795..2ba0404 100644
---- a/package.json
++++ b/package.json
@@@ -1,6 +1,6 @@
  {
    "name": "openvibe-shared",
--  "version": "4.45.1",
++  "version": "4.46.0",
    "description": "Shared navbar, footer, themes, icons, legal pages, SEO, auth and analytics for every OpenVibe site",
    "main": "index.js",
    "bin": {
ddiff --git a/shipped.js b/shipped.js
iindex a0e71d5..e73c857 100644
---- a/shipped.js
++++ b/shipped.js
@@@ -62,6 +62,8 @@
          '.ov-shipped ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}.ov-shipped li{display:flex;gap:.5rem;align-items:baseline;min-width:0}',
          `.ov-shipped-site{flex:none;font-size:.72rem;font-weight:700;padding:.05rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--accent,#3b82f6) 16%,transparent);color:${TEXT};text-decoration:none}`,
          `.ov-shipped a.ov-shipped-subject{color:${TEXT};text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}`,
++        // Touch (4.46.0): a taller hit box with no change to the layout (padding in, margin out); overflow:hidden rules out a pseudo-element.
++        '@media (pointer:coarse){.ov-shipped a.ov-shipped-subject{padding-top:5px;padding-bottom:5px;margin-top:-5px;margin-bottom:-5px}}',
          '.ov-shipped a.ov-shipped-subject:hover{text-decoration:underline}.ov-shipped li time{flex:none;margin-left:auto;font-size:.75rem;opacity:.7}',
          `.ov-shipped-major{font-weight:600}.ov-shipped-links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem}.ov-shipped-links a{font-weight:600;color:${ACCENT};text-decoration:none}.ov-shipped-links a:hover{text-decoration:underline}`,
          '.ov-shipped-log{display:flex;flex-direction:column;gap:22px;min-width:0}',