Move Heading Check component to own file so I can add to the Page com…

…ponent without making the file too cluttered

src/components/dev-only/HeadingCheck.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import { ErrorMessageNotification } from "../userMessage/ErrorMessageNotification";
+
+/**
+ * This is for development purposes. It displays an error message when a page is missing an h1 element or has
+ * one that is configured incorrectly. We will see the error if we create a page that has this issue.
+ */
+export const HeadingCheck = () => {
+ const [error, setError] = useState("");
+
+ useEffect(() => {
+ const heading1 = document.querySelector("h1");
+
+ if (heading1 === null) {
+ setError("This page is missing an h1 element - please add one with `tabindex=-1`");
+ } else {
+ const missingTabIndex = !(heading1.hasAttribute("tabindex"));
+ const wrongTabindex = heading1.tabIndex !== -1;
+
+ if (missingTabIndex || wrongTabindex) {
+ setError("This page's h1 element has a bad `tabindex` - please specify `tabindex=-1`");
+ }
+ }
+ }, []);
+
+ return (<>
+ {error && process.env.NODE_ENV !== "production" && <ErrorMessageNotification message={error}/>}
+ </>);
+};

src/pages/Page.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { ChildrenProps } from "../utilities/children-props";
-import { ErrorMessageNotification } from "../components/userMessage/ErrorMessageNotification";
 import { DocumentStateContext } from "../contexts/DocumentStateContext";
 import { useFocusHashOrMainHeading } from "../hooks/focus/useFocusHashOrMainHeading";
 import "./Pages.css";
+import { HeadingCheck } from "../components/dev-only/HeadingCheck";
 
 type PageProps = {
  title: string
@@ -32,30 +32,3 @@ export const Page = ({ title, children }: PageProps) => {
  </div>
  </>);
 };
-
-/**
- * This is for development purposes. It displays an error message when a page is missing an h1 element or has
- * one that is configured incorrectly. We will see the error if we create a page that has this issue.
- */
-const HeadingCheck = () => {
- const [error, setError] = useState("");
-
- useEffect(() => {
- const heading1 = document.querySelector("h1");
-
- if (heading1 === null) {
- setError("This page is missing an h1 element - please add one with `tabindex=-1`");
- } else {
- const missingTabIndex = !(heading1.hasAttribute("tabindex"));
- const wrongTabindex = heading1.tabIndex !== -1;
-
- if (missingTabIndex || wrongTabindex) {
- setError("This page's h1 element has a bad `tabindex` - please specify `tabindex=-1`");
- }
- }
- }, []);
-
- return (<>
- {error && process.env.NODE_ENV !== "production" && <ErrorMessageNotification message={error}/>}
- </>);
-};