From 1a44e7a9079b8f78a3f87bab5e3f6af44269595d Mon Sep 17 00:00:00 2001 From: Tom Hackshaw <42124348+et0and@users.noreply.github.com> Date: Fri, 13 Dec 2024 17:06:28 +1300 Subject: [PATCH] Update work/headings-checker --- work/headings-checker.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 work/headings-checker.mdx diff --git a/work/headings-checker.mdx b/work/headings-checker.mdx new file mode 100644 index 0000000..ad0730c --- /dev/null +++ b/work/headings-checker.mdx @@ -0,0 +1,12 @@ +--- +title: Headings checker +summary: A tool for detecting improper heading order in React +publishedAt: 2024-12-13 +--- +A simple tool that can be used to identify improper headings in your React project. It recursively scans and returns any violations where the order is skipped, whether this be with normal HTML heading tags (for example, h1/H1) or something like the [MUI Typography component](https://mui.com/material-ui/react-typography/). + +Use `npx headings-checker` to run. It can be used as part of your CI/CD workflow via GitHub Actions to flag any issues as part of your development. + +More information about the importance of maintaining proper heading order can be read on the [W3C website](https://www.w3.org/WAI/tutorials/page-structure/headings/). + +Inspired by the [react-accessible-headings package](https://github.com/springload/react-accessible-headings) developed by [Springload](https://www.springload.co.nz/).