primitives icon indicating copy to clipboard operation
primitives copied to clipboard

Use fieldset html for RadioGroup instead of a div

Open maxkarkowski opened this issue 1 year ago • 0 comments

Question

We are working on accessibility for our components. One Issue is that every radio group should be wrapped in a fieldset (also a legend should be present for each radio group. Would it be better to change the radioGroup component to an fieldset element instead of a regular div?

<form>
    <RadioGroupRoot defaultValue="default" aria-label="View density"> // this will render as a div, use fieldset instead?
      <Flex css={{ alignItems: 'center' }}>
        <RadioGroupItem value="default" id="r1">
          <RadioGroupIndicator />
        </RadioGroupItem>
        <Label htmlFor="r1">Default</Label>
      </Flex>
      <Flex css={{ alignItems: 'center' }}>
        <RadioGroupItem value="comfortable" id="r2">
          <RadioGroupIndicator />
        </RadioGroupItem>
        <Label htmlFor="r2">Comfortable</Label>
      </Flex>
      <Flex css={{ alignItems: 'center' }}>
        <RadioGroupItem value="compact" id="r3">
          <RadioGroupIndicator />
        </RadioGroupItem>
        <Label htmlFor="r3">Compact</Label>
      </Flex>
    </RadioGroupRoot>
  </form>

maxkarkowski avatar Jul 31 '24 09:07 maxkarkowski