fixes #4103 (#4391)

fixes #4103 
<!-- 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. -->
If there was not an icon with purpose set to any, we failed the test.
HOWEVER, purpose === any is not required if the user is not using
maskable.

## Describe the new behavior?
Modified the test to check for the presence of a maskable icon if the
user is not using purpose any.

## 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

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Gleb Khmyznikov <gleb.khmyznikov@gmail.com>
Co-authored-by: Jaylyn Barbee <jaylyn.1b@gmail.com>
Co-authored-by: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com>
Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>
Co-authored-by: Mara'ah Lee <maraahlee@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adolf Daniel <10156724+adolfdaniel@users.noreply.github.com>
Co-authored-by: Justin Willis (HE / HIM) <juwillis@microsoft.com>
Co-authored-by: Zach Teutsch <88554871+zateutsch@users.noreply.github.com>
Co-authored-by: Beth Pan <xupa@microsoft.com>
Co-authored-by: vipul-bhojwani <67650372+vipul-bhojwani@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <amrutha.srinivasan95@gmail.com>
Co-authored-by: Federico Navarrete <darklord.navarrete@gmail.com>
Co-authored-by: Toby Liu <ybot1122@gmail.com>
Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>
Co-authored-by: Jonas Thelemann <e-mail@jonas-thelemann.de>
Co-authored-by: Siraj Chokshi <19193347+SirajChokshi@users.noreply.github.com>

apps/blog/src/posts/announcing-cli/announcing-cli.md

@@ -36,8 +36,10 @@ From there, it’s just one command to create your first app:
 pwa create my-first-pwa
 ```
 
+
 <img src="pwa-create.png.png" alt="PWABuilder CLI create command output after executing."></img>
 
+
 And then one more command to start running and developing your app, with live-reload for changes!
 
 ```
@@ -46,7 +48,8 @@ pwa start
 
 Your PWA will then open in the browser window!
 
+
 <img src="open-pwa.png" alt="PWA Starter open in a new browser window."></img>
 
 
-For more guidance on using the CLI, check out our documentation [here.](https://docs.pwabuilder.com/#/starter/quick-start) For feedback and issues, head over to our [Github repo](https://github.com/pwa-builder/PWABuilder). We’re always open ideas and direct contributions from the community!
+For more guidance on using the CLI, check out our documentation [here.](https://docs.pwabuilder.com/#/starter/quick-start) For feedback and issues, head over to our [Github repo](https://github.com/pwa-builder/PWABuilder). We’re always open ideas and direct contributions from the community!

docs/starter/quick-start.md

@@ -56,6 +56,7 @@ Your progressive web app will then open in a new browser window.
 
 ## Next Steps
 
+
 To learn how to use the CLI in depth, go <a href="/starter/cli-usage" aria-label="Click here to lean more">here</a>
 
 To learn more about adding content to your PWA, go <a href="/starter/adding-content" aria-label="Click here to lean more">here</a> 
@@ -64,4 +65,4 @@ To learn more about the service worker in the starter, go <a href="/starter/serv
 
 To learn how to deploy your PWA to the web, go <a href="/starter/publish" aria-label="Click here to lean more">here</a> 
 
-To learn about the technical structure of the starter, go <a href="/starter/tech-overview" aria-label="Click here to lean more">here</a> 
+To learn about the technical structure of the starter, go <a href="/starter/tech-overview" aria-label="Click here to lean more">here</a> 

libraries/manifest-validation/src/mani-tests.ts

@@ -168,7 +168,27 @@ export const maniTests: Array<Validation> = [
             if (isArray) {
                 const anyIcon = value.find(icon => icon.purpose === "any");
 
-                return anyIcon ? true : false;
+                if (!anyIcon) {
+                    // if we dont have an icon with purpose === any
+                    // we need to double check if they have used maskable.
+                    // If they have used maskable, they should have an icon with purpose === any
+                    const maskable = value.find(icon => icon.purpose === "maskable");
+
+                    if (maskable) {
+                        // returning false as they need an icon with purpose === any
+                        return false;
+                    }
+                    else {
+                        // no maskable icon so this test is fine
+                        return true;
+                    }
+                }
+                else {
+                    // its fine because the user does not have
+                    // a maskable icon and it is not required
+                    // to have an icon with purpose any in this case
+                    return true;
+                }
             }
             else {
                 return false;