Skip to content

Commit e9a660c

Browse files
committed
chore: put default fallback value for a11y
1 parent 2588530 commit e9a660c

File tree

3 files changed

+42
-2
lines changed

3 files changed

+42
-2
lines changed

packages/pluggableWidgets/datagrid-text-filter-web/src/components/TextFilterContainer.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { useOnResetValueEvent, useOnSetValueEvent } from "@mendix/widget-plugin-external-events/hooks";
1+
import {
2+
useOnResetValueEvent,
3+
useOnSetValueEvent,
4+
useAccessibilityValues
5+
} from "@mendix/widget-plugin-external-events/hooks";
26
import { StringFilterController } from "@mendix/widget-plugin-filtering/controllers/input/StringInputController";
37
import { FilterFnList, InputWithFilters } from "@mendix/widget-plugin-filtering/controls";
48
import { useBasicSync } from "@mendix/widget-plugin-filtering/helpers/useBasicSync";
@@ -59,6 +63,11 @@ export const TextFilterContainer: (props: ContainerProps) => React.ReactElement
5963
listener: controller.handleResetValue
6064
});
6165

66+
const { screenReaderInputCaption } = useAccessibilityValues({
67+
inputRef: controller.inputRef,
68+
defaultValue: props.screenReaderInputCaption?.value
69+
});
70+
6271
useOnSetValueEvent({ widgetName: props.name, listener: controller.handleSetValue });
6372

6473
return (
@@ -75,7 +84,7 @@ export const TextFilterContainer: (props: ContainerProps) => React.ReactElement
7584
onFilterChange={controller.handleFilterFnChange}
7685
placeholder={props.placeholder?.value}
7786
screenReaderButtonCaption={props.screenReaderButtonCaption?.value}
78-
screenReaderInputCaption={props.screenReaderInputCaption?.value}
87+
screenReaderInputCaption={screenReaderInputCaption}
7988
styles={props.style}
8089
tabIndex={props.tabIndex}
8190
defaultValue={props.defaultValue?.value}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export { useOnResetValueEvent } from "./hooks/useOnResetValueEvent";
22
export { useOnSetValueEvent } from "./hooks/useOnSetValueEvent";
33
export { useOnResetFiltersEvent } from "./hooks/useOnResetFiltersEvent";
44
export { useListenChannelEvents } from "./hooks/useListenChannelEvents";
5+
export { useAccessibilityValues } from "./hooks/useAccessibilityValues";
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useMemo } from "react";
2+
3+
type Params = {
4+
inputRef: React.RefObject<HTMLInputElement>;
5+
defaultValue: string | undefined;
6+
};
7+
8+
export function useAccessibilityValues({ inputRef, defaultValue }: Params): {
9+
screenReaderInputCaption: string;
10+
} {
11+
const screenReaderInputCaption = useMemo(() => {
12+
if (defaultValue && defaultValue.length > 0) {
13+
return defaultValue;
14+
}
15+
if (inputRef.current) {
16+
const headerColumnNode = inputRef.current?.closest("[role='columnheader']");
17+
if (headerColumnNode) {
18+
const headerColumnTitle = headerColumnNode.getAttribute("title");
19+
if (headerColumnTitle) {
20+
return `Search ${headerColumnTitle}`;
21+
}
22+
}
23+
}
24+
return "";
25+
}, [defaultValue, inputRef, inputRef.current]);
26+
27+
return {
28+
screenReaderInputCaption
29+
};
30+
}

0 commit comments

Comments
 (0)