Concurrent Input Mechanisms

pass.html — the fix

<h1>Reading list</h1>

<!-- FIX: no device sniffing at all. A real button plus a click handler works
     with touch, mouse, stylus, keyboard, switch and voice control
     simultaneously, because the browser normalises all of them into `click`.

     The rule: bind to `click`, not to `touchstart` or `mousedown`. Use
     `pointer*` events if you need low-level pointer data, and never remove a
     control from the tab order because you think the user does not need it. -->
<ul class="plain" id="list">
  <li><button type="button" class="button button--secondary" data-t="Tidal Flats">Tidal Flats</button></li>
  <li><button type="button" class="button button--secondary" data-t="The Long Field">The Long Field</button></li>
</ul>
<p id="picked" role="status">Nothing selected yet.</p>

<!-- If you must adapt the INTERFACE to input type - larger targets once a
     touch has been seen, say - respond to the most recent interaction rather
     than to a capability check at load, and never disable another path:

       window.addEventListener('pointerdown', function (e) {
         document.body.dataset.lastInput = e.pointerType;   // touch | mouse | pen
       });
       window.addEventListener('keydown', function () {
         document.body.dataset.lastInput = 'keyboard';
       });

     That adapts presentation without ever taking an input method away.

     The permitted exceptions are narrow: restricting input where it is
     necessary for SECURITY, or to respect a setting the user themselves chose. -->