From ee2368c68647ab7b342b1ec18bb32311e3c045ac Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Thu, 26 Mar 2026 18:55:10 +0100 Subject: [PATCH] add a11y css to project when not in prod mode Summary: Ref T3078 Reviewers: kuba-orlik Maniphest Tasks: T3078 Differential Revision: https://hub.sealcode.org/D1687 --- package-lock.json | 11 +++++++++++ package.json | 5 +++++ src/back/a11y_overrides.css | 11 +++++++++++ src/back/config.ts | 1 + src/back/defaultHead.tsx | 4 +++- src/back/html.tsx | 4 +++- 6 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 src/back/a11y_overrides.css diff --git a/package-lock.json b/package-lock.json index 2ebc420..06947cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@types/leaflet": "^1.9.8", "@types/object-hash": "^3.0.6", "@types/simplemde": "^1.11.11", + "a11y.css": "^5.3.0", "c8": "^10.1.3", "colord": "^2.9.3", "dotenv": "^16.4.5", @@ -2478,6 +2479,11 @@ "dev": true, "peer": true }, + "node_modules/a11y.css": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/a11y.css/-/a11y.css-5.3.0.tgz", + "integrity": "sha512-WBEnwAT3NHyJFN0ejedhc4Q0U4yX2fNWmoee8Ai6TWIICjrocTNugXm8XFuIC8dI8goaIoqxnSd4PlnljJ8dxw==" + }, "node_modules/abbrev": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz", @@ -16967,6 +16973,11 @@ "dev": true, "peer": true }, + "a11y.css": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/a11y.css/-/a11y.css-5.3.0.tgz", + "integrity": "sha512-WBEnwAT3NHyJFN0ejedhc4Q0U4yX2fNWmoee8Ai6TWIICjrocTNugXm8XFuIC8dI8goaIoqxnSd4PlnljJ8dxw==" + }, "abbrev": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz", diff --git a/package.json b/package.json index 22d90cb..7417227 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,10 @@ { "from": "node_modules/@sealcode/sealcodemirror/mode/javascript/javascript.js", "to": "dist/codemirror-javascript-mode.js" + }, + { + "from": "node_modules/a11y.css/css", + "to": "dist/a11y.css" } ] }, @@ -105,6 +109,7 @@ "@types/leaflet": "^1.9.8", "@types/object-hash": "^3.0.6", "@types/simplemde": "^1.11.11", + "a11y.css": "^5.3.0", "c8": "^10.1.3", "colord": "^2.9.3", "dotenv": "^16.4.5", diff --git a/src/back/a11y_overrides.css b/src/back/a11y_overrides.css new file mode 100644 index 0000000..ae442c7 --- /dev/null +++ b/src/back/a11y_overrides.css @@ -0,0 +1,11 @@ +/* we properly embed charset metadata, but Turbo changes the order of elements in and this rule gives a false positive */ +head :first-child:not([charset]) { + &, + &::after { + display: none !important; + } +} + +head :first-child:not([charset]) ~ link:last-of-type::before { + display: none !important; +} diff --git a/src/back/config.ts b/src/back/config.ts index 105c18d..b46967d 100644 --- a/src/back/config.ts +++ b/src/back/config.ts @@ -48,3 +48,4 @@ export const UPLOADS_FS_DIR = process.env.UPLOADS_FS_DIR || locreq.resolve("uploaded_files"); export const MEILISEARCH_MASTER_KEY = process.env.MEILISEARCH_MASTER_KEY || "qwerty"; export const MEILISEARCH_HOST = process.env.MEILISEARCH_HOST || "http://localhost:1098"; +export const SCAN_A11Y = false; diff --git a/src/back/defaultHead.tsx b/src/back/defaultHead.tsx index 2f4ef06..e9fb9f6 100644 --- a/src/back/defaultHead.tsx +++ b/src/back/defaultHead.tsx @@ -3,6 +3,7 @@ import type { Readable } from "stream"; import type { Context } from "koa"; import type { HTMLOptions } from "@sealcode/sealgen"; import { htmlEscape } from "escape-goat"; +import { SCAN_A11Y } from "./config.js"; export const start_timestamp = Date.now(); @@ -24,7 +25,8 @@ export function defaultHead({ description: string; }): JSX.Element | Readable { const origin = ctx.URL.origin; - return tempstream /* HTML */ `${title} + return tempstream /* HTML */ ` ${title} + ${SCAN_A11Y ? `` : ""} diff --git a/src/back/html.tsx b/src/back/html.tsx index 438c15a..9b13cf3 100644 --- a/src/back/html.tsx +++ b/src/back/html.tsx @@ -40,6 +40,8 @@ export default function html({ controllers.push("refresh-on-ts-changes"); } + const classes = (htmlOptions?.bodyClasses || []).join(" "); + return tempstreamAsync /* HTML */ ` ${!hideNavigation ? (htmlOptions?.navbar || default_navbar)(ctx) : ""} ${body}