a11y: Fix accessibility violations found by the playwright axe page scan

src/components/Callout/index.astro

@@ -14,7 +14,7 @@ const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 ---
 
-<div class={`callout ${props.title ? 'callout-note' : ''}`}>
-  <h5>{t('calloutTitles', props.title || "Try this!")}</h5>
+<div class={`callout ${props.title ? 'callout-note' : ''}`} role="note">
+  <p class="callout-title">{t('calloutTitles', props.title || "Try this!")}</p>
   <slot />
 </div>

src/components/Nav/JumpToLinks.tsx

@@ -33,7 +33,7 @@ export const JumpToLinks = ({
 
       {isOpen && (
         <ul>
-          {links?.map((link) => (
+          {links?.filter((link) => link.label).map((link) => (
             <li
               key={link.label}
               class={`${styles.linklabel} ${link.size ?? ""}`}

src/content/tutorials/en/get-started.mdx

@@ -66,7 +66,7 @@ Using the [p5.js Web Editor](https://editor.p5js.org/):
 
 ![A user on the p5.js Web Editor finds their project "Interactive Landscape" in their gallery of saved sketches.](../images/introduction/p5_editor_interactive_landscape_3.png)
 
-#### Default Code
+### Default Code
 
 All p5.js projects include the p5.js library and three files: [`index.html`](https://www.classes.cs.uchicago.edu/archive/2021/spring/11111-1/happycoding/p5js/web-dev.html#:~:text=The%20index.,the%20page%20using%20HTML%20tags!), [style.css](https://happycoding.io/tutorials/p5js/web-dev), and `sketch.js`. Make changes on the canvas by adding code to the sketch.js file. New p5.js projects begin with the following code in the sketch.js file:
 
@@ -173,7 +173,7 @@ There are over 10 million combinations of numbers for red, green, and blue that
 Visit the p5.js reference pages for [background()](/reference/p5/background) and [color](/reference/p5/color) to learn about more ways you can change the background color of the canvas.
 
 
-#### Tip
+### Tip
 
 Use [Google’s Color Picker](https://g.co/kgs/aCdbzD) to search for the code that can set the background to any color. Find the color you would like to use, copy the numbers in the box labeled RGB, and paste them into [`background()`](/reference/p5/background).
 

src/layouts/ReferenceItemLayout.astro

@@ -58,10 +58,12 @@ const relatedEntriesLinks = relatedEntries.map((relatedEntry: any) => {
   };
 });
 // Add link for submodule itself
-relatedEntriesLinks.unshift({
-  label: entry.data.submodule,
-  url: `/reference/#${entry.data.submodule}`,
-});
+if (entry.data.submodule) {
+  relatedEntriesLinks.unshift({
+    label: entry.data.submodule,
+    url: `/reference/#${entry.data.submodule}`,
+  });
+}
 // Put related links at top of the list
 jumpToState.links?.unshift(...relatedEntriesLinks);
 
@@ -112,37 +114,37 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
   <div class="content-grid mt-0 max-w-[770px]">
     <div class="col-span-9 xl:min-w-[1000px]">
       {entry.data.webgpuOnly && (
-        <div class="experimental">
-          <h5>
-            <div
+        <div class="experimental" role="note">
+          <p class="callout-title">
+            <span
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
               set:html={warning}
             />
             {t('webgpuAddon')}
-          </h5>
+          </p>
         </div>
       )}
       {entry.data.beta && (
-        <div class="experimental">
-          <h5>
-            <div
+        <div class="experimental" role="note">
+          <p class="callout-title">
+            <span
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
               set:html={flask}
             />
             {t('experimentalApi', 'title')}
-          </h5>
+          </p>
           <p>{t('experimentalApi', 'description')}</p>
         </div>
       )}
       {entry.data.deprecated && (
-        <div class="deprecated">
-          <h5>
-            <div
+        <div class="deprecated" role="note">
+          <p class="callout-title">
+            <span
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
               set:html={warning}
             />
             {t('calloutTitles', 'Warning')}
-          </h5>
+          </p>
           <p set:html={entry.data.deprecated} />
         </div>
       )}

styles/global.scss

@@ -321,8 +321,10 @@ pre.code-box,
     color: var(--type-black);
   }
 
-  & h5 {
+  & h5,
+  & .callout-title {
     font-weight: bold;
+    margin-top: 0;
     margin-bottom: var(--spacing-sm);
     &:last-child {
       margin-bottom: 0;

test/a11y/pages.spec.ts

@@ -29,7 +29,11 @@ test.describe("a11y", () => {
       page,
     }) => {
       await page.goto(path);
-      const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+      // Skips p5-generated preview contents (duplicate landmarks we don't
+      // author) while keeping the iframe element itself in scope.
+      const accessibilityScanResults = await new AxeBuilder({ page })
+        .exclude(["iframe", "body"])
+        .analyze();
       expect(accessibilityScanResults.violations).toEqual([]);
     });
   }