chore: put default fallback value for a11y

Author: gjulivan

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}

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";

packages/shared/widget-plugin-external-events/src/hooks/useAccessibilityValues.ts

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+
+type Params = {
+    inputRef: React.RefObject<HTMLInputElement>;
+    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
+    };
+}