diff --git a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/TextFilterContainer.tsx b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/TextFilterContainer.tsx index e56fabd28a..b3d89fc199 100644 --- a/packages/pluggableWidgets/datagrid-text-filter-web/src/components/TextFilterContainer.tsx +++ b/packages/pluggableWidgets/datagrid-text-filter-web/src/components/TextFilterContainer.tsx @@ -1,4 +1,8 @@ -import { useOnResetValueEvent, useOnSetValueEvent } from "@mendix/widget-plugin-external-events/hooks"; +import { + useOnResetValueEvent, + useOnSetValueEvent, + useAccessibilityValues +} from "@mendix/widget-plugin-external-events/hooks"; import { StringFilterController } from "@mendix/widget-plugin-filtering/controllers/input/StringInputController"; import { FilterFnList, InputWithFilters } from "@mendix/widget-plugin-filtering/controls"; import { useBasicSync } from "@mendix/widget-plugin-filtering/helpers/useBasicSync"; @@ -59,6 +63,11 @@ export const TextFilterContainer: (props: ContainerProps) => React.ReactElement listener: controller.handleResetValue }); + const { screenReaderInputCaption } = useAccessibilityValues({ + inputRef: controller.inputRef, + defaultValue: props.screenReaderInputCaption?.value + }); + useOnSetValueEvent({ widgetName: props.name, listener: controller.handleSetValue }); return ( @@ -75,7 +84,7 @@ export const TextFilterContainer: (props: ContainerProps) => React.ReactElement onFilterChange={controller.handleFilterFnChange} placeholder={props.placeholder?.value} screenReaderButtonCaption={props.screenReaderButtonCaption?.value} - screenReaderInputCaption={props.screenReaderInputCaption?.value} + screenReaderInputCaption={screenReaderInputCaption} styles={props.style} tabIndex={props.tabIndex} defaultValue={props.defaultValue?.value} diff --git a/packages/shared/widget-plugin-external-events/src/hooks.ts b/packages/shared/widget-plugin-external-events/src/hooks.ts index b4ec01b3cd..d5b7a14f48 100644 --- a/packages/shared/widget-plugin-external-events/src/hooks.ts +++ b/packages/shared/widget-plugin-external-events/src/hooks.ts @@ -2,3 +2,4 @@ export { useOnResetValueEvent } from "./hooks/useOnResetValueEvent"; export { useOnSetValueEvent } from "./hooks/useOnSetValueEvent"; export { useOnResetFiltersEvent } from "./hooks/useOnResetFiltersEvent"; export { useListenChannelEvents } from "./hooks/useListenChannelEvents"; +export { useAccessibilityValues } from "./hooks/useAccessibilityValues"; diff --git a/packages/shared/widget-plugin-external-events/src/hooks/useAccessibilityValues.ts b/packages/shared/widget-plugin-external-events/src/hooks/useAccessibilityValues.ts new file mode 100644 index 0000000000..563e1d298c --- /dev/null +++ b/packages/shared/widget-plugin-external-events/src/hooks/useAccessibilityValues.ts @@ -0,0 +1,30 @@ +import { useMemo } from "react"; + +type Params = { + inputRef: React.RefObject; + defaultValue: string | undefined; +}; + +export function useAccessibilityValues({ inputRef, defaultValue }: Params): { + screenReaderInputCaption: string; +} { + const screenReaderInputCaption = useMemo(() => { + if (defaultValue && defaultValue.length > 0) { + return defaultValue; + } + if (inputRef.current) { + const headerColumnNode = inputRef.current?.closest("[role='columnheader']"); + if (headerColumnNode) { + const headerColumnTitle = headerColumnNode.getAttribute("title"); + if (headerColumnTitle) { + return `Search ${headerColumnTitle}`; + } + } + } + return ""; + }, [defaultValue, inputRef, inputRef.current]); + + return { + screenReaderInputCaption + }; +}