fix: address accessibility report findings

Author: roll

components/Dialog/Dialog.module.css

@@ -4,8 +4,17 @@
   inset: 0;
 }
 
+/* sr-only: visually hidden, still in the a11y tree as the dialog's name */
 .title {
-  display: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .content {
@@ -30,12 +39,6 @@
   margin: 0 auto;
 }
 
-.title {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 16px;
-}
-
 .description {
   margin-bottom: 16px;
   height: 100%;

components/Dialog/Dialog.tsx

@@ -7,9 +7,13 @@ import classes from "./Dialog.module.css"
 
 export function Dialog(props: {
   open?: boolean
+  title: string
   children: ReactNode
   fullScreen?: boolean
   onOpenChange: (open: boolean) => void
+  // Forwarded to Radix/Vaul. Call event.preventDefault() to take over focus
+  // restoration (e.g. focus the editor instead of the trigger).
+  onCloseAutoFocus?: (event: Event) => void
 }) {
   const snapPoints = [0.5, 1] as const
   const [snap, setSnap] = useState<number | string | null>(snapPoints[0])
@@ -29,12 +33,17 @@ export function Dialog(props: {
     >
       <VaulDrawer.Portal>
         <VaulDrawer.Overlay className={classes.overlay} />
-        <VaulDrawer.Content className={classes.content}>
+        <VaulDrawer.Content
+          className={classes.content}
+          onCloseAutoFocus={props.onCloseAutoFocus}
+        >
           <Container size="lg" h="100%">
             <Flex gap={{ base: 20, md: 40 }} direction="column" h="100%">
               <Box className={classes.handle} />
+              {/* Visually hidden but exposed to AT — provides the dialog's
+                  accessible name (WCAG 4.1.3 Status Messages). */}
               <VaulDrawer.Title className={classes.title}>
-                <Trans>Dialog</Trans>
+                {props.title}
               </VaulDrawer.Title>
               <ScrollArea
                 flex={props.fullScreen ? 1 : undefined}
@@ -43,6 +52,7 @@ export function Dialog(props: {
                 {props.children}
               </ScrollArea>
               <Button
+                className="hover-bump"
                 onClick={() => props.onOpenChange(false)}
                 color="gray"
                 fullWidth

components/Form/Form.tsx

@@ -2,19 +2,37 @@ import { Trans, useLingui } from "@lingui/react/macro"
 import { Box, Button, CloseButton, Stack, Tabs } from "@mantine/core"
 import { FileInput, TextInput, Textarea } from "@mantine/core"
 import { isJSONString, isNotEmpty, useForm } from "@mantine/form"
-import { useState } from "react"
 import * as icons from "#icons.ts"
 import * as settings from "#settings.ts"
 
+export type ActiveTab = "url" | "file" | "text"
+
 export interface FormProps {
   onSubmit: (value: string | File | Record<string, any>) => void
+  activeTab?: ActiveTab
+  onActiveTabChange?: (tab: ActiveTab) => void
 }
 
+// Live-region props for inline validation errors so screen readers announce them
+// the moment the message appears (WCAG 4.1.3 Status Messages, 3.3.1 Error Identification).
+const errorProps = { role: "alert", "aria-live": "polite" as const }
+
 export function Form(props: FormProps) {
-  const [activeTab, setActiveTab] = useState<string | null>("url")
+  const activeTab = props.activeTab ?? "url"
+
+  const handleTabChange = (value: string | null) => {
+    if (value === "url" || value === "file" || value === "text") {
+      props.onActiveTabChange?.(value)
+    }
+  }
 
   return (
-    <Tabs defaultValue="url" value={activeTab} onChange={setActiveTab}>
+    <Tabs
+      value={activeTab}
+      onChange={handleTabChange}
+      activateTabWithKeyboard={false}
+      classNames={{ tab: "hover-bump-tab" }}
+    >
       <Tabs.List>
         <Tabs.Tab
           value="url"
@@ -94,11 +112,15 @@ function UrlForm(props: { onSubmit: (value: string) => void }) {
     <form onSubmit={handleSubmit}>
       <Stack gap="md">
         <TextInput
+          id="input-url"
           placeholder={t`Enter data package URL`}
           size="lg"
           label={t`Data Package URL`}
+          errorProps={errorProps}
           rightSection={
             <CloseButton
+              className="hover-bump"
+              aria-label={t`Clear URL`}
               onClick={() => form.setFieldValue("url", "")}
               disabled={!form.values.url}
             />
@@ -139,11 +161,15 @@ function FileForm(props: { onSubmit: (value: File) => void }) {
     <form onSubmit={handleSubmit}>
       <Stack gap="md">
         <FileInput
+          id="input-file"
           placeholder={t`Select data package file`}
           size="lg"
           label={t`Data Package File`}
+          errorProps={errorProps}
           rightSection={
             <CloseButton
+              className="hover-bump"
+              aria-label={t`Clear file selection`}
               onClick={() => form.setFieldValue("file", null)}
               disabled={!form.values.file}
             />
@@ -180,14 +206,18 @@ function JsonForm(props: { onSubmit: (value: Record<string, any>) => void }) {
     <form onSubmit={handleSubmit}>
       <Stack gap="md">
         <Textarea
+          id="input-text"
           placeholder={t`Paste data package JSON`}
           size="lg"
           label={t`Data Package JSON`}
           autosize
           minRows={5}
+          errorProps={errorProps}
           rightSection={
             <Box mt="xs" style={{ alignSelf: "flex-start" }}>
               <CloseButton
+                className="hover-bump"
+                aria-label={t`Clear JSON input`}
                 onClick={() => form.setFieldValue("text", "")}
                 disabled={!form.values.text}
               />
@@ -202,13 +232,10 @@ function JsonForm(props: { onSubmit: (value: Record<string, any>) => void }) {
 }
 
 function SubmitButton(props: { disabled: boolean }) {
+  // Always render filled so contrast meets 4.5:1 in both light and dark.
+  // The light variant fallback failed WCAG 1.4.3.
   return (
-    <Button
-      type="submit"
-      size="lg"
-      variant={props.disabled ? "light" : "filled"}
-      disabled={props.disabled}
-    >
+    <Button type="submit" size="lg" variant="filled" disabled={props.disabled}>
       <Trans>Validate Data Package</Trans>
     </Button>
   )

components/Layout/Content.tsx

@@ -2,7 +2,7 @@ import { Container } from "@mantine/core"
 
 export function Content(props: { children: React.ReactNode }) {
   return (
-    <Container size="lg" w="100%">
+    <Container component="main" id="main-content" size="lg" w="100%">
       {props.children}
     </Container>
   )

components/Layout/Layout.tsx

@@ -4,12 +4,14 @@ import { Content } from "./Content.tsx"
 import { Footer } from "./Footer.tsx"
 import { Header } from "./Header.tsx"
 import classes from "./Layout.module.css"
+import { SkipLink } from "./SkipLink.tsx"
 
 export function Layout(props: {
   children?: React.ReactNode
 }) {
   return (
     <Stack gap={40} className={classes.root}>
+      <SkipLink />
       <Box>
         <Header />
         <Banner />

components/Layout/Logo.tsx

@@ -1,3 +1,4 @@
+import { useLingui } from "@lingui/react/macro"
 import { Anchor } from "@mantine/core"
 import { useComputedColorScheme } from "@mantine/core"
 import { Link } from "react-router"
@@ -8,6 +9,7 @@ import LogoIconLight from "#assets/datapackage-logo-light.svg?react"
 import classes from "./Logo.module.css"
 
 export function Logo() {
+  const { t } = useLingui()
   const colorScheme = useComputedColorScheme("light")
 
   return (
@@ -18,11 +20,12 @@ export function Logo() {
       component={Link}
       className={classes.color}
       underline="never"
+      aria-label={t`Data Package homepage`}
     >
       {colorScheme === "dark" ? (
-        <LogoIconDark height="40px" />
+        <LogoIconDark height="40px" aria-hidden="true" focusable="false" />
       ) : (
-        <LogoIconLight height="40px" />
+        <LogoIconLight height="40px" aria-hidden="true" focusable="false" />
       )}
     </Anchor>
   )

components/Layout/SkipLink.module.css

@@ -0,0 +1,21 @@
+/* sr-only-focusable: hidden until keyboard focus, then surfaces in the
+   top-left so keyboard users can bypass the header & banner (WCAG 2.4.1). */
+.link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 200;
+  padding: 8px 12px;
+  background-color: light-dark(white, var(--mantine-color-dark-6));
+  color: light-dark(black, var(--mantine-color-gray-0));
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.link:focus,
+.link:focus-visible {
+  left: 12px;
+  top: 12px;
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}

components/Layout/SkipLink.tsx

@@ -0,0 +1,10 @@
+import { Trans } from "@lingui/react/macro"
+import classes from "./SkipLink.module.css"
+
+export function SkipLink() {
+  return (
+    <a href="#main-content" className={classes.link}>
+      <Trans>Skip to main content</Trans>
+    </a>
+  )
+}

components/Report/Report.tsx

@@ -32,6 +32,7 @@ export function Report(props: {
       variant="pills"
       value={selectedType}
       onChange={value => setSelectedType(value ?? "all")}
+      activateTabWithKeyboard={false}
     >
       <Stack gap="lg">
         <Divider label={<Trans>Errors</Trans>} labelPosition="center" />

components/Status/Status.tsx

@@ -34,7 +34,12 @@ export function Status(props: StatusProps) {
     <Center className={classes.container}>
       <Flex direction={{ base: "column", sm: "row" }} align="center" gap="md">
         {getIcon()}
-        <span className={classes.title}>{getTitle()}</span>
+        {/* output is implicitly role=status — announces title transitions
+            (pending → valid/invalid) without bleeding Mantine's injected
+            responsive <style> into the live region's textContent. */}
+        <output aria-live="polite" aria-atomic="true" className={classes.title}>
+          {getTitle()}
+        </output>
       </Flex>
     </Center>
   )