@@ -11,14 +11,12 @@ import {NavigationItem} from '@angular/docs';
 import {Meta, Title} from '@angular/platform-browser';
 import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
 
-export const ROUTE_TITLE_PROPERTY = 'label';
-export const ROUTE_PARENT_PROPERTY = 'parent';
 export const TITLE_SUFFIX = 'Angular';
-export const TITLE_SEPARATOR = ' • ';
+const TITLE_SEPARATOR = ' • ';
 export const DEFAULT_PAGE_TITLE = 'Overview';
 
-export const TITLE_OG_META_TAG = 'og:title';
-export const TITLE_TWITTER_META_TAG = 'twitter:title';
+const TITLE_OG_META_TAG = 'og:title';
+const TITLE_TWITTER_META_TAG = 'twitter:title';
 
 export const ALL_TITLE_META_TAGS = [TITLE_OG_META_TAG, TITLE_TWITTER_META_TAG];
 
 
@@ -11,14 +11,12 @@ import {NavigationItem} from '@angular/docs';
 import {Meta, Title} from '@angular/platform-browser';
 import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
 
-export const ROUTE_TITLE_PROPERTY = 'label';
-export const ROUTE_PARENT_PROPERTY = 'parent';
 export const TITLE_SUFFIX = 'Angular 日本語版';
-export const TITLE_SEPARATOR = ' • ';
+const TITLE_SEPARATOR = ' • ';
 export const DEFAULT_PAGE_TITLE = 'Overview';
 
-export const TITLE_OG_META_TAG = 'og:title';
-export const TITLE_TWITTER_META_TAG = 'twitter:title';
+const TITLE_OG_META_TAG = 'og:title';
+const TITLE_TWITTER_META_TAG = 'twitter:title';
 
 export const ALL_TITLE_META_TAGS = [TITLE_OG_META_TAG, TITLE_TWITTER_META_TAG];
 
 
@@ -57,8 +57,7 @@ <h3 class="terminal-title font-mono">Hydration Engine Log</h3>
                 <span class="log-tag">event:</span>
                 <span class="log-msg">{{ evt }}</span>
               </div>
-            }
-            @if (eventQueue().length === 0) {
+            } @empty {
               <div class="log-placeholder">Awaiting app bootstrap...</div>
             }
           </div>
 
@@ -57,8 +57,7 @@ <h3 class="terminal-title font-mono">ハイドレーションエンジンログ<
                 <span class="log-tag">event:</span>
                 <span class="log-msg">{{ evt }}</span>
               </div>
-            }
-            @if (eventQueue().length === 0) {
+            } @empty {
               <div class="log-placeholder">アプリのブートストラップを待機中...</div>
             }
           </div>
 
@@ -9,7 +9,7 @@ <h1 tabindex="-1">Angular v22 is here!</h1>
         </a>
 
         <div class="search-field">
-          <docs-text-field placeholder="search" (click)="openSearch()" />
+          <docs-text-field placeholder="Search" (click)="openSearch()" />
         </div>
       </div>
 
 
@@ -9,7 +9,7 @@ <h1 tabindex="-1">Angular v22がリリースされました！</h1>
         </a>
 
         <div class="search-field">
-          <docs-text-field placeholder="search" (click)="openSearch()" />
+          <docs-text-field placeholder="Search" (click)="openSearch()" />
         </div>
       </div>
 
 
@@ -2780,6 +2780,14 @@ export const RECOMMENDATIONS: Step[] = [
     possibleIn: 2100,
     step: '21.0.0_ng_update',
   },
+  {
+    possibleIn: 2100,
+    necessaryAsOf: 2100,
+    level: ApplicationComplexity.Advanced,
+    step: '21.0.0-safe-resource-url-audio-src',
+    action:
+      'If you use `SafeResourceUrl` values with `audio[src]` bindings, be aware that `audio[src]` is no longer sanitized in Angular v21. Existing uses of `bypassSecurityTrustResourceUrl` may therefore produce the `SafeValue must use [property]=binding` message. Remove the unnecessary sanitization and bind the URL directly instead.',
+  },
 
   {
     possibleIn: 2100,
 
@@ -2780,6 +2780,14 @@ export const RECOMMENDATIONS: Step[] = [
     possibleIn: 2100,
     step: '21.0.0_ng_update',
   },
+  {
+    possibleIn: 2100,
+    necessaryAsOf: 2100,
+    level: ApplicationComplexity.Advanced,
+    step: '21.0.0-safe-resource-url-audio-src',
+    action:
+      '`SafeResourceUrl` の値を `audio[src]` バインディングで使用している場合、Angular v21 では `audio[src]` がサニタイズされなくなる点に注意してください。そのため、既存の `bypassSecurityTrustResourceUrl` の使用が `SafeValue must use [property]=binding` というメッセージを出力することがあります。不要なサニタイズを削除し、URLを直接バインドしてください。',
+  },
 
   {
     possibleIn: 2100,
 
@@ -147,8 +147,12 @@ <h2>{{ title() }}</h2>
       <h3>Before you update</h3>
       @for (r of beforeRecommendations; track $index) {
         <div class="adev-recommendation-item">
-          <mat-checkbox />
-          <div class="adev-recommendation-content">
+          <mat-checkbox #checkbox [aria-labelledby]="'adev-before-recommendation-' + $index" />
+          <div
+            class="adev-recommendation-content"
+            [id]="'adev-before-recommendation-' + $index"
+            (click)="toggleRecommendation($event, checkbox)"
+          >
             <div [innerHTML]="r.renderedStep"></div>
             <span class="adev-complexity-badge" [class]="'adev-complexity-' + r.level">
               {{ getComplexityLevelName(r.level) }}
@@ -171,8 +175,12 @@ <h3>Update to the new version</h3>
 
       @for (r of duringRecommendations; track $index) {
         <div class="adev-recommendation-item">
-          <mat-checkbox />
-          <div class="adev-recommendation-content">
+          <mat-checkbox #checkbox [aria-labelledby]="'adev-during-recommendation-' + $index" />
+          <div
+            class="adev-recommendation-content"
+            [id]="'adev-during-recommendation-' + $index"
+            (click)="toggleRecommendation($event, checkbox)"
+          >
             <div [innerHTML]="r.renderedStep"></div>
             <span class="adev-complexity-badge" [class]="'adev-complexity-' + r.level">
               {{ getComplexityLevelName(r.level) }}
@@ -189,8 +197,12 @@ <h3>Update to the new version</h3>
       <h3>After you update</h3>
       @for (r of afterRecommendations; track $index) {
         <div class="adev-recommendation-item">
-          <mat-checkbox />
-          <div class="adev-recommendation-content">
+          <mat-checkbox #checkbox [aria-labelledby]="'adev-after-recommendation-' + $index" />
+          <div
+            class="adev-recommendation-content"
+            [id]="'adev-after-recommendation-' + $index"
+            (click)="toggleRecommendation($event, checkbox)"
+          >
             <div [innerHTML]="r.renderedStep"></div>
             <span class="adev-complexity-badge" [class]="'adev-complexity-' + r.level">
               {{ getComplexityLevelName(r.level) }}
 
@@ -154,6 +154,18 @@ export default class UpdateComponent {
     }
   }
 
+  protected toggleRecommendation(event: MouseEvent, checkbox: MatCheckbox): void {
+    const target = event.target as Element | null;
+
+    // Keep links in the recommendation independently operable.
+    if (target?.closest('a')) {
+      return;
+    }
+
+    checkbox.toggle();
+    checkbox.focus();
+  }
+
   async showUpdatePath() {
     this.beforeRecommendations = [];
     this.duringRecommendations = [];