feat(accessibility): add accesibility changes

AlexPalaz · AlexPalaz · commit 34ea2cdf335a · 2026-05-12T14:32:00.000+02:00
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -11,7 +11,7 @@ import { ColorSchemeProvider, useColorScheme, useResolvedTheme } from "./context
 export type { ChartColorScheme, EchartsThemeValue } from "./themes";
 export type { ChartProviderProps } from "./context/ChartProvider";
 export type { DashboardProviderProps } from "./context/DashboardProvider";
-export type { DashboardProviderGridProps } from "./context/DashboardGridProvider";
+export type { DashboardGridProviderProps } from "./context/DashboardGridProvider";
 export type { DashboardData, DashboardSlot, RenderDashboardProps } from "./components/RenderDashboard";
 
 export * from "./types";
diff --git a/packages/webapp/src/components/ChartOptions.tsx b/packages/webapp/src/components/ChartOptions.tsx
@@ -165,17 +165,20 @@ function ChartOptions({
 
       return (
         <div key={field.name} className={`form-control ${gridSpan}`}>
-          <label className="label cursor-pointer justify-start gap-3">
+          <label htmlFor={`opt-${field.name}`} className="label">
+            <span className="label-text font-medium">
+              {translateLabel(field.label)}
+            </span>
+          </label>
+          <div className="h-12 flex items-center">
             <input
+              id={`opt-${field.name}`}
               className="checkbox checkbox-primary"
               type="checkbox"
               {...field.otherProps}
               {...register(field.name, { required: field.required })}
             />
-            <span className="label-text font-medium">
-              {translateLabel(field.label)}
-            </span>
-          </label>
+          </div>
           {errors[field.name] && (
             <label className="label">
               <span className="label-text-alt text-error">
diff --git a/packages/webapp/src/components/EditStepComponent.tsx b/packages/webapp/src/components/EditStepComponent.tsx
@@ -6,8 +6,9 @@ export default function EditStepComponent(props: {
   isOpen: boolean;
   isDisabled: boolean;
   index: number;
+  headingRef?: React.Ref<HTMLHeadingElement>;
 }) {
-  const { title, description, Icon, children, isOpen, index, isDisabled } = props;
+  const { title, description, Icon, children, isOpen, index, isDisabled, headingRef } = props;
   return (
     <details className="collapse collapse-arrow bg-base-100 border border-base-200" name={`my-accordion-det-${index}`} aria-disabled={isDisabled} open={isOpen}>
       <summary className="collapse-title font-semibold">
@@ -21,7 +22,7 @@ export default function EditStepComponent(props: {
             </span>
           </div>
           <div>
-            <h2 className="card-title text-xl">
+            <h2 ref={headingRef} tabIndex={-1} className="card-title text-xl">
               {title}
             </h2>
             <p className="text-sm text-base-content/60">
diff --git a/packages/webapp/src/components/layout/ThemeSwitcher.tsx b/packages/webapp/src/components/layout/ThemeSwitcher.tsx
@@ -1,21 +1,35 @@
+import { useTranslation } from "react-i18next";
+
 export default function ThemeSwitcherComponent(props: {
   currentTheme: "light" | "dark";
   handleChange: (value: string) => void;
+  /** Optional contextual prefix for the accessible label (e.g. "Anteprima grafico"). */
+  contextLabel?: string;
 }) {
-  const { currentTheme, handleChange } = props;
+  const { currentTheme, handleChange, contextLabel } = props;
+  const { t } = useTranslation("components", {
+    keyPrefix: "components.themeSwitcher",
+  });
+  const stateLabel = t(currentTheme === "dark" ? "values.dark" : "values.light");
+  const baseLabel = t("label");
+  const ariaLabel = contextLabel
+    ? `${contextLabel} — ${baseLabel}: ${stateLabel}`
+    : `${baseLabel}: ${stateLabel}`;
   return (
     <div className="flex p-2 rounded-lg ">
       <label className="flex items-center gap-4 cursor-pointer">
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
         </svg>
         <input
           type="checkbox"
+          role="switch"
           className="toggle toggle-sm"
           checked={currentTheme === "dark"}
+          aria-label={ariaLabel}
           onChange={(e) => handleChange(e.target.checked ? "dark" : "light")}
         />
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"  >
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"  >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
         </svg>
       </label>
diff --git a/packages/webapp/src/components/load-data/TransformDataTable.tsx b/packages/webapp/src/components/load-data/TransformDataTable.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import DataTable from "react-data-table-component";
 import type { TableColumn } from "react-data-table-component";
 import { useTranslation } from "react-i18next";
@@ -149,13 +149,36 @@ export default function TransformData({
     return columnOrder
       .filter((key) => visibleColumns.has(key))
       .map((key) => ({
+        id: key,
         name: key,
         selector: (row: RowRecord) => row[key] as string,
         sortable: true,
         reorder: true,
       }));
   }, [columnOrder, visibleColumns]);
 
+  // a11y: react-data-table-component does not expose aria-sort on column
+  // headers, so we sync it manually after each render. Sort icons rendered by
+  // the library are also aria-hidden to avoid duplicate announcements.
+  const tableRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const root = tableRef.current;
+    if (!root) return;
+    const headers = root.querySelectorAll<HTMLElement>(
+      '[role="columnheader"][data-column-id]',
+    );
+    headers.forEach((el) => {
+      const id = el.getAttribute("data-column-id");
+      const value =
+        sortState && sortState.columnKey === id
+          ? sortState.direction === "asc"
+            ? "ascending"
+            : "descending"
+          : "none";
+      el.setAttribute("aria-sort", value);
+    });
+  }, [sortState, columns]);
+
   // Handle column reorder from DataTable drag-and-drop
   const handleColumnOrderChange = useCallback(
     (newCols: TableColumn<RowRecord>[]) => {
@@ -331,21 +354,24 @@ export default function TransformData({
         />
       )}
 
-      <DataTable
-        title={t(`table.title`)}
-        columns={columns}
-        data={objectData}
-        theme={currentTheme}
-        pagination
-        dense
-        highlightOnHover
-        fixedHeader
-        fixedHeaderScrollHeight="360px"
-        responsive
-        onColumnOrderChange={handleColumnOrderChange}
-        onSort={handleSort}
-        sortServer={false}
-      />
+      <div ref={tableRef}>
+        <DataTable
+          title={t(`table.title`)}
+          columns={columns}
+          data={objectData}
+          theme={currentTheme}
+          pagination
+          dense
+          highlightOnHover
+          fixedHeader
+          fixedHeaderScrollHeight="360px"
+          responsive
+          onColumnOrderChange={handleColumnOrderChange}
+          onSort={handleSort}
+          sortServer={false}
+          sortIcon={<span aria-hidden="true">▾</span>}
+        />
+      </div>
 
       {sortState && (
         <div className="mt-2 text-xs text-base-content/50">
diff --git a/packages/webapp/src/i18n/locales/en/components.json b/packages/webapp/src/i18n/locales/en/components.json
@@ -547,6 +547,13 @@
                     "label": "Chart type"
                 }
             }
+        },
+        "themeSwitcher": {
+            "label": "Theme",
+            "values": {
+                "light": "Light",
+                "dark": "Dark"
+            }
         }
     }
 }
diff --git a/packages/webapp/src/i18n/locales/en/pages.json b/packages/webapp/src/i18n/locales/en/pages.json
@@ -76,7 +76,9 @@
                     "configuration": {
                         "title": "Configure the chart",
                         "description": "Choose the chart type and customize its appearance",
-                        "status": "Please load data and proceed to configuration step to see chart options"
+                        "status": "Load your data to get started. Once data is available you'll be able to pick the chart type and options.",
+                        "statusAwaitingSeries": "Data loaded. Confirm the series selection in the preview section to enable configuration.",
+                        "announcement": "Configuration available. Choose the chart type and customize its options."
                     },
                     "data": {
                         "title": "Load your data",
@@ -90,7 +92,12 @@
                 },
                 "preview": {
                     "loadDataMessage": "Load your data to display the data preview",
-                    "chartA11y": "Chart of type {{type}}: {{name}}. {{description}}"
+                    "chartA11y": "Chart of type {{type}}: {{name}}. {{description}}",
+                    "seriesSelector": {
+                        "title": "Series selection",
+                        "description": "Pick the columns to use as data series and confirm to proceed with the chart configuration.",
+                        "announcement": "Data loaded. Continue with the series selection in the preview section to enable configuration."
+                    }
                 }
             }
         },
diff --git a/packages/webapp/src/i18n/locales/it/components.json b/packages/webapp/src/i18n/locales/it/components.json
@@ -547,6 +547,13 @@
                     "label": "Tipo di grafico"
                 }
             }
+        },
+        "themeSwitcher": {
+            "label": "Tema",
+            "values": {
+                "light": "Chiaro",
+                "dark": "Scuro"
+            }
         }
     }
 }
diff --git a/packages/webapp/src/i18n/locales/it/pages.json b/packages/webapp/src/i18n/locales/it/pages.json
@@ -76,7 +76,9 @@
                     "configuration": {
                         "title": "Configura il grafico",
                         "description": "Scegli il tipo di grafico e personalizza l'aspetto",
-                        "status": "Carica i dati e procedi alla fase di configurazione per vedere le opzioni del grafico"
+                        "status": "Carica i dati per iniziare. Quando i dati saranno disponibili potrai scegliere il tipo di grafico e le opzioni.",
+                        "statusAwaitingSeries": "Dati caricati. Conferma la selezione delle serie nella sezione anteprima per abilitare la configurazione.",
+                        "announcement": "Configurazione disponibile. Scegli il tipo di grafico e personalizza le opzioni."
                     },
                     "data": {
                         "title": "Carica i tuoi dati",
@@ -90,7 +92,12 @@
                 },
                 "preview": {
                     "loadDataMessage": "Carica i tuoi dati per visualizzare l'anteprima",
-                    "chartA11y": "Grafico di tipo {{type}}: {{name}}. {{description}}"
+                    "chartA11y": "Grafico di tipo {{type}}: {{name}}. {{description}}",
+                    "seriesSelector": {
+                        "title": "Selezione serie",
+                        "description": "Scegli le colonne da utilizzare come serie dei dati e conferma per proseguire con la configurazione del grafico.",
+                        "announcement": "Dati caricati. Procedi con la selezione delle serie nella sezione anteprima per abilitare la configurazione."
+                    }
                 }
             }
         },
diff --git a/packages/webapp/src/pages/private/EditChart.tsx b/packages/webapp/src/pages/private/EditChart.tsx
@@ -11,7 +11,7 @@ import { Helmet } from "react-helmet";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { FaCog, FaDatabase, FaInfo } from "react-icons/fa";
-import { startTransition, useEffect, useState } from "react";
+import { startTransition, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
 import { HOME_ROUTE, ROUTES } from "../../router.tsx";
@@ -69,6 +69,10 @@ function EditChartPage() {
 
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [saveStatus, setSaveStatus] = useState<string>("");
+  // Announces step transitions to assistive tech (WCAG 1.3.2 / 3.3.2)
+  const [stepAnnouncement, setStepAnnouncement] = useState<string>("");
+  const seriesSelectorRef = useRef<HTMLDivElement>(null);
+  const configurationHeadingRef = useRef<HTMLHeadingElement>(null);
   useUnsavedChanges(hasUnsavedChanges, t(`unsavedChanges`));
 
   // After the initial load completes, reset any dirty flag that child components
@@ -124,6 +128,21 @@ function EditChartPage() {
   }, [paramId]);
 
   const haveData = data && data[0].length > 0 ? true : dataSource ? true : false;
+  const isConfigStep = state.matches("config");
+
+  // Announce step transitions and move keyboard focus so AT users learn that
+  // the next interactive section just became available (WCAG 1.3.2, 3.3.2).
+  useEffect(() => {
+    if (loading) return;
+    if (isConfigStep) {
+      setStepAnnouncement(t(`body.options.configuration.announcement`));
+      // Defer until the configuration section is rendered/opened.
+      requestAnimationFrame(() => configurationHeadingRef.current?.focus());
+    } else if (currentData && !haveData) {
+      setStepAnnouncement(t(`body.preview.seriesSelector.announcement`));
+      requestAnimationFrame(() => seriesSelectorRef.current?.focus());
+    }
+  }, [isConfigStep, currentData, haveData, loading, t]);
 
   function handleUpload(d: any) {
     setHasUnsavedChanges(true);
@@ -216,6 +235,10 @@ function EditChartPage() {
       <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
         {saveStatus}
       </div>
+      {/* Live region for step-flow transitions (WCAG 1.3.2, 3.3.2) */}
+      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+        {stepAnnouncement}
+      </div>
       <div className="w-full flex justify-between items-center gap-2 mb-4 bg-base-300 py-4 px-10 rounded-lg">
         <button
           type="button"
@@ -266,7 +289,9 @@ function EditChartPage() {
                       <input
                         id="chart_visibility"
                         type="checkbox"
+                        role="switch"
                         checked={chartPublish}
+                        aria-describedby="chart_visibility_state"
                         onChange={() => {
                           setHasUnsavedChanges(true);
                           setChartPublish(!chartPublish);
@@ -279,7 +304,10 @@ function EditChartPage() {
                       >
                         {t(`body.options.setup.form.fields.visibility.label`)}
                       </label>
-                      <span className="text-sm text-base-content font-bold">
+                      <span
+                        id="chart_visibility_state"
+                        className="text-sm text-base-content font-bold"
+                      >
                         {t(
                           `body.options.setup.form.fields.visibility.values.${chartPublish ? "public" : "private"}`,
                         )}
@@ -333,9 +361,10 @@ function EditChartPage() {
               isOpen={currentStepIndex > 0 ? true : false}
               isDisabled={currentStepIndex === 0 ? true : false}
               index={2}
+              headingRef={configurationHeadingRef}
             >
               <div>
-                {state.matches("config") ? (
+                {isConfigStep ? (
                   <div className="card bg-base-100 shadow-sm border border-base-200">
                     <div className="card-body">
                       <SelectChart
@@ -359,8 +388,9 @@ function EditChartPage() {
                   </div>
                 ) : (
                   <div role="status">
-                    {" "}
-                    {t(`body.options.configuration.status`)}{" "}
+                    {currentData && !haveData
+                      ? t(`body.options.configuration.statusAwaitingSeries`)
+                      : t(`body.options.configuration.status`)}
                   </div>
                 )}
               </div>
@@ -426,6 +456,7 @@ function EditChartPage() {
                       handleChange={(value: ChartColorScheme) =>
                         setPreviewScheme(value)
                       }
+                      contextLabel={t(`header.preview.heading`)}
                     />
                     <figure
                       role="figure"
@@ -472,9 +503,22 @@ function EditChartPage() {
                       {t(`body.preview.loadDataMessage`)}
                     </p>
                     {currentData && (
-                      <div className="card bg-base-100 shadow-sm border border-base-200">
+                      <div
+                        ref={seriesSelectorRef}
+                        tabIndex={-1}
+                        aria-labelledby="series-selector-heading"
+                        className="card bg-base-100 shadow-sm border border-base-200"
+                      >
                         <div className="card-body">
-                          <h4>serie selector</h4>
+                          <h3
+                            id="series-selector-heading"
+                            className="text-lg font-semibold"
+                          >
+                            {t(`body.preview.seriesSelector.title`)}
+                          </h3>
+                          <p className="text-sm text-base-content/70">
+                            {t(`body.preview.seriesSelector.description`)}
+                          </p>
                           <SeriesSelector
                             initialData={currentData || data}
                             setData={(d) => {

Original file line number	Diff line number	Diff line change
`@@ -547,6 +547,13 @@`
`547`	`547`	`"label": "Chart type"`
`548`	`548`	`}`
`549`	`549`	`}`
	`550`	`+ },`
	`551`	`+ "themeSwitcher": {`
	`552`	`+ "label": "Theme",`
	`553`	`+ "values": {`
	`554`	`+ "light": "Light",`
	`555`	`+ "dark": "Dark"`
	`556`	`+ }`
`550`	`557`	`}`
`551`	`558`	`}`
`552`	`559`	`}`