[Site][Accessibility] Proper headings defined on every page across do…

…cs and PWABuilder.com (#4478)

fixes #4232
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

Bugfix
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
View problem in issue.

## Describe the new behavior?
Each page has an H1 and proper headings underneath. Certain text that
acted as headers but weren't technically headers are now headers in the
HTML.

## PR Checklist
- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.


## Additional Information
This is a joint PR of the work from both myself and @zateutsch

---------

Co-authored-by: Zach Teutsch <[email protected]>
Co-authored-by: Beth Pan <[email protected]>

apps/pwabuilder/src/script/pages/app-report.ts

@@ -176,7 +176,7 @@ export class AppReport extends LitElement {
     "file_handlers": "Be a default handler for certain filetypes with file_handlers",
     "handle_links": "Open links as an app with handle_links",
     "protocol_handlers": "Create a custom protocol_handler",
-    "edge_side_panel": "Increase reach by partcipating in the edge_side_panel",
+    "edge_side_panel": "Increase reach by participating in the edge_side_panel",
     "widgets": "Increase reach with widgets"
   }
 
@@ -499,6 +499,10 @@ export class AppReport extends LitElement {
           margin: 0;
         }
 
+        .visually-hidden {
+          font-size: 0;
+        }
+
         #site-url {
           text-overflow: ellipsis;
           overflow: hidden;
@@ -2887,7 +2891,10 @@ export class AppReport extends LitElement {
                     ${this.proxyLoadingImage || this.appCard.iconURL.length === 0 ? html`<span class="proxy-loader"></span>` : html`<img src=${this.appCard.iconURL} alt=${this.appCard.iconAlt} />`}
                   </div>
                   <div id="card-info" class="flex-row">
-                    <h1 id="site-name">${this.appCard.siteName}</h1>
+                    <h1 id="site-name">
+                      ${this.appCard.siteName}
+                      <span class="visually-hidden" aria-live="polite">Report card page for ${this.appCard.siteName}</span>
+                    </h1>
                     <p id="site-url">${this.appCard.siteUrl}</p>
                     <p id="app-card-desc" class="app-card-desc-desktop">${this.truncateString(this.appCard.description)}</p>
                   </div>

apps/pwabuilder/src/script/pages/qualification/app-token.style.ts

@@ -430,9 +430,10 @@ export default css`
 	font-size: 14px;
 }
 
-#words p:nth-child(1) {
+#words h1 {
 	font-size: 24px;
 	font-weight: 700;
+	margin: 0;
 }
 #words p:nth-child(2) {
 	width: 55%;

apps/pwabuilder/src/script/pages/qualification/app-token.template.ts

@@ -183,7 +183,7 @@ export function renderAppCard(
             />
           </div>
           <div id="words">
-            <p>${appCard.siteName}</p>
+            <h1>${appCard.siteName}</h1>
             <p>${appCard.siteUrl}</p>
             <p class="app-desc">${appCard.description}</p>
           </div>
@@ -315,7 +315,7 @@ export function renderAppCard(
           />
         </div>
         <div id="words">
-          <p>${appCard.siteName}</p>
+          <h1>${appCard.siteName}</h1>
           <p>${appCard.siteUrl}</p>
           <p class="app-desc">${appCard.description}</p>
         </div>

docs/src/sidebarGeneration.ts

@@ -64,7 +64,7 @@ function constructMenuItemLineString(article: Article): string {
 }
 
 function constructHeaderLineString(childMenu: ChildMenu): string {
-  return `\n\n\- **${childMenu.header}**`;
+  return `\n\n- <h2>${childMenu.header}</h2> \n`;
 }
 
 function constructTopLevelNavString(activeHeader: string): string {