[site][xs] - fix accessbiility

site/components/Hero.tsx

@@ -41,7 +41,7 @@ export function Hero() {
         {/* Commented code on line 37, 39 and 113 will reenable the two columns hero */}
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left">
-            <div role="heading">
+            <div>
               <h1 className="inline bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 bg-clip-text text-5xl tracking-tight text-transparent">
                 The JavaScript framework for data portals
               </h1>

site/components/NavItem.tsx

@@ -20,7 +20,7 @@ export default function NavItem({ item }) {
   };
 
   return (
-    <Menu as="div" className="relative">
+    <Menu as="div" role="menu" className="relative">
       <Menu.Item>
         {Object.prototype.hasOwnProperty.call(item, 'href') ? (
           <Link

site/content/docs/index.md

@@ -38,7 +38,7 @@ Let's check it's working and what we have! Open http://localhost:3000 from your
 
 You should see a page like this when you access http://localhost:3000. This is the starter template page which shows the most simple data portal you could have: a simple README plus csv file.
 
-<img src="/assets/examples/basic-example.png" />
+<img src="/assets/examples/basic-example.png" alt="Basic example" />
 
 ### Editing the Page
 
@@ -51,7 +51,7 @@ Let’s try editing the starter page.
 
 After refreshing the page, you should see the new text:
 
-<img src="/assets/docs/editing-the-page-1.png" />
+<img src="/assets/docs/editing-the-page-1.png" alt="Editing base example" />
 
 Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets.
 

site/lib/markdown.mjs

@@ -1,21 +1,21 @@
-import { h } from "hastscript";
+import { h } from 'hastscript';
-import matter from "gray-matter";
+import matter from 'gray-matter';
-import mdxmermaid from "mdx-mermaid";
+import mdxmermaid from 'mdx-mermaid';
-import remarkCallouts from "@portaljs/remark-callouts";
+import remarkCallouts from '@portaljs/remark-callouts';
-import remarkEmbed from "@portaljs/remark-embed";
+import remarkEmbed from '@portaljs/remark-embed';
-import remarkGfm from "remark-gfm";
+import remarkGfm from 'remark-gfm';
-import remarkMath from "remark-math";
+import remarkMath from 'remark-math';
-import remarkSmartypants from "remark-smartypants";
+import remarkSmartypants from 'remark-smartypants';
-import remarkToc from "remark-toc";
+import remarkToc from 'remark-toc';
-import remarkWikiLink, { getPermalinks } from "@portaljs/remark-wiki-link";
+import remarkWikiLink, { getPermalinks } from '@portaljs/remark-wiki-link';
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeKatex from "rehype-katex";
+import rehypeKatex from 'rehype-katex';
-import rehypeSlug from "rehype-slug";
+import rehypeSlug from 'rehype-slug';
-import rehypePrismPlus from "rehype-prism-plus";
+import rehypePrismPlus from 'rehype-prism-plus';
-import { serialize } from "next-mdx-remote/serialize";
+import { serialize } from 'next-mdx-remote/serialize';
 
-import * as tw from "../tailwind.config";
+import * as tw from '../tailwind.config';
-import { siteConfig } from "../config/siteConfig";
+import { siteConfig } from '../config/siteConfig';
 
 /**
  * Parse a markdown or MDX file to an MDX source form + front matter data
@@ -36,14 +36,14 @@ const parse = async function (source, format, scope) {
         remarkPlugins: [
           remarkEmbed,
           remarkGfm,
-          [remarkSmartypants, { quotes: false, dashes: "oldschool" }],
+          [remarkSmartypants, { quotes: false, dashes: 'oldschool' }],
           remarkMath,
           remarkCallouts,
-          [remarkWikiLink, { permalinks, pathFormat: "obsidian-short" }],
+          [remarkWikiLink, { permalinks, pathFormat: 'obsidian-short' }],
           [
             remarkToc,
             {
-              heading: "Table of contents",
+              heading: 'Table of contents',
               tight: true,
             },
           ],
@@ -54,29 +54,36 @@ const parse = async function (source, format, scope) {
           [
             rehypeAutolinkHeadings,
             {
-              properties: { className: "heading-link" },
+              properties: { className: 'heading-link' },
               test(element) {
                 return (
-                  ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) &&
+                  ['h2', 'h3', 'h4', 'h5', 'h6'].includes(element.tagName) &&
-                  element.properties?.id !== "table-of-contents" &&
+                  element.properties?.id !== 'table-of-contents' &&
-                  element.properties?.className !== "blockquote-heading"
+                  element.properties?.className !== 'blockquote-heading'
                 );
               },
-              content() {
+              content(node) {
                 return [
                   h(
-                    "svg",
+                    'span.invisible.block.h-0.w-0',
+                    { ariaLabel: node.properties.id },
+                    'Read the “',
+                    node.properties.id,
+                    '” section'
+                  ),
+                  h(
+                    'svg',
                     {
-                      xmlns: "http:www.w3.org/2000/svg",
+                      xmlns: 'http:www.w3.org/2000/svg',
                       fill: tw.theme.extend.colors.secondary.DEFAULT,
-                      viewBox: "0 0 20 20",
+                      viewBox: '0 0 20 20',
-                      className: "w-5 h-5",
+                      className: 'w-5 h-5',
                     },
                     [
-                      h("path", {
+                      h('path', {
-                        fillRule: "evenodd",
+                        fillRule: 'evenodd',
-                        clipRule: "evenodd",
+                        clipRule: 'evenodd',
-                        d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z",
+                        d: 'M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z',
                       }),
                     ]
                   ),
@@ -84,7 +91,7 @@ const parse = async function (source, format, scope) {
               },
             },
           ],
-          [rehypeKatex, { output: "mathml" }],
+          [rehypeKatex, { output: 'mathml' }],
           [rehypePrismPlus, { ignoreMissing: true }],
         ],
         format,

site/styles/globals.css

@@ -1,4 +1,4 @@
-@import "@portaljs/remark-callouts/styles.css";
+@import '@portaljs/remark-callouts/styles.css';
 @import './prism.css';
 
 html,
@@ -31,7 +31,7 @@ html {
 
 /* tooltip fade-out clip */
 .tooltip-body::after {
-  content: "";
+  content: '';
   position: absolute;
   right: 0;
   top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */