docs: fix (non-systemic) accessibility issues flagged by aXe (#1531)

This PR fixes some accessibility issues in our theme docs (i.e. not generated code) flagged by #1513. Here, I target changes that I say are not "systemic", i.e. issues that are easily resolvable by changing our copy and page structure (rather than issues that are created by how kramdown/rouge generates HTML, or reworking our color themes).

Here's a quick summary of the manual changes I made:

- ~~writing some JS to set `tabindex="0"` on all code blocks; I'd prefer a ruby-native solution, but that involves writing Ruby code, which is incompatible with the pages gem~~ I've moved this to #1533
- rewriting many headings named "Example" which were almost always h4s into more descriptive headings + the appropriate heading level, adding .text-delta to maintain the previous style when necessary
- removing some old heading ID hacks in `index-test` that are no longer necessary, since Jekyll does this automatically now
- fixing the table headings in `docs/utilities/layout.md`
- adding accessible titles + descriptions to the mermaid examples
- occasionally, slightly moving around copy to make it align with new headings

If you test with #1513 with the following rules disabled:

```rb
skipped_rules = [
  'color-contrast', # requires theme auditing
  # issues w/ autogenerated footnotes
  'aria-allowed-role',
  'landmark-no-duplicate-contentinfo',
  'landmark-unique',
  'aria-deprecated-role',
  # issues w/ markdown checkboxes
  'label'
]
```

You should get passing tests :) which is awesome!

## next steps

1. we need to do a pass over our docs copy - very inconsistent. This has been a pain point for me for a while now, just need to find time to sit down and do it. In particular, I'd love to standardize how we display example code (perhaps even hiding it with `<details>` and `<summary>`?), our headings language, what goes into the ToC, our overall writing style, etc.
2. ~~I don't love the JS hack for adding `tabindex="0"` to code blocks (so that they are keyboard-focusable). Ideally, we'd add a custom formatter to rouge to do this, but we can't execute arbitrary Ruby code when users use `github-pages`. I'll look into this some more - maybe rouge would be open to adding this as a feature.~~ see: #1533
4. There are some systemic issues that need a deeper look:
    1. The most common issue is still color-contrast. Fixing this involves:
        - looking at our whites/blacks/grays for core text and highlighting
        - reevaluating our syntax highlighting themes
        - fixing dark mode, once and for all :) 
        - also, picking accessible callout colours!
     2. kramdown's autogenerated footnotes feature creates a bunch of errors that aXe flags: it seems like a deprecated aria role is being used, and perhaps some misuse of markup. Need to look into this more before I can make a solid attempt at resolving this issue.
     3. We demonstrate the use of `- [ ]`, but this generates `<input type="checkbox">` values with no label. I'm not entirely sure what the best way to fix this problem is (without writing custom Ruby code). I'll have to think about this some more.

---------

Co-authored-by: Michael Ball <michael@mball.co>

docs/ui-components/callouts.md

@@ -22,8 +22,8 @@ When you have [configured]({% link docs/configuration.md %}#callouts) the  `colo
 [^postfix]:
     You can put the callout markup either before or after its content.
 
-#### An untitled callout
-{: .no_toc }
+## An untitled callout
+{: .no_toc .text-delta }
 
 ```markdown
 {: .highlight }
@@ -34,8 +34,8 @@ A paragraph
 A paragraph
 
 
-#### A single paragraph callout
-{: .no_toc }
+## A single paragraph callout
+{: .no_toc .text-delta }
 
 ```markdown
 {: .note }
@@ -57,8 +57,8 @@ A paragraph
 >
 > A paragraph with a custom title callout
 
-#### A multi-paragraph callout
-{: .no_toc }
+## A multi-paragraph callout
+{: .no_toc .text-delta }
 
 ```markdown
 {: .important }
@@ -96,8 +96,8 @@ A paragraph
 >
 > The last paragraph
 
-#### An indented callout
-{: .no_toc }
+## An indented callout
+{: .no_toc .text-delta }
 
 ```markdown
 > {: .highlight }
@@ -107,8 +107,8 @@ A paragraph
 > {: .highlight }
   A paragraph
 
-#### Indented multi-paragraph callouts
-{: .no_toc }
+## Indented multi-paragraph callouts
+{: .no_toc .text-delta }
 
 ```markdown
 > {: .new }
@@ -127,8 +127,8 @@ A paragraph
 > > The last paragraph
 
 
-#### Nested callouts
-{: .no_toc }
+## Nested callouts
+{: .no_toc .text-delta }
 
 ```markdown
 {: .important }
@@ -140,8 +140,8 @@ A paragraph
 > {: .warning }
 > A paragraph
 
-#### Opaque background
-{: .no_toc }
+## Opaque background
+{: .no_toc .text-delta }
 
 ```markdown
 {: .important }

docs/ui-components/code/index.md

@@ -129,6 +129,8 @@ Once mermaid is installed, it can be used in markdown files. The markdown for a
 {% highlight markdown %}
 ```mermaid
 graph TD;
+    accTitle: the diamond pattern
+    accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
     A-->B;
     A-->C;
     B-->D;
@@ -140,6 +142,8 @@ which renders:
 
 ```mermaid
 graph TD;
+    accTitle: the diamond pattern
+    accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
     A-->B;
     A-->C;
     B-->D;
@@ -177,6 +181,8 @@ By default, AsciiDoc generates HTML markup that mermaid cannot properly parse. T
 ++++
 <pre class="language-mermaid">
 graph TD;
+    accTitle: the diamond pattern
+    accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
     A-->B;
     A-->C;
     B-->D;