Set aria-checked on DropdownMenu.RadioItem

[jonyo]

Is your feature request related to a problem? Please describe. When using this:

<DropdownMenu.RadioGroup>
  <DropdownMenu.RadioItem>Item A</DropdownMenu.RadioItem>
  <DropdownMenu.RadioItem>Item B</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>

(surrounding and extra parts omitted for brevity)

I would expect, when one of the items is "checked", it should set aria-checked to true. Without it, there is not an indication to screen readers etc. which one is currently already selected.

Describe the solution you'd like For it to set aria-checked when the item is checked.

Describe alternatives you've considered Work-around: for now I was able to add aria-checked={...} with a check of whether that item was checked or not. But I would expect this functionality to be built in.

This may be applicable to other radio/checkbox items in the library as well.

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked

[fabien-ml]

Hi, thanks for reporting the issue.

However this is already the case, both DropdownMenu.RadioItem and DropdownMenu.CheckboxItem have the aria-checked attribute (you can see it by inspecting the DOM of the DropdownMenu example in the documentation https://kobalte.dev/docs/core/components/dropdown-menu).

[jonyo]

Hi @fabien-ml , thanks! I didn't see area-checked mentioned in the docs, and at the time didn't see it in our generated dom. Since it wasn't mentioned in the docs, I made a simple mistake, I neglected to try just updating to the latest version 😰

Running the latest version, it works! At least, once we also set the value on the <DropdownMenu.RadioGroup>.

And thanks for responding so quickly!

For posterity, anyone seeing a similar problem and runs across this page:

• Be sure you are on latest version of the Kobalte library
• Be sure you are setting the value on the <DropdownMenu.RadioGroup> and it matches the values on your <DropdownMenu.RadioItem>.