docs(docs-infra): improve update checkbox accessibility

Associate each recommendation with its checkbox so assistive technology has a descriptive label and non-interactive text toggles the control. Keep embedded links independently operable.

adev/src/app/features/update/update.component.html

@@ -147,8 +147,12 @@
       <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 @@
 
       @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>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) }}

adev/src/app/features/update/update.component.scss

@@ -137,6 +137,7 @@ h4 {
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
+    cursor: pointer;
   }
 
   .adev-complexity-badge {

adev/src/app/features/update/update.component.ts

@@ -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 = [];