diff --git a/packages/odyssey-react-mui/src/labs/DataFilters.tsx b/packages/odyssey-react-mui/src/labs/DataFilters.tsx index a9de8c144d..7ba2fb2c98 100644 --- a/packages/odyssey-react-mui/src/labs/DataFilters.tsx +++ b/packages/odyssey-react-mui/src/labs/DataFilters.tsx @@ -45,6 +45,7 @@ import { Checkbox } from "../Checkbox"; import { RadioGroup } from "../RadioGroup"; import { Radio } from "../Radio"; import { MRT_ColumnDef, MRT_RowData } from "material-react-table"; +import { Trans, useTranslation } from "react-i18next"; export type DataFilterValue = string | string[] | undefined; @@ -126,6 +127,8 @@ const DataFilters = ({ additionalActions, filters: filtersProp = [], }: DataFiltersProps) => { + const { t } = useTranslation(); + const [filters, setFilters] = useState(filtersProp); const initialInputValues = useMemo(() => { @@ -253,7 +256,7 @@ const DataFilters = ({ aria-controls={isFiltersMenuOpen ? "filters-menu" : undefined} aria-expanded={isFiltersMenuOpen ? "true" : undefined} aria-haspopup="true" - ariaLabel="Filters" + ariaLabel={t("filters.filters.arialabel")} endIcon={} onClick={(event) => { setFiltersMenuAnchorElement(event.currentTarget); @@ -305,11 +308,24 @@ const DataFilters = ({ {!latestFilterValue || (Array.isArray(latestFilterValue) && - latestFilterValue.length === 0) - ? `Any ${filter.label.toLowerCase()}` - : Array.isArray(latestFilterValue) - ? `${latestFilterValue.length} selected` - : latestFilterValue} + latestFilterValue.length === 0) ? ( + + ) : Array.isArray(latestFilterValue) ? ( + + ) : ( + latestFilterValue + )} @@ -419,7 +435,7 @@ const DataFilters = ({ inputValues[filterPopoverCurrentFilter.id] && ( { handleInputChange( filterPopoverCurrentFilter.id, @@ -489,7 +505,7 @@ const DataFilters = ({ } > { setSearchValue(""); onChangeSearch(""); @@ -544,7 +560,7 @@ const DataFilters = ({