Fixing issue with tabbing when a radio is the last element of the modal

examples/basic/forms/index.js

@@ -45,21 +45,21 @@ class Forms extends Component {
                 <input type="text"  />
               </fieldset>
               <fieldset>
-                <legend>Radio buttons</legend>
+                <legend>Checkbox buttons</legend>
                 <label>
-                  <input id="radio-a" name="radios" type="radio" /> A
+                  <input id="checkbox-a" name="checkbox-a" type="checkbox" /> A
                 </label>
                 <label>
-                  <input id="radio-b" name="radios" type="radio" /> B
+                  <input id="checkbox-b" name="checkbox-b" type="checkbox" /> B
                 </label>
               </fieldset>
               <fieldset>
-                <legend>Checkbox buttons</legend>
+                <legend>Radio buttons</legend>
                 <label>
-                  <input id="checkbox-a" name="checkbox-a" type="checkbox" /> A
+                  <input id="radio-a" name="radios" type="radio" /> A
                 </label>
                 <label>
-                  <input id="checkbox-b" name="checkbox-b" type="checkbox" /> B
+                  <input id="radio-b" name="radios" type="radio" /> B
                 </label>
               </fieldset>
               <input type="text" />

specs/Modal.events.spec.js

@@ -128,6 +128,26 @@ export default () => {
     });
   });
 
+  it("traps tab in the modal on tab with radio button as last element", () => {
+    const topButton = <button>top</button>;
+    const radio1 = <input id="radio-a" name="radios" type="radio" />;
+    const radio2 = <input id="radio-b" name="radios" type="radio" />;
+    const modalContent = (
+      <div>
+        {topButton}
+        {radio1}
+        {radio2}
+      </div>
+    );
+    const props = { isOpen: true };
+    withModal(props, modalContent, modal => {
+      const content = mcontent(modal);
+      tabKeyDown(content);
+      tabKeyDown(content);
+      document.activeElement.textContent.should.be.eql("top");
+    });
+  });
+
   describe("shouldCloseOnEsc", () => {
     context("when true", () => {
       it("should close on Esc key event", () => {

src/helpers/scopeTab.js

@@ -6,6 +6,14 @@ function getActiveElement(el = document) {
     : el.activeElement;
 }
 
+function isActiveElementInTailRadioGroup(activeElement, tail) {
+  return (
+    activeElement.type === "radio" &&
+    tail.type === "radio" &&
+    tail.name === activeElement.name
+  );
+}
+
 export default function scopeTab(node, event) {
   const tabbable = findTabbable(node);
 
@@ -29,7 +37,11 @@ export default function scopeTab(node, event) {
     target = tail;
   }
 
-  if (tail === activeElement && !shiftKey) {
+  if (
+    (tail === activeElement ||
+       isActiveElementInTailRadioGroup(activeElement, tail)) &&
+     !shiftKey 
+  ) {
     target = head;
   }