docs: improve accessibility with descriptive link and main landmark

- Replaced <a><button></button></a> with a proper <a> containing text and
  aria-label to ensure links have discernible text.

- Added main tag in home page to provide
  a consistent main landmark, improving accessibility for screen readers
  and satisfying WCAG and Lighthouse requirements.

Fixes #65181.

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

@@ -1,22 +1,28 @@
 @if (!hasAccepted()) {
-<div class="docs-cookies-popup docs-invert-mode">
-  <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>
+  <div class="docs-cookies-popup docs-invert-mode">
+    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>
 
-  <div>
-    <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">
-      <button type="button" class="docs-primary-btn" [attr.text]="'Learn more'" aria-label="Learn More">
+    <div>
+      <a
+        href="https://policies.google.com/technologies/cookies"
+        target="_blank"
+        rel="noopener"
+        class="docs-primary-btn"
+        aria-label="Learn more about how Google uses cookies"
+        text="Learn more"
+      >
         Learn more
+      </a>
+
+      <button
+        type="button"
+        (click)="accept()"
+        class="docs-primary-btn"
+        text="Ok, Got it"
+        aria-label="Ok, Got it"
+      >
+        Ok, Got it
       </button>
-    </a>
-    <button
-      type="button"
-      (click)="accept()"
-      class="docs-primary-btn"
-      [attr.text]="'Ok, Got it'"
-      aria-label="Ok, Got it"
-    >
-      Ok, Got it
-    </button>
+    </div>
   </div>
-</div>
 }