title: How to skip a hidden radio option with keyboard navigation in Firefox and IE?
body: <p><strong><em>UPDATE</em></strong> The following problem occurs even after trying out the suggestions <a href="https://stackoverflow.com/questions/18078871/hide-check-radio-button-with-css">here</a>. The latest code snippet demonstrates all 3 approaches of hiding a Radio Button and breaking <kbd>&darr;</kbd> / <kbd>&uarr;</kbd> (Up/Down arrow keys) keyboard navigation in the radio group in Firefox &amp; IE.</p>
  
  <hr>
  
  <p>Suppose I have a Radio Group, each radio button with its label in a DIV. I use the arrow keys (up/down) to browse my radio buttons once at least one of them has focus.</p>
  
  <p>One of the radio buttons in my Radio Group is hidden. It's in a DIV which has <code>display:none;</code> (but I also tried <code>visibility:hidden</code> and <code>position:fixed;opacity:0</code> as possible alternatives).</p>
  
  <p>I noticed that in Chrome, I can still use the up/down arrows to traverse the focused list without problems, but in Firefox and IE my navigation breaks when the focus is supposed to shift to the radiobutton over the hidden one.</p>
  
  <p>To see this, do the following in this snippet:</p>
  
  <p>1) In Firefox or IE vs. Chrome, first select Radio Button #1 with the mouse (in each column, to see each approach)</p>
  
  <p>2) Now use the <kbd>&darr;</kbd> key to navigate to the end of the list: see that it breaks in Firefox and IE, but works in Chrome. The group is deselected and you lose focus in Firefox and IE.</p>
  
  <p>3) You can also try it from the end in reverse order, it'll break the same way.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;span style="font-weight:bold;"&gt;With display:none&lt;/span&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;span style="font-weight:bold;"&gt;With visibility:hidden&lt;/span&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;span style="font-weight:bold;"&gt;With position:fixed;opacity:0;&lt;/span&gt;
  &lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  
  &lt;div&gt;
     &lt;input id="opt1a" type="radio" name="group" value="option1"&gt;
     &lt;label for="opt1a"&gt;Option 1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt2a" type="radio" name="group" value="option2"&gt;
     &lt;label for="opt2a"&gt;Option 2&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt3a" type="radio" name="group" value="option3"&gt;
     &lt;label for="opt3a"&gt;Option 3&lt;/label&gt;
  &lt;/div&gt;
  &lt;div style="display:none;"&gt;
     &lt;input id="optSecret" type="radio" name="group" value="optionSecret"&gt;
     &lt;label for="optSecreta"&gt;Secret Option&lt;/label&gt;
      
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt5a" type="radio" name="group" value="option5"&gt;
     &lt;label for="opt5a"&gt;Option 5&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;div&gt;
     &lt;input id="opt1b" type="radio" name="group2" value="option1"&gt;
     &lt;label for="opt1b"&gt;Option 1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt2b" type="radio" name="group2" value="option2"&gt;
     &lt;label for="opt2b"&gt;Option 2&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt3b" type="radio" name="group2" value="option3"&gt;
     &lt;label for="opt3b"&gt;Option 3&lt;/label&gt;
  &lt;/div&gt;
  &lt;div style="visibility:hidden;"&gt;
     &lt;input id="optSecretb" type="radio" name="group2" value="optionSecret"&gt;
     &lt;label for="optSecretb"&gt;Secret Option&lt;/label&gt;
      
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt5b" type="radio" name="group2" value="option5"&gt;
     &lt;label for="opt5b"&gt;Option 5&lt;/label&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;div&gt;
     &lt;input id="opt1c" type="radio" name="group3" value="option1"&gt;
     &lt;label for="opt1c"&gt;Option 1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt2c" type="radio" name="group3" value="option2"&gt;
     &lt;label for="opt2c"&gt;Option 2&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt3c" type="radio" name="group3" value="option3"&gt;
     &lt;label for="opt3c"&gt;Option 3&lt;/label&gt;
  &lt;/div&gt;
  &lt;div style="position:fixed;opacity:0;"&gt;
     &lt;input id="optSecretc" type="radio" name="group3" value="optionSecret"&gt;
     &lt;label for="optSecretc"&gt;Secret Option&lt;/label&gt;
      
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="opt5c" type="radio" name="group3" value="option5"&gt;
     &lt;label for="opt5c"&gt;Option 5&lt;/label&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Status:</p>
  
  <ol>
  <li><code>display:none;</code> breaks the cycle over the hidden Radio Button, but collapses the space;</li>
  <li><code>visibility:hidden</code> breaks the cycle over the hidden Radio Button, but preserves the space;</li>
  <li><code>position:fixed;opacity:0</code> breaks the cycle <em>once</em> (temporary trap) but then resumes after pressing Arrow Up/Down to continue. But normal cycling is still broken.</li>
  </ol>