Copying a rolling number copies the number (#713)

OP OpenVibers committed 4 days ago · bfd264476b · 2 files, +3 −0

Live #712 gave screen readers the value, but aria-hidden does not stop a selection: copying a hero counter
still pasted "29,474" followed by every strip's 0-9. The strips and cells are now user-select: none, so a
selection copies only the hidden value (checked on production with this file swapped in: 22, 29,474, 75,409).

Changes

ddiff --git a/public/js/ov-odometer.js b/public/js/ov-odometer.js
iindex 36382f54..b5056439 100644
---- a/public/js/ov-odometer.js
++++ b/public/js/ov-odometer.js
@@@ -26,6 +26,7 @@
     not the line box, and digits overflow it. */
  .ovnum{--ovnum-h:1.25em;display:inline-flex;align-items:center;line-height:var(--ovnum-h);font-variant-numeric:tabular-nums}
  .ovnum-cell{display:inline-block;line-height:var(--ovnum-h)}
++.ovnum-digit,.ovnum-cell{-webkit-user-select:none;user-select:none}
  .ovnum-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .ovnum-digit{display:inline-block;overflow:hidden;height:var(--ovnum-h);width:1ch;position:relative}
  .ovnum-track{display:block;transition:transform var(--ovnum-dur,.62s) cubic-bezier(.22,1,.28,1)}
ddiff --git a/test/odometer-a11y.test.js b/test/odometer-a11y.test.js
iindex 227f32bc..dc149c79 100644
---- a/test/odometer-a11y.test.js
++++ b/test/odometer-a11y.test.js
@@@ -49,4 +49,6 @@ assert.strictEqual(el.querySelectorAll('.ovnum-sr').length, 1, 'still one copy a
  
  const src = fs.readFileSync(path.join(__dirname, '..', 'public', 'js', 'ov-odometer.js'), 'utf8');
  assert.ok(/\.ovnum-sr\{position:absolute;width:1px;height:1px;[^}]*clip-path:inset\(50%\)/.test(src), 'the copy is visually hidden, not display:none');
++// Copy: aria-hidden does not stop a selection, so the strips and cells cannot be selected; the hidden copy can.
++assert.ok(/\.ovnum-digit,\.ovnum-cell\{-webkit-user-select:none;user-select:none\}/.test(src), 'copying a counter copies the number, not the strips');
  console.log('odometer: screen readers and copy get the number; the rolling strips are hidden from them');

diff --git a/public/js/ov-odometer.js b/public/js/ov-odometer.js

index 36382f54..b5056439 100644

--- a/public/js/ov-odometer.js

+++ b/public/js/ov-odometer.js

@@ -26,6 +26,7 @@

not the line box, and digits overflow it. */

.ovnum{--ovnum-h:1.25em;display:inline-flex;align-items:center;line-height:var(--ovnum-h);font-variant-numeric:tabular-nums}

.ovnum-cell{display:inline-block;line-height:var(--ovnum-h)}

+.ovnum-digit,.ovnum-cell{-webkit-user-select:none;user-select:none}

.ovnum-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.ovnum-digit{display:inline-block;overflow:hidden;height:var(--ovnum-h);width:1ch;position:relative}

.ovnum-track{display:block;transition:transform var(--ovnum-dur,.62s) cubic-bezier(.22,1,.28,1)}

diff --git a/test/odometer-a11y.test.js b/test/odometer-a11y.test.js

index 227f32bc..dc149c79 100644

--- a/test/odometer-a11y.test.js

+++ b/test/odometer-a11y.test.js

@@ -49,4 +49,6 @@ assert.strictEqual(el.querySelectorAll('.ovnum-sr').length, 1, 'still one copy a

const src = fs.readFileSync(path.join(__dirname, '..', 'public', 'js', 'ov-odometer.js'), 'utf8');

assert.ok(/\.ovnum-sr\{position:absolute;width:1px;height:1px;[^}]*clip-path:inset\(50%\)/.test(src), 'the copy is visually hidden, not display:none');

+// Copy: aria-hidden does not stop a selection, so the strips and cells cannot be selected; the hidden copy can.

+assert.ok(/\.ovnum-digit,\.ovnum-cell\{-webkit-user-select:none;user-select:none\}/.test(src), 'copying a counter copies the number, not the strips');

console.log('odometer: screen readers and copy get the number; the rolling strips are hidden from them');