Skip to content

Commit

Permalink
chore(form): Updated MenuItemRadio usage to be wrapped in a group for…
Browse files Browse the repository at this point in the history
… a11y
  • Loading branch information
mlaursen committed Apr 22, 2021
1 parent 5cf4f8a commit 01caa0b
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
64 changes: 32 additions & 32 deletions packages/form/src/menu/__tests__/MenuItemInputToggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
40 changes: 20 additions & 20 deletions packages/form/src/menu/__tests__/MenuItemRadio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 01caa0b

Please sign in to comment.