feat(cdk-experimental/radio): add radio demo to dev-app

[wagnermaciel]

No description provided.

[github-actions]

Deployed dev-app for e159090 to: https://ng-dev-previews-comp--pr-angular-components-31180-dev-7ftid85f.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

[ok7sai]

I noticed that if an option is disabled and selected programmatically, you can still toggle other options with aria-checked. It can just be a bad usage if done by developers, or should we

1. Only have the disabled option checked, and other options always have aria-checked="false".
2. Force the disabled option to be not selectable (always has aria-checked="false").

[wagnermaciel]

I noticed that if an option is disabled and selected programmatically, you can still toggle other options with aria-checked. It can just be a bad usage if done by developers, or should we

1. Only have the disabled option checked, and other options always have aria-checked="false".
2. Force the disabled option to be not selectable (always has aria-checked="false").

I think option 1 makes the most sense. I'm wondering if the radio group should automatically set aria-readonly="true" when the selected item is disabled. What are your thoughts?

[ok7sai]

I noticed that if an option is disabled and selected programmatically, you can still toggle other options with aria-checked. It can just be a bad usage if done by developers, or should we

1. Only have the disabled option checked, and other options always have aria-checked="false".
2. Force the disabled option to be not selectable (always has aria-checked="false").

I think option 1 makes the most sense. I'm wondering if the radio group should automatically set aria-readonly="true" when the selected item is disabled. What are your thoughts?

Making the group aria-readonly="true" makes sense to me. The only concern is if the "disabled and selected" option is skipped in the navigation, then there's no easy way to know which one is selected in this group.

Tested by setting readonly, skip disabled, selected a flavor that is also disabled. Navigating through the radio buttons and it skips the only one that is announced as "selected".

However this can just be a really bad setup that the developers should aware of that.

[wagnermaciel]

I noticed that if an option is disabled and selected programmatically, you can still toggle other options with aria-checked. It can just be a bad usage if done by developers, or should we

1. Only have the disabled option checked, and other options always have aria-checked="false".
2. Force the disabled option to be not selectable (always has aria-checked="false").

I think option 1 makes the most sense. I'm wondering if the radio group should automatically set aria-readonly="true" when the selected item is disabled. What are your thoughts?

Making the group aria-readonly="true" makes sense to me. The only concern is if the "disabled and selected" option is skipped in the navigation, then there's no easy way to know which one is selected in this group.

Tested by setting readonly, skip disabled, selected a flavor that is also disabled. Navigating through the radio buttons and it skips the only one that is announced as "selected".

However this can just be a really bad setup that the developers should aware of that.

Yeah, that's true. I think setting readonly would be the best way to move forward and I can add some basic validation to warn developers about this particular edge case.

[ok7sai]

Validation!