fix: Fix tabbing between multiple RadioGroups (#703)

Closes #702
ariakit · Aug 13, 2020 · 212adbd · 212adbd
1 parent eec7a44
commit 212adbd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/packages/reakit/src/Radio/Radio.ts b/packages/reakit/src/Radio/Radio.ts
@@ -147,6 +147,7 @@ export const useRadio = createHook<RadioOptions, RadioHTMLProps>({
       role: !isNativeRadio ? "radio" : undefined,
       type: isNativeRadio ? "radio" : undefined,
       value: isNativeRadio ? options.value : undefined,
+      name: isNativeRadio ? options.baseId : undefined,
       "aria-checked": checked,
       checked,
       onChange,

diff --git a/packages/reakit/src/Radio/__tests__/index-test.tsx b/packages/reakit/src/Radio/__tests__/index-test.tsx
@@ -167,6 +167,7 @@ test("group", () => {
           <input
             aria-checked="false"
             id="base-1"
+            name="base"
             tabindex="0"
             type="radio"
             value="a"
@@ -177,6 +178,7 @@ test("group", () => {
           <input
             aria-checked="false"
             id="base-2"
+            name="base"
             tabindex="-1"
             type="radio"
             value="b"
@@ -187,6 +189,7 @@ test("group", () => {
           <input
             aria-checked="false"
             id="base-3"
+            name="base"
             tabindex="-1"
             type="radio"
             value="c"