@azrico/reactgrid 1.4.1 → 1.5.1

package/src/hooks/useGridEvents.ts

@@ -1,96 +1,141 @@
-import React from 'react';
-import { DataGridWrapperProps, GridType } from '../types/types';
-import { find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-function useGridMenuRow() {
-	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
-	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
-		set_menuRow(r || null);
-		set_menuAnchorEl(el || null);
-	}, []);
-	return { update_menuRow, menuAnchorEl, menuRow };
-}
-export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
-	const click_data = React.useRef<any>(null);
-	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
-
-	const refreshColumn = React.useCallback(
-		(col: string) => {
-			const dt = grid.ungroupedData;
-			for (let index = 0; index < dt.length; index++) {
-				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
-			}
-		},
-		[grid]
-	);
-	const refresh = React.useCallback(() => {
-		const dt = grid.ungroupedData;
-		for (let index = 0; index < dt.length; index++) {
-			(grid as any).setItemAt(index, {}, { replace: false });
-		}
-	}, [grid]);
-
-	React.useEffect(() => {
-		if (!grid) return;
-		grid['refresh'] = refresh;
-		grid['refreshColumn'] = refreshColumn;
-	}, [grid, props.dataSource, refresh, refreshColumn]);
-	/* -------------------------------------------------------------------------- */
-	/*                                   events                                   */
-	/* -------------------------------------------------------------------------- */
-	const onRowClick = React.useCallback(
-		(rowProps, event) => {
-			const nowDate = Date.now();
-			const lastclick: number = click_data.current[get_row_id(rowProps)];
-			if (lastclick) {
-				const diffTime = Math.abs(nowDate - lastclick);
-				if (diffTime < 400) {
-					click_data.current[get_row_id(rowProps)] = null;
-					return (
-						props.onRowDoubleClick &&
-						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
-					);
-				}
-			}
-
-			click_data.current[get_row_id(rowProps)] = nowDate;
-			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-		},
-		[props.onRowClick, props.onRowDoubleClick]
-	);
-
-	React.useEffect(() => {
-		click_data.current = {};
-	}, [props.dataSource]);
-
-	/* ------------------------------- ContextMenu ------------------------------ */
-	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
-			update_menuRow(null, null);
-			return true;
-		}
-		event.preventDefault();
-
-		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
-		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
-		update_menuRow(realRow, anEl);
-		return false;
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
-	const onRenderRow = React.useCallback((rowProps) => {
-		// save the original handlers to be called later
-		rowProps['data-row-id'] = get_row_id(rowProps.data);
-	}, []);
-
-	return {
-		onRowClick,
-		onRowContextMenu,
-		onRenderRow,
-		update_menuRow,
-		menuAnchorEl,
-		menuRow,
-	};
-}
+import React from 'react';
+import { DataGridWrapperProps, GridType } from '../types/types';
+import { find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+import {
+	apply_root_a11y,
+	apply_row_a11y,
+	get_grid_root,
+	get_root_a11y_key,
+} from '../func/func_a11y';
+
+function useGridMenuRow() {
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
+		set_menuRow(r || null);
+		set_menuAnchorEl(el || null);
+	}, []);
+	return { update_menuRow, menuAnchorEl, menuRow };
+}
+export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
+	const click_data = React.useRef<any>(null);
+	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
+
+	const refreshColumn = React.useCallback(
+		(col: string) => {
+			const dt = grid.ungroupedData;
+			for (let index = 0; index < dt.length; index++) {
+				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
+			}
+		},
+		[grid]
+	);
+	const refresh = React.useCallback(() => {
+		const dt = grid.ungroupedData;
+		for (let index = 0; index < dt.length; index++) {
+			(grid as any).setItemAt(index, {}, { replace: false });
+		}
+	}, [grid]);
+
+	React.useEffect(() => {
+		if (!grid) return;
+		grid['refresh'] = refresh;
+		grid['refreshColumn'] = refreshColumn;
+	}, [grid, props.dataSource, refresh, refreshColumn]);
+	/* -------------------------------------------------------------------------- */
+	/*                                   events                                   */
+	/* -------------------------------------------------------------------------- */
+	const onRowClick = React.useCallback(
+		(rowProps, event) => {
+			const nowDate = Date.now();
+			const lastclick: number = click_data.current[get_row_id(rowProps)];
+			if (lastclick) {
+				const diffTime = Math.abs(nowDate - lastclick);
+				if (diffTime < 400) {
+					click_data.current[get_row_id(rowProps)] = null;
+					return (
+						props.onRowDoubleClick &&
+						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
+					);
+				}
+			}
+
+			click_data.current[get_row_id(rowProps)] = nowDate;
+			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+		},
+		[props.onRowClick, props.onRowDoubleClick]
+	);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [props.dataSource]);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+	const onRowContextMenu = React.useCallback((rowProps, event) => {
+		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
+			update_menuRow(null, null);
+			return true;
+		}
+		event.preventDefault();
+
+		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
+		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+		update_menuRow(realRow, anEl);
+		return false;
+	}, []);
+
+	/* -------------------------------------------------------------------------- */
+	/* ------------------------------ Accessibility ----------------------------- */
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
+	const rootSyncFrame = React.useRef(0);
+	// last applied root values, so row renders (e.g. while scrolling) don't re-apply them
+	const lastRoot = React.useRef<{ el: Element | null; key: string }>({ el: null, key: '' });
+	const getRootOptions = () => ({
+		ariaLabel: latestProps.current.ariaLabel,
+		editable: !!latestProps.current.editable,
+	});
+	// root attributes are set on the DOM node, batched to once per frame
+	const scheduleRootSync = React.useCallback(() => {
+		if (rootSyncFrame.current || typeof requestAnimationFrame === 'undefined') return;
+		const grid = latestProps.current.liveGridRef?.current?.current;
+		const key = get_root_a11y_key(grid, getRootOptions());
+		if (key && key === lastRoot.current.key && get_grid_root(grid) === lastRoot.current.el)
+			return;
+		rootSyncFrame.current = requestAnimationFrame(() => {
+			rootSyncFrame.current = 0;
+			const liveGrid = latestProps.current.liveGridRef?.current?.current;
+			const options = getRootOptions();
+			const el = apply_root_a11y(liveGrid, options);
+			lastRoot.current = { el, key: el ? get_root_a11y_key(liveGrid, options) : '' };
+		});
+	}, []);
+	React.useEffect(() => {
+		scheduleRootSync();
+	}, [scheduleRootSync, props.ariaLabel, props.editable, props.columns, props.dataSource]);
+	React.useEffect(
+		() => () => {
+			if (rootSyncFrame.current) cancelAnimationFrame(rootSyncFrame.current);
+			rootSyncFrame.current = 0;
+		},
+		[]
+	);
+
+	const onRenderRow = React.useCallback((rowProps) => {
+		// save the original handlers to be called later
+		rowProps['data-row-id'] = get_row_id(rowProps.data);
+		const liveGrid: any = latestProps.current.liveGridRef?.current?.current;
+		apply_row_a11y(rowProps, !!liveGrid?.computedRowSelectionEnabled);
+		scheduleRootSync();
+	}, []);
+
+	return {
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		update_menuRow,
+		menuAnchorEl,
+		menuRow,
+	};
+}

package/src/types/types.ts

@@ -42,6 +42,8 @@ export type loose_column_fields = loose_column_names & {
 	title: string;
 	type: string;
 	items: any[];
+	/** accessible name for cells whose visible text isn't descriptive (icons, badges, ...), set as aria-label */
+	ariaLabel: (value: any, data: any) => string;
 };
 export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
 //
@@ -50,7 +52,12 @@ export type CustomColumnDefinition = {
 	name: string;
 	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
 };
-export type AzGridOptions = Partial<TypeDataGridProps>;
+export type AzGridOptions = Partial<TypeDataGridProps> & {
+	/** called for every rendered row, after the grid's own row attributes are set */
+	onRenderRow?: (rowProps: any) => void;
+	/** extra DOM props for the header row */
+	headerProps?: { [key: string]: any };
+};
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
@@ -59,6 +66,8 @@ export type AzGridProps = {
 	details_filter?: FilterValues;
 
 	licenseKey?: string;
+	/** accessible name of the grid, set as aria-label on the grid root */
+	ariaLabel?: string;
 
 	gridRef?: React.MutableRefObject<TypeComputedProps>;
 	gridOptions?: AzGridOptions;
@@ -117,6 +126,8 @@ export type DataGridWrapperProps = ModifyFields<
 	DataGridProps,
 	{
 		gridRef: React.MutableRefObject<TypeComputedProps>;
+		/** internal: inovua's live computed props ref (gridRef holds a snapshot) */
+		liveGridRef: React.MutableRefObject<React.MutableRefObject<TypeComputedProps> | null>;
 		static_gridOptions: AzGridOptions;
 		dynamic_gridOptions: AzGridOptions;
 		children?: React.ReactNode;

package/src/views/DataGrid.tsx

@@ -15,6 +15,7 @@ import { useGridEvents } from '../hooks/useGridEvents';
 import { useColumnData } from '../hooks/useColumnData';
 import { useDataSource } from '../hooks/useDatasource';
 import { useGridSearch } from '../hooks/useGridSearch';
+import { apply_column_a11y } from '../func/func_a11y';
 /* -------------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------------- */
@@ -41,12 +42,17 @@ const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', '
 export function AzGrid(props: AzGridProps) {
 	const gridRefBackup = React.useRef<any>(null);
 	const gridRef = props.gridRef || gridRefBackup;
+	const liveGridRef = React.useRef<any>(null);
 
 	/* -------------------------------------------------------------------------- */
 	/*                                   Columns                                  */
 	/* -------------------------------------------------------------------------- */
 	const cached_columns = useColumnData(props);
 	const dataSource = useDataSource(props.dataSource, props);
+	const a11y_columns = React.useMemo(
+		() => cached_columns.map((col) => apply_column_a11y(col, { gridEditable: !!props.editable })),
+		[cached_columns, props.editable]
+	);
 	/* -------------------------------------------------------------------------- */
 	/*                                 Row changes                                */
 	/* -------------------------------------------------------------------------- */
@@ -106,9 +112,10 @@ export function AzGrid(props: AzGridProps) {
 		<DataGridEventsWrapper
 			{...props}
 			gridRef={gridRef}
+			liveGridRef={liveGridRef}
 			static_gridOptions={static_gridOptions}
 			dynamic_gridOptions={dynamic_gridOptions}
-			columns={cached_columns}
+			columns={a11y_columns}
 			dataSource={dataSource}
 			highlightedRow={props.highlightedRow}
 		/>
@@ -146,20 +153,44 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	 * Merge click events into grid options
 	 */
 	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const opts: any = props.static_gridOptions || {};
 		const events: AzGridOptions = {
 			onRowClick: onRowClick,
 			onRowContextMenu: onRowContextMenu,
 		};
 
+		// internal row attributes first, consumer's onRenderRow last so it can override them
+		const consumerOnRenderRow = opts.onRenderRow;
 		const renderProps: any = {
-			onRenderRow: onRenderRow,
+			onRenderRow: consumerOnRenderRow
+				? (rowProps) => {
+						onRenderRow(rowProps);
+						consumerOnRenderRow(rowProps);
+				  }
+				: onRenderRow,
+		};
+
+		const gridEditable = !!props.editable;
+		const a11yProps: any = {
+			headerProps: { role: 'row', 'aria-rowindex': 1, ...opts.headerProps },
+			rowIndexColumn: apply_column_a11y(
+				typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {},
+				{ role: 'rowheader', gridEditable }
+			),
 		};
+		if (opts.checkboxColumn)
+			a11yProps.checkboxColumn = apply_column_a11y(
+				typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {},
+				{ gridEditable, markReadonly: false }
+			);
+
 		return {
-			...props.static_gridOptions,
+			...opts,
 			...events,
 			...renderProps,
+			...a11yProps,
 		};
-	}, [props.static_gridOptions]);
+	}, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow]);
 
 	/* -------------------------------------------------------------------------- */
 	//TODO ContextMenu not from mui...
@@ -260,9 +291,10 @@ function DataGridCore(props: DataGridWrapperProps) {
 			<ReactDataGrid
 				{...props.static_gridOptions}
 				{...props.dynamic_gridOptions}
-				rowIndexColumn
+				rowIndexColumn={props.static_gridOptions.rowIndexColumn || true}
 				handle={(ref) => {
 					if (ref) props.gridRef.current = ref.current as any;
+					if (props.liveGridRef) props.liveGridRef.current = ref as any;
 				}}
 				theme="default-light"
 				className={clsx(