Content: Lighthouse Guide (#1225)

* add quick lighthouse guide

* fix broken jest images

* fix actual lighthouse errors!

* few tiny edits

* simplify

common-theme/assets/styles/04-components/page-footer.scss

@@ -6,9 +6,6 @@
     justify-content: center;
     align-items: center;
     text-transform: lowercase;
-  }
-
-  &__this {
-    color: var(--theme-color--accent-shade);
+    font: var(--theme-font--system);
   }
 }

common-theme/layouts/partials/block/link.html

@@ -12,7 +12,8 @@
     {{ with $chip }}
       <img
         src="{{ $chip.RelPermalink }}"
-        alt="{{ $blockData.name }}"
+        alt=""
+        role="presentation"
         class="c-chip__icon c-chip__icon--circle" />
     {{ end }}
     <h4 class="c-chip__title e-heading__2">{{ $blockData.name }}</h4>

org-cyf-guides/content/testing/lighthouse/index.md

@@ -0,0 +1,50 @@
++++
+title="Lighthouse Audits"
+description="Learn how to audit your webpage"
+emoji="🔦"
+[[blocks]]
+name="Lighthouse Guide"
+src="https://developer.chrome.com/docs/lighthouse/overview#devtools"
+caption="Lighthouse Documentation in Chrome DevTools"
++++
+
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more. At {{<our-name>}}, we require all web pages you write to score 100 for Accessibility as a minimum standard.
+
+## How to run an audit
+
+1. Open a webpage in Chrome.
+2. Right-click on the page and select [`Inspect`](https://developer.chrome.com/docs/devtools/open).
+3. Click on the [`Lighthouse`](https://developer.chrome.com/docs/lighthouse/overview#devtools) tab.
+4. Under `Categories`, check `Accessibility`. (Uncheck the other categories for now to make your report simpler.)
+5. Click the `Analyze page load` button.
+
+## How to read and use the report
+
+Lighthouse is your friend! Lighthouse will go through your code and show you how to fix everything. Under the top score, you will see a list of items that need fixing. You must click on the triangle to see the details.
+
+<details>
+<summary>
+
+#### Click on the disclosure triangle to open the details
+
+</summary>
+
+Each item will have a description of the problem and why it matters for users. It will identify the exact location of the problem in your code and link you to [a detailed explanation of how to fix it](https://dequeuniversity.com/rules/axe/4.10/color-contrast).
+
+![Lighthouse report](lighthouse-anatomy.png)
+
+</details>
+
+### Fix the issues one by one
+
+Work through the list of issues one by one. Fix **one error** and re-run the audit to check your progress.
+
+> [!TIP]
+> If you can't fix an issue, open a draft PR and ask for help. We are here to help each other!
+
+## Try it out
+
+1. Open any HTML project in [VS Code](https://code.visualstudio.com/).
+1. Launch the index with [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
+1. Inspect the page and run a Lighthouse audit.
+1. Revise your code to solve the problem and improve the score.

org-cyf-guides/content/testing/intro/index.md → org-cyf-guides/content/testing/unit-testing/index.md

@@ -1,5 +1,5 @@
 +++
-title="Testing"
+title="Unit Testing with Jest"
 description="Learn how to test your code"
 emoji="🧪"
 +++
@@ -233,16 +233,16 @@ This should run our tests and then provide us with feedback about how our code i
 
 Consider an extract from the test file `countWords.test.js`
 
-![Test case for countWords](./test-case.png)
+![Test case for countWords](test-case.png)
 
 After the test has run, we will get some feedback from Jest depending on whether the test passed or failed.
 If the test fails then we should expect to see something like this:
 
-![Failing test case for countWords](./test-fail-case.png)
+![Failing test case for countWords](test-fail-case.png)
 
 If the test passes, then we should get some feedback that looks like this:
 
-![Passing test case for countWords](./test-pass-case.png)
+![Passing test case for countWords](test-pass-case.png)
 
 Jest aims to give feedback that makes it simple to see why test has failed. It shows us several things: