chore(form): Updated MenuItemRadio usage to be wrapped in a group for a11y

Author: mlaursen

packages/documentation/src/components/Demos/Form/MenusWithFormControls.tsx

@@ -42,15 +42,20 @@ export default function MenusWithFormControls(): ReactElement | null {
           Italic
         </MenuItemCheckbox>,
         <MenuItemSeparator />,
-        ...decorations.map((dec) => (
-          <MenuItemRadio
-            id={`decoration-${dec}`}
-            checked={decoration === dec}
-            onCheckedChange={() => setDecoration(dec)}
-          >
-            {dec}
-          </MenuItemRadio>
-        )),
+        // see https://www.w3.org/TR/wai-aria-1.1/#menuitemradio why this is
+        // wrapped in a group
+        <div role="group" aria-label="Font Decoration">
+          {decorations.map((dec) => (
+            <MenuItemRadio
+              key={dec}
+              id={`decoration-${dec}`}
+              checked={decoration === dec}
+              onCheckedChange={() => setDecoration(dec)}
+            >
+              {dec}
+            </MenuItemRadio>
+          ))}
+        </div>,
         <MenuItemSwitch
           id="toggle-thing"
           checked={checked}

packages/form/src/menu/__tests__/MenuItemInputToggle.tsx

@@ -36,38 +36,38 @@ function Test({
         >
           Checkbox
         </MenuItemInputToggle>,
-        <MenuItemInputToggle
-          type="radio"
-          key="radio-1"
-          id="menu-id-2"
-          onClick={onClick}
-          checked={selectedIndex === 0}
-          onCheckedChange={() => {
-            setSelectedIndex(0);
-          }}
-          iconAfter={iconAfter}
-          addon={addon}
-          addonType={addonType}
-          addonPosition={addonPosition}
-        >
-          Radio 1
-        </MenuItemInputToggle>,
-        <MenuItemInputToggle
-          type="radio"
-          key="radio-2"
-          id="menu-id-3"
-          onClick={onClick}
-          checked={selectedIndex === 1}
-          onCheckedChange={() => {
-            setSelectedIndex(1);
-          }}
-          iconAfter={iconAfter}
-          addon={addon}
-          addonType={addonType}
-          addonPosition={addonPosition}
-        >
-          Radio 2
-        </MenuItemInputToggle>,
+        <div role="group" aria-label="Radio Group" key="radio">
+          <MenuItemInputToggle
+            type="radio"
+            id="menu-id-2"
+            onClick={onClick}
+            checked={selectedIndex === 0}
+            onCheckedChange={() => {
+              setSelectedIndex(0);
+            }}
+            iconAfter={iconAfter}
+            addon={addon}
+            addonType={addonType}
+            addonPosition={addonPosition}
+          >
+            Radio 1
+          </MenuItemInputToggle>
+          <MenuItemInputToggle
+            type="radio"
+            id="menu-id-3"
+            onClick={onClick}
+            checked={selectedIndex === 1}
+            onCheckedChange={() => {
+              setSelectedIndex(1);
+            }}
+            iconAfter={iconAfter}
+            addon={addon}
+            addonType={addonType}
+            addonPosition={addonPosition}
+          >
+            Radio 2
+          </MenuItemInputToggle>
+        </div>,
         <MenuItemInputToggle
           key="switch"
           type="switch"

packages/form/src/menu/__tests__/MenuItemRadio.tsx

@@ -13,26 +13,26 @@ describe("MenuItemRadio", () => {
         <DropdownMenu
           id="menu-id"
           items={[
-            <MenuItemRadio
-              key="item-1"
-              id="menu-id-1"
-              checked={selectedIndex === 0}
-              onCheckedChange={() => {
-                setSelectedIndex(0);
-              }}
-            >
-              Radio 1
-            </MenuItemRadio>,
-            <MenuItemRadio
-              key="item-2"
-              id="menu-id-2"
-              checked={selectedIndex === 1}
-              onCheckedChange={() => {
-                setSelectedIndex(1);
-              }}
-            >
-              Radio 2
-            </MenuItemRadio>,
+            <div role="group" aria-label="Radio Group" key="group">
+              <MenuItemRadio
+                id="menu-id-1"
+                checked={selectedIndex === 0}
+                onCheckedChange={() => {
+                  setSelectedIndex(0);
+                }}
+              >
+                Radio 1
+              </MenuItemRadio>
+              <MenuItemRadio
+                id="menu-id-2"
+                checked={selectedIndex === 1}
+                onCheckedChange={() => {
+                  setSelectedIndex(1);
+                }}
+              >
+                Radio 2
+              </MenuItemRadio>
+            </div>,
           ]}
         >
           Button