test(cdk-experimental/radio): use case examples

src/cdk-experimental/radio/radio.spec.ts

@@ -119,9 +119,9 @@ describe('CdkRadioGroup', () => {
         });
       });
 
-      it('should set aria-orientation to "horizontal"', () => {
+      it('should set aria-orientation to "vertical"', () => {
         setupDefaultRadioGroup();
-        expect(radioGroupElement.getAttribute('aria-orientation')).toBe('horizontal');
+        expect(radioGroupElement.getAttribute('aria-orientation')).toBe('vertical');
       });
 
       it('should set aria-disabled to false', () => {

src/cdk-experimental/radio/radio.ts

@@ -101,7 +101,7 @@ export class CdkRadioGroup<V> {
   protected items = computed(() => this._cdkRadioButtons().map(radio => radio.pattern));
 
   /** Whether the radio group is vertically or horizontally oriented. */
-  orientation = input<'vertical' | 'horizontal'>('horizontal');
+  orientation = input<'vertical' | 'horizontal'>('vertical');
 
   /** Whether disabled items in the group should be skipped when navigating. */
   skipDisabled = input(true, {transform: booleanAttribute});

src/components-examples/cdk-experimental/radio/cdk-radio-active-descendant/cdk-radio-active-descendant-example.html

@@ -0,0 +1,21 @@
+<div class="example-container">
+  <ul
+    cdkRadioGroup
+    navigationMode="activedescendant"
+    class="example-radio-group"
+    aria-labelledby="active-descendant-radio-label"
+  >
+    <label class="example-label" id="active-descendant-radio-label">Favorite Fruit (Active Descendant)</label>
+    @for (fruit of fruits; track fruit) {
+      <li
+        class="example-radio-button"
+        [value]="fruit"
+        cdkRadioButton
+        #radioButton="cdkRadioButton"
+      >
+        <span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
+        <span>{{ fruit }}</span>
+      </li>
+    }
+  </ul>
+</div>

src/components-examples/cdk-experimental/radio/cdk-radio-active-descendant/cdk-radio-active-descendant-example.ts

@@ -0,0 +1,50 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
+
+/** @title Active descendant radio group. */
+@Component({
+  selector: 'cdk-radio-active-descendant-example',
+  exportAs: 'cdkRadioActiveDescendantExample',
+  templateUrl: 'cdk-radio-active-descendant-example.html',
+  standalone: true,
+  styleUrl: '../radio-common.css',
+  imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
+})
+export class CdkRadioActiveDescendantExample {
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
+}

src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.html → src/components-examples/cdk-experimental/radio/cdk-radio-configurable/cdk-radio-configurable-example.html

@@ -3,21 +3,11 @@
   <mat-checkbox [formControl]="readonly">Readonly</mat-checkbox>
   <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
 
-  <mat-form-field subscriptSizing="dynamic" appearance="outline">
-    <mat-label>Selected Flavor</mat-label>
-    <mat-select [(value)]="selectedValue">
-      <mat-option [value]="null"><em>None</em></mat-option>
-      @for (flavor of flavors; track flavor) {
-        <mat-option [value]="flavor">{{flavor}}</mat-option>
-      }
-    </mat-select>
-  </mat-form-field>
-
   <mat-form-field subscriptSizing="dynamic" appearance="outline">
     <mat-label>Disabled Radio Options</mat-label>
     <mat-select [(value)]="disabledOptions" multiple>
-      @for (flavor of flavors; track flavor) {
-        <mat-option [value]="flavor">{{flavor}}</mat-option>
+      @for (fruit of fruits; track fruit) {
+        <mat-option [value]="fruit">{{fruit}}</mat-option>
       }
     </mat-select>
   </mat-form-field>
@@ -42,20 +32,19 @@
 <!-- #docregion radio-group -->
 <ul
   cdkRadioGroup
-  [(value)]="selectedValue"
   [disabled]="disabled.value"
   [readonly]="readonly.value"
   [skipDisabled]="skipDisabled.value"
   [orientation]="orientation"
   [focusMode]="focusMode"
   class="example-radio-group"
-  aria-label="Select your favorite ice cream flavor"
+  aria-label="Select your favorite fruit"
 >
-  @for (flavor of flavors; track flavor) {
-    @let optionDisabled = disabledOptions.includes(flavor);
-    <li cdkRadioButton [value]="flavor" [disabled]="optionDisabled" class="example-radio-button">
+  @for (fruit of fruits; track fruit) {
+    @let optionDisabled = disabledOptions.includes(fruit);
+    <li cdkRadioButton [value]="fruit" [disabled]="optionDisabled" class="example-radio-button">
       <span class="example-radio-indicator"></span>
-      <span>{{ flavor }}</span>
+      <span>{{ fruit }}</span>
     </li>
   }
 </ul>

src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.ts → src/components-examples/cdk-experimental/radio/cdk-radio-configurable/cdk-radio-configurable-example.ts

@@ -5,12 +5,12 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 
-/** @title Basic CDK Radio Group */
+/** @title Configurable CDK Radio Group */
 @Component({
-  selector: 'cdk-radio-example',
-  exportAs: 'cdkRadioExample',
-  templateUrl: 'cdk-radio-example.html',
-  styleUrl: 'cdk-radio-example.css',
+  selector: 'cdk-radio-configurable-example',
+  exportAs: 'cdkRadioConfigurableExample',
+  templateUrl: 'cdk-radio-configurable-example.html',
+  styleUrl: '../radio-common.css',
   standalone: true,
   imports: [
     CdkRadioGroup,
@@ -22,18 +22,51 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
     ReactiveFormsModule,
   ],
 })
-export class CdkRadioExample {
+export class CdkRadioConfigurableExample {
   orientation: 'vertical' | 'horizontal' = 'vertical';
   disabled = new FormControl(false, {nonNullable: true});
 
-  flavors = ['Vanilla', 'Chocolate', 'Strawberry', 'Mint Chip', 'Cookies & Cream', 'Rocky Road'];
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
 
   // New controls
   readonly = new FormControl(false, {nonNullable: true});
   skipDisabled = new FormControl(true, {nonNullable: true});
   focusMode: 'roving' | 'activedescendant' = 'roving';
-  selectedValue: string | null = 'Vanilla'; // To control/reflect the radio group's value
 
   // Control for which radio options are individually disabled
-  disabledOptions: string[] = ['Chocolate'];
+  disabledOptions: string[] = ['Banana'];
 }

src/components-examples/cdk-experimental/radio/cdk-radio-disabled-focusable/cdk-radio-disabled-focusable-example.html

@@ -0,0 +1,22 @@
+<div class="example-container">
+  <ul
+    cdkRadioGroup
+    [skipDisabled]="false"
+    class="example-radio-group"
+    aria-labelledby="disabled-focusable-radio-label"
+  >
+    <label class="example-label" id="disabled-focusable-radio-label">Favorite Fruit (Disabled are Focusable)</label>
+    @for (fruit of fruits; track fruit) {
+      <li
+        class="example-radio-button"
+        [value]="fruit"
+        [disabled]="disabledFruits.includes(fruit)"
+        cdkRadioButton
+        #radioButton="cdkRadioButton"
+      >
+        <span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
+        <span>{{ fruit }} {{ disabledFruits.includes(fruit) ? '(Disabled)' : '' }}</span>
+      </li>
+    }
+  </ul>
+</div>

src/components-examples/cdk-experimental/radio/cdk-radio-disabled-focusable/cdk-radio-disabled-focusable-example.ts

@@ -0,0 +1,51 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
+
+/** @title Radio group with disabled options that are focusable. */
+@Component({
+  selector: 'cdk-radio-disabled-focusable-example',
+  exportAs: 'cdkRadioDisabledFocusableExample',
+  templateUrl: 'cdk-radio-disabled-focusable-example.html',
+  styleUrl: '../radio-common.css',
+  standalone: true,
+  imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
+})
+export class CdkRadioDisabledFocusableExample {
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
+  disabledFruits = ['Banana', 'Kiwi'];
+}

src/components-examples/cdk-experimental/radio/cdk-radio-disabled-skipped/cdk-radio-disabled-skipped-example.html

@@ -0,0 +1,21 @@
+<div class="example-container">
+  <ul
+    cdkRadioGroup
+    class="example-radio-group"
+    aria-labelledby="disabled-skipped-radio-label"
+  >
+    <label class="example-label" id="disabled-skipped-radio-label">Select a Fruit (Disabled are Skipped)</label>
+    @for (fruit of fruits; track fruit) {
+      <li
+        class="example-radio-button"
+        [value]="fruit"
+        [disabled]="disabledFruits.includes(fruit)"
+        cdkRadioButton
+        #radioButton="cdkRadioButton"
+      >
+        <span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
+        <span>{{ fruit }} {{ disabledFruits.includes(fruit) ? '(Disabled)' : '' }}</span>
+      </li>
+    }
+  </ul>
+</div>

src/components-examples/cdk-experimental/radio/cdk-radio-disabled-skipped/cdk-radio-disabled-skipped-example.ts

@@ -0,0 +1,51 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
+
+/** @title Radio group with disabled options that are skipped. */
+@Component({
+  selector: 'cdk-radio-disabled-skipped-example',
+  exportAs: 'cdkRadioDisabledSkippedExample',
+  templateUrl: 'cdk-radio-disabled-skipped-example.html',
+  styleUrl: '../radio-common.css',
+  standalone: true,
+  imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
+})
+export class CdkRadioDisabledSkippedExample {
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
+  disabledFruits = ['Banana', 'Kiwi'];
+}

src/components-examples/cdk-experimental/radio/cdk-radio-disabled/cdk-radio-disabled-example.html

@@ -0,0 +1,20 @@
+<div class="example-container">
+  <ul
+    cdkRadioGroup
+    [disabled]="true"
+    class="example-radio-group"
+    aria-labelledby="disabled-radio-label"
+  >
+    <label class="example-label" id="disabled-radio-label">Favorite Fruit (Disabled)</label>
+    @for (fruit of fruits; track fruit) {
+      <li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
+        <span
+          class="example-radio-indicator"
+          [class.example-radio-checked]="radioButton.pattern.selected()"
+        ></span>
+        <span>{{ fruit }}</span>
+      </li>
+    }
+  </ul>
+  <p><i>The entire radio group is disabled. Focus should not enter the group.</i></p>
+</div>