Style GFM task list extension's output The default output, which mimics GitHub's markup and styles, is horrible. It sets `disabled` attribute that makes the element screen reader unfriendly. Also it does not associate the text to checkbox, which is also screen reader unfriendly. I may revisit styles in the future as the current one is not that pretty...

Changes

2 changed files (+139/-1)

• page_builder/default_theme/components/atoms/hast_renderer.tsx
  • @@ -25,6 +25,7 @@ import { syntaxHighlightingHandlers } from "../../mdast/syntax_highlighting_handlers.ts";
    import { css, join as joinCss } from "../../css.ts"; import * as callout from "../from-hast/callout.tsx"; + import * as taskList from "../from-hast/task_list.tsx"; const enum C { Wrapper = "a--hr",
  • @@ -193,7 +194,7 @@ margin-top: calc(var(--baseline) * 1rem);
    } `; - export const styles = joinCss(ownStyles, callout.styles); + export const styles = joinCss(ownStyles, callout.styles, taskList.styles); function nanoifyProps(props: HastToJSXRuntime.Props): HastToJSXRuntime.Props { const ret: HastToJSXRuntime.Props = {};
  • @@ -224,6 +225,8 @@ ? {
    "macana-ofm-callout": callout.MacanaOfmCallout, "macana-ofm-callout-title": callout.MacanaOfmCalloutTitle, "macana-ofm-callout-body": callout.MacanaOfmCalloutBody, + "macana-gfm-task-list": taskList.MacanaGfmTaskList, + "macana-gfm-task-list-item": taskList.MacanaGfmTaskListItem, } : {}, Fragment: jsxRuntime.Fragment,
  • @@ -280,6 +283,33 @@ properties: {},
    children: body, }, ], + }; + }, + list(state: State, node: Mdast.List): Hast.ElementContent { + return { + type: "element", + tagName: "macana-gfm-task-list", + properties: { + ordered: node.ordered, + }, + children: state.all(node), + }; + }, + listItem(state: State, node: Mdast.ListItem): Hast.ElementContent { + const children = state.all(node).map((child) => + child.type === "element" && child.tagName === "p" + ? child.children + : [child] + ).flat(); + + return { + type: "element", + tagName: "macana-gfm-task-list-item", + properties: { + checked: !!node.checked, + is_task: typeof node.checked === "boolean", + }, + children, }; }, ...syntaxHighlightingHandlers(),
• page_builder/default_theme/components/from-hast/task_list.tsx (new)
  • @@ -0,0 +1,108 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + /** @jsx h */ + + import { h } from "../../../../deps/deno.land/x/nano_jsx/mod.ts"; + + import { css } from "../../css.ts"; + + import * as LucideIcons from "../lucide_icons.tsx"; + + const enum C { + TaskItem = "fh-tl--i", + Checkbox = "fh-tl--c", + Check = "fh-tl--h", + Text = "fh-tl--t", + } + + export const styles = css` + .${C.TaskItem} { + display: flex; + align-items: start; + list-style: none; + } + + .${C.Checkbox} { + display: flex; + align-items: stretch; + justify-content: stretch; + width: calc(1em - 2px); + height: calc(1em - 2px); + aspect-ratio: 1 / 1; + border: 1px solid currentColor; + margin: 0; + margin-block-start: calc((var(--baseline) * 1rem - 1em) * 0.5 + 1px); + margin-inline-start: calc(-1em - 2px); + margin-inline-end: 4px; + + border-radius: 2px; + } + + .${C.Check} { + min-width: 0px; + min-height: 0px; + height: 100%; + } + + .${C.Text} { + line-height: calc(var(--baseline) * 1rem); + } + `; + + export interface MacanaGfmTaskListProps { + ordered?: "" | false; + + children: unknown; + } + + export function MacanaGfmTaskList( + { ordered, children }: MacanaGfmTaskListProps, + ) { + const Tag = ordered ? "ol" : "ul"; + + return ( + <Tag> + {children} + </Tag> + ); + } + + let checkCounter = 0; + + export interface MacanaGfmTaskListItemProps { + is_task: "" | false; + checked?: "" | false; + + children: unknown; + } + + export function MacanaGfmTaskListItem( + { children, checked, is_task }: MacanaGfmTaskListItemProps, + ) { + if (typeof is_task !== "string") { + return <li>{children}</li>; + } + + const isChecked = typeof checked === "string"; + const labelId = `__macana_tcheck_lbl__${checkCounter++}`; + + return ( + <li className={C.TaskItem}> + <span + className={C.Checkbox} + role="checkbox" + aria-disabled="true" + tabindex="0" + aria-checked={isChecked.toString()} + aria-labelledby={labelId} + > + {isChecked && ( + <LucideIcons.Check className={C.Check} aria-hidden="true" /> + )} + </span> + <span id={labelId} className={C.Text}>{children}</span> + </li> + ); + }