Staging (#4785)

fixes 
- #4763
- #4748
- #4783
- #4747

<!-- 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?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->


## Describe the new behavior?


## PR Checklist

- [ ] Test: run `npm run test` and ensure that all tests pass
- [ ] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [ ] 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

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Beth Pan <[email protected]>
Co-authored-by: Gleb Khmyznikov <[email protected]>
Co-authored-by: Jaylyn Barbee <[email protected]>
Co-authored-by: Jaylyn Barbee <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Mara'ah Lee <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adolf Daniel <[email protected]>
Co-authored-by: Justin Willis (HE / HIM) <[email protected]>
Co-authored-by: Zach Teutsch <[email protected]>
Co-authored-by: vipul-bhojwani <[email protected]>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Federico Navarrete <[email protected]>
Co-authored-by: Toby Liu <[email protected]>
Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Jonas Thelemann <[email protected]>
Co-authored-by: Siraj Chokshi <[email protected]>
Co-authored-by: Thomas Peißl <[email protected]>
Co-authored-by: Migush <[email protected]>
Co-authored-by: Abdullhakim Sami Alshanqity <[email protected]>
Co-authored-by: mecmep <[email protected]>
Co-authored-by: Joel Limberg <[email protected]>
Co-authored-by: Pratik-k <[email protected]>
Co-authored-by: Maicon Carraro <[email protected]>

Author: 25 people

apps/pwabuilder/src/script/components/discord-box.ts

@@ -80,7 +80,7 @@ export class DiscordBox extends LitElement {
         <div id="discord-box">
           <img id="logo" src="/assets/images/discord_logo.svg" alt="discord logo"/>
           <p>Want to chat? Join us on <a @click=${() => recordPWABuilderProcessStep("discord_box_link_clicked", AnalyticsBehavior.ProcessCheckpoint)} href="https://aka.ms/pwabuilderdiscord" target="_blank" rel="noopener" aria-label="Click to join us on Discord">Discord</a></p>
-          <button id="close-wrapper" @click=${() => this.close()} aria-label="discord modal close" type="button"><img id="close" src="/assets/images/Close_desk.png" role="presentation"/></button>
+          <button id="close-wrapper" @click=${() => this.close()} aria-label="discord modal close" type="button"><sl-icon id="close" name="x-lg"></sl-icon></button>
         </div>`
         : null}
     `;

apps/pwabuilder/src/script/components/share-card.ts

@@ -54,7 +54,7 @@ export class ShareCard extends LitElement {
         top: 5px;
         right: 5px;
         z-index: 1000;
-        color: #C2C9D1;
+        color: #000000;
       }
       .dialog_header {
         height: 12px !important;

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

@@ -916,26 +916,28 @@ export class AppReport extends LitElement {
           width: 100%;
           box-shadow: 0px 4px 30px 0px #00000014;
           border-radius: var(--card-border-radius);
+          padding: 20px;
+          background-color: #ffffff;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
         }
 
-        #todo-detail::part(base) {
+        #todo-detail {
           border-radius: var(--card-border-radius);
           border: none;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
         }
 
-        #todo-detail::part(header) {
+        .details-summary {
           height: 60px;
-        }
-
-        #todo-detail::part(summary) {
           color: var(--primary-color);
           font-size: 20px;
           font-weight: bold;
-        }
-
-        #todo-detail::part(content){
-          padding-top: 0;
-          padding-bottom: 1em;
+          margin-bottom: 20px;
+          height: fit-content;
         }
 
         #todo-summary-left {
@@ -946,6 +948,7 @@ export class AppReport extends LitElement {
 
         #todo-summary-left > h2 {
           font-size: var(--subheader-font-size);
+          margin: 0;
         }
 
         #pagination-actions {
@@ -1901,7 +1904,6 @@ export class AppReport extends LitElement {
 
   // Expands the Action items details on load
   firstUpdated() {
-    this.rotateNinety("todo", undefined, true);
 
   }
 
@@ -2439,11 +2441,7 @@ export class AppReport extends LitElement {
     this.showConfirmationModal = false;
 
     details.forEach((detail: any) => {
-      if(detail.id != "todo-detail"){
-        detail.hide();
-      } else {
-        detail.show()
-      }
+      detail.hide();
     });
 
     // reset retest data
@@ -2800,26 +2798,29 @@ export class AppReport extends LitElement {
     })
 
     if(yellow + purple + red != 0){
+      
+      let redSelected = this.filterList.includes("required");
+      let yellowSelected = this.filterList.includes("recommended");
+      let purpleSelected = this.filterList.includes("enhancement");
+
+      let redClassMap = classMap({'indicator' : true, 'selected': redSelected});
+      let yellowClassMap = classMap({'indicator' : true, 'selected': yellowSelected});
+      let purpleClassMap = classMap({'indicator' : true, 'selected': purpleSelected});
+
       return html`
       <div id="indicators-holder">
         ${red != 0 ?
-          this.filterList.includes("required") ?
-            html`<button type="button" class="indicator selected" tabindex="0" @click=${(e: Event) => this.filterTodoItems("required", e)}><img src=${stop_white_src} alt="invalid result icon"/><p>${red}</p></button>` :
-            html`<button type="button" class="indicator" tabindex="0" @click=${(e: Event) => this.filterTodoItems("required", e)}><img src=${stop_src} alt="invalid result icon"/><p>${red}</p></button>`
+          html`<button type="button" class=${redClassMap} data-indicator="required" aria-pressed="${redSelected}" tabindex="0" @click=${(e: Event) => this.filterTodoItems("required", e)}><img src=${redSelected ? stop_white_src : stop_src} alt="invalid result icon"/><p>${red}</p></button>`
           : null
         }
         ${yellow != 0 ?
-          this.filterList.includes("recommended") || this.filterList.includes("optional") ?
-            html`<button type="button" class="indicator selected" tabindex="0" @click=${(e: Event) => this.filterTodoItems("yellow", e)}><img src=${yield_white_src} alt="yield result icon"/><p>${yellow}</p></button>` :
-            html`<button type="button" class="indicator" tabindex="0" @click=${(e: Event) => this.filterTodoItems("yellow", e)}><img src=${yield_src} alt="yield result icon"/><p>${yellow}</p></button>`
+          html`<button type="button" class=${yellowClassMap} data-indicator="yellow" aria-pressed="${yellowSelected}" tabindex="0" @click=${(e: Event) => this.filterTodoItems("yellow", e)}><img src=${yellowSelected ? yield_white_src : yield_src} alt="yield result icon"/><p>${yellow}</p></button>`
           : null
         }
         ${purple != 0 ?
-          this.filterList.includes("enhancement") ?
-          html`<button type="button" class="indicator selected" tabindex="0" @click=${(e: Event) => this.filterTodoItems("enhancement", e)}><img src=${enhancement_white_src} alt="enhancement result icon"/><p>${purple}</p></button>` :
-          html`<button type="button" class="indicator" tabindex="0" @click=${(e: Event) => this.filterTodoItems("enhancement", e)}><img src=${enhancement_src} alt="enhancement result icon"/><p>${purple}</p></button>`
-            : null
-          }
+          html`<button type="button" class=${purpleClassMap} data-indicator="enhancement" aria-pressed="${purpleSelected}" tabindex="0" @click=${(e: Event) => this.filterTodoItems("enhancement", e)}><img src=${purpleSelected ? enhancement_white_src : enhancement_src} alt="enhancement result icon"/><p>${purple}</p></button>`
+          : null
+        }
       </div>`
     }
     return null;
@@ -2830,11 +2831,13 @@ export class AppReport extends LitElement {
   filterTodoItems(filter: string, e: Event){
     e.stopPropagation();
 
+    /* let button = this.shadowRoot!.querySelector('[data-indicator="' + filter + '"]');
+    let isPressed = button!.getAttribute("aria-pressed") === "true";
+    button!.setAttribute("aria-pressed", isPressed ? "false" : "true"); */
+
     recordPWABuilderProcessStep(`${filter}_indicator_clicked`, AnalyticsBehavior.ProcessCheckpoint);
 
     this.pageNumber = 1;
-    /* let todoDetail: SlDetails = (this.shadowRoot!.getElementById('todo-detail')! as unknown as SlDetails);
-    todoDetail.show(); */
 
     this.stopShowingNotificationTooltip = true;
     // if its in the list, remove it, else add it
@@ -2913,7 +2916,7 @@ export class AppReport extends LitElement {
       dialogContent = html`
         <p>Retesting your site now!</p>
       `;
-    } 
+    }
     else if (this.readdDenied) {
       dialogContent = html`
         <p>Add your new ${this.thingToAdd}, and then we can retest your site. </p>
@@ -3044,8 +3047,8 @@ export class AppReport extends LitElement {
                   src=${`/assets/windows_icon${this.darkMode ? "_light" : ""}.svg`}
                   alt="Windows"
                 />
-                <img 
-                  title="iOS" 
+                <img
+                  title="iOS"
                   src=${`/assets/apple_icon${this.darkMode ? "_light" : ""}.svg`}
                   alt="iOS" />
                 <img
@@ -3095,11 +3098,8 @@ export class AppReport extends LitElement {
           }
 
           <div id="todo">
-            <sl-details
+            <div
               id="todo-detail"
-              @sl-show=${(e: Event) => this.rotateNinety("todo", e)}
-              @sl-hide=${(e: Event) => this.rotateZero("todo", e)}
-              open
               >
               <div class="details-summary" slot="summary">
                 <div id="todo-summary-left">
@@ -3123,8 +3123,6 @@ export class AppReport extends LitElement {
                       :
                       null}
                 </div>
-                  <img class="dropdown_icon" data-card="todo" src="/assets/new/dropdownIcon.svg" alt="dropdown toggler"/>
-
               </div>
               <div class="todo-items-holder">
                 ${this.filteredTodoItems.length > 0 ? this.paginate().map((todo: any) =>
@@ -3174,7 +3172,7 @@ export class AppReport extends LitElement {
                 </button>
               </div>` : null}
               <div id="pageStatus" aria-live="polite" aria-atomic="true"></div>
-            </sl-details>
+            </div>
           </div>
 
           <div id="manifest" class="flex-col">

docs/builder/android.md

@@ -29,15 +29,15 @@ The first step is to generate your Android package with PWABuilder:
 4. Click on `Generate Package` in the Android section.
 
 <div class="docs-image">
-    <img src="/assets/builder/android/store_package.jpg" width=550>
+    <img src="/assets/builder/android/store_package.jpg" alt="PWABuilder store package selection page showing options to generate packages for both Windows and Android" width=550>
 </div>
 
 5. Make sure you are on the `Google Play` tab and fill out the required options for your package.
 
 6. Click `Download Package`.
 
 <div class="docs-image">
-    <img src="/assets/builder/android/android-options.png" width=550>
+    <img src="/assets/builder/android/android-options.png" alt="Android packaging options page on PWABuilder.com" width=550>
 </div>
 
 ## Configuration Options

docs/starter/cli-usage.md

@@ -81,15 +81,3 @@ pwa build
 ```
 
 The build command outputs a transpiled and server-ready version of your application to the `dist` directory. You can use this command once you are ready to deploy your PWA to a production server.
-
-### Passing custom arguments to Vite
-
-Just like with the start command, you can pass arguments through the CLI to the Vite build process.
-
-Using the `--viteArgs` flag:
-
-```
-pwa start --viteArgs="Custom Args String"
-```
-
-To learn more about what you can do with Vite, check out [their documentation](https://vitejs.dev/config/)

docs/styles/global.css

@@ -110,6 +110,7 @@ sl-menu-item::part(base) {
     margin-right: 2px;
     border-radius: 20px;
     font-weight: 500;
+    border: 1px solid transparent;
 }
 
 sl-menu-item[checked]::part(base) {

docs/styles/vs-prism.css

@@ -127,7 +127,7 @@
 
  .token.class-name,
  .language-json .token.property {
-   color: #2B91AF;
+   color: #247b95;
  }
 
  .token.tag,
@@ -155,7 +155,7 @@
  }
 
  .line-numbers .line-numbers-rows > span:before {
-   color: #2B91AF;
+   color: #247b95;
  }
 
  /* overrides color-values for the Line Highlight plugin