title: angularjs: disable radio button whilst not actually disabling it
body: <p>I need to disable a radio button but still be able to tab through it.  It seems that actually setting it to disabled takes it out of the tab rotation.</p>
  
  <p>I have therefore done the following:</p>
  
  <pre><code>&lt;input type="radio" class="appear-disabled" ng-keypress="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes"&gt;&amp;nbsp;Yes&amp;nbsp;
  &lt;input type="radio" class="appear-disabled" ng-keypress="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No"&gt;&amp;nbsp;No&amp;nbsp;
  
  .appear-disabled {
   opacity: .5;
   pointer-events: none;
  }
  
  $scope.suppressKeyboard = function(event) {
   var keyCode = event.keyCode;
  
   // 32 = space, 13 = enter
   if (keyCode == 13 || keyCode == 32) {
     event.preventDefault ? event.preventDefault() : (event.returnValue = false);
   }
  };
  </code></pre>
  
  <p>This makes the radio group appear (visually) to be disabled and prevents mouse clicks on the radio buttons but does not prevent tabbing onto a radio button and hitting space or enter to toggle it.  </p>
  
  <p>Why is the suppressKeyboard function not preventing the keyboard inputs?</p>