docs(docs-infra): add missing type="button" for accessibility and to remove dev tools warning (#63784)

PR Close #63784

adev/shared-docs/components/cookie-popup/cookie-popup.component.html

@@ -4,7 +4,7 @@
 
   <div>
     <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">
-      <button class="docs-primary-btn" [attr.text]="'Learn more'" aria-label="Learn More">
+      <button type="button" class="docs-primary-btn" [attr.text]="'Learn more'" aria-label="Learn More">
         Learn more
       </button>
     </a>

adev/src/app/app.component.html

@@ -1,4 +1,4 @@
-<button (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
+<button type="button" (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
 
 @defer (when isBrowser) {
   <adev-progress-bar />

adev/src/app/editor/code-editor/code-editor.component.html

@@ -30,6 +30,7 @@
 
             @if (tab.isActive && canRenameFile(file.filename)) {
               <button
+                type="button"
                 class="docs-rename-file"
                 aria-label="rename file"
                 matTooltip="Rename file"
@@ -41,6 +42,7 @@
             }
             @if (tab.isActive && canDeleteFile(file.filename)) {
               <button
+                type="button"
                 class="docs-delete-file"
                 aria-label="Delete file"
                 matTooltip="Delete file"
@@ -71,6 +73,7 @@
 
     @if (canCreateFile()) {
       <button
+        type="button"
         class="adev-add-file"
         (click)="onAddButtonClick()"
         aria-label="Add a new file"
@@ -95,7 +98,11 @@
     <div class="adev-editor-dropdown" cdkMenu>
       <button cdkMenuItem (click)="openCurrentSolutionInFirebaseStudio()">
         <span>Open in Firebase Studio </span>
-        <img class="icon" src="assets/images/tutorials/common/firebase-studio_logo.svg" height="32" />
+        <img
+          class="icon"
+          src="assets/images/tutorials/common/firebase-studio_logo.svg"
+          height="32"
+        />
       </button>
       <button cdkMenuItem (click)="openCurrentCodeInStackBlitz()">Open in StackBlitz</button>
     </div>

adev/src/app/features/home/components/home-animation/home-animation.component.html

@@ -13,7 +13,12 @@
     </div>
     <div class="learn-angular">
       <a [routerLink]="ctaLink" class="adev-cta">
-        <button class="docs-primary-btn" [attr.text]="'Learn Angular'" aria-label="Learn Angular">
+        <button
+          type="button"
+          class="docs-primary-btn"
+          [attr.text]="'Learn Angular'"
+          aria-label="Learn Angular"
+        >
           Learn Angular
         </button>
       </a>

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

@@ -4,7 +4,7 @@
   </header>
   <div class="adev-template-select">
     <label for="playgroundTemplate">Select a template</label>
-    <button [cdkMenuTriggerFor]="templatesMenu">
+    <button type="button" [cdkMenuTriggerFor]="templatesMenu">
       <span>{{ selectedTemplate.label }}</span>
       <docs-icon>expand_more</docs-icon>
     </button>

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

@@ -7,15 +7,18 @@
 
       <!-- Tutorial Content -->
       @if (documentContent(); as documentContent) {
-        <main docsViewer
+        <main
+          docsViewer
           [docContent]="documentContent"
-          class="docs-viewer docs-viewer-scroll-margin-large"></main>
+          class="docs-viewer docs-viewer-scroll-margin-large"
+        ></main>
       }
     </div>
   }
 
   <!-- Split View Resizer -->
   <button
+    type="button"
     role="separator"
     #resizer
     class="adev-tutorial-resizer"
@@ -39,7 +42,7 @@
   <div class="adev-tutorial-nav-container">
     <div class="adev-tutorial-nav" [class.adev-nav-open]="showNavigationDropdown()">
       <!-- Toggle Nav Button -->
-      <button class="adev-unfold-button" (click)="toggleNavigationDropdown($event)">
+      <button type="button" class="adev-unfold-button" (click)="toggleNavigationDropdown($event)">
         <docs-icon>unfold_more</docs-icon>
         <div class="adev-current-tutorial">
           <span>{{ tutorialName() }}</span>
@@ -50,6 +53,7 @@
       <!-- Reveal Answer Button -->
       @if (shouldRenderRevealAnswer()) {
         <button
+          type="button"
           #revealAnswerButton
           (click)="answerRevealed() ? handleResetAnswer() : handleRevealAnswer()"
           [disabled]="!canRevealAnswer()"
@@ -65,7 +69,7 @@
       <!-- Download code -->
       @if (localTutorialZipUrl()) {
         <a [download]="stepName() + '.zip'" [href]="localTutorialZipUrl()">
-          <button class="adev-download-button docs-primary-btn">
+          <button type="button" class="adev-download-button docs-primary-btn">
             <docs-icon>download</docs-icon>
           </button>
         </a>
@@ -74,26 +78,26 @@
       <div class="adev-nav-arrows">
         @if (previousStepPath) {
           <a [routerLink]="previousStepPath">
-            <button class="docs-primary-btn">
+            <button type="button" class="docs-primary-btn">
               <docs-icon>chevron_left</docs-icon>
             </button>
           </a>
         }
         @if (!previousStepPath) {
-          <button class="docs-primary-btn" disabled>
+          <button type="button" class="docs-primary-btn" disabled>
             <docs-icon>chevron_left</docs-icon>
           </button>
         }
 
         @if (nextStepPath) {
           <a [routerLink]="nextStepPath">
-            <button class="docs-primary-btn">
+            <button type="button" class="docs-primary-btn">
               <docs-icon>chevron_right</docs-icon>
             </button>
           </a>
         }
         @if (!nextStepPath) {
-          <button class="docs-primary-btn" disabled>
+          <button type="button" class="docs-primary-btn" disabled>
             <docs-icon>chevron_right</docs-icon>
           </button>
         }
@@ -103,6 +107,7 @@
       <div class="adev-reveal-mobile-button-container">
         @if (shouldRenderRevealAnswer()) {
           <button
+            type="button"
             #revealAnswerButton
             (click)="answerRevealed() ? handleResetAnswer() : handleRevealAnswer()"
             [disabled]="!canRevealAnswer()"

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

@@ -10,7 +10,7 @@
         <span class="adev-template-select">
           From v.
 
-          <button [cdkMenuTriggerFor]="templatesMenuFrom">
+          <button type="button" [cdkMenuTriggerFor]="templatesMenuFrom">
             <span>{{ from.name }}</span>
             <docs-icon>expand_more</docs-icon>
           </button>
@@ -31,7 +31,7 @@
         <span>
           <span class="adev-template-select">
             To v.
-            <button [cdkMenuTriggerFor]="templatesMenuTo">
+            <button type="button" [cdkMenuTriggerFor]="templatesMenuTo">
               <span>{{ to.name }}</span>
               <docs-icon>expand_more</docs-icon>
             </button>

adev/src/content/examples/animations/src/app/querying.component.ts

@@ -16,7 +16,7 @@ import {HEROES} from './mock-heroes';
   selector: 'app-querying',
   template: `
     <nav>
-      <button class="toggle" (click)="show = !show" [disabled]="toggleDisabled">Toggle View</button>
+      <button type="button" class="toggle" (click)="show = !show" [disabled]="toggleDisabled">Toggle View</button>
     </nav>
     @if (show) {
       <section @query (@query.start)="toggleDisabled = true" (@query.done)="toggleDisabled = false">

adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html

@@ -1,5 +1,5 @@
 <p>
-  <button (click)="changePosition()">Change element position</button>
+  <button type="button" (click)="changePosition()">Change element position</button>
 </p>
 
 <div class="example-box" cdkDrag [cdkDragFreeDragPosition]="dragPosition">

adev/src/content/examples/drag-drop/src/root-element/app/app.component.html

@@ -1,4 +1,4 @@
-<button (click)="openDialog()">Open a draggable dialog</button>
+<button type="button" (click)="openDialog()">Open a draggable dialog</button>
 
 <ng-template>
   <div class="example-dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">

adev/src/content/tutorials/playground/3-minigame/src/game.html

@@ -130,14 +130,20 @@
         accuracy: {{ totalAccuracyPercentage() > 0 ? (totalAccuracyPercentage() | number : '1.1-1')
         + '%' : '??' }}
       </h4>
-      <button id="guess" class="gradient-button" (click)="guess()" [disabled]="isGuessModalOpen()">
+      <button
+        type="button"
+        id="guess"
+        class="gradient-button"
+        (click)="guess()"
+        [disabled]="isGuessModalOpen()"
+      >
         <span></span><span>guess</span>
       </button>
     </div>
   </div>
   @if(isGuessModalOpen()) {
   <dialog id="result" cdkTrapFocus>
-    <button id="close" (click)="close()">X</button>
+    <button type="button" id="close" (click)="close()">X</button>
     <div class="result-stats">
       <h2>goal: {{ goal() }}º</h2>
       <h2>actual: {{ rotateVal() | number : '1.1-1' }}º</h2>
@@ -202,7 +208,9 @@
     </svg>
     <div>"{{ resultQuote() }}"</div>
     <div class="result-buttons">
-      <button (click)="close()" class="gradient-button"><span></span><span>again?</span></button>
+      <button type="button" (click)="close()" class="gradient-button">
+        <span></span><span>again?</span>
+      </button>
       <a
         target="_blank"
         class="gradient-button"
@@ -216,6 +224,7 @@
     @if(isAccessiblePanelOpen()) {
     <div>
       <button
+        type="button"
         [disabled]="isGuessModalOpen()"
         (click)="adjustAngle(-25)"
         aria-label="decrease angle a lot"
@@ -230,6 +239,7 @@
         -
       </button>
       <button
+        type="button"
         [disabled]="isGuessModalOpen()"
         (click)="adjustAngle(5)"
         aria-label="increase angle a little"
@@ -237,6 +247,7 @@
         +
       </button>
       <button
+        type="button"
         [disabled]="isGuessModalOpen()"
         (click)="adjustAngle(25)"
         aria-label="increase angle a lot"