fix(AnalyticalTable): add "Filter" text to column popover (#6164)

Fixes #6132

Author: Lukas742

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.module.css

@@ -8,7 +8,10 @@
 
 .filterIcon {
   padding-inline-end: 0.5rem;
-  min-width: 1rem;
-  min-height: 1rem;
   color: var(--sapContent_NonInteractiveIconColor);
 }
+
+.filterText {
+  overflow: visible;
+  padding-inline-end: 0.5rem;
+}

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -1,16 +1,17 @@
 import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
 import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
+import { getScopedVarName } from '@ui5/webcomponents-base/CustomElementsScope.js';
 import iconDecline from '@ui5/webcomponents-icons/dist/decline.js';
 import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
 import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { FlexBoxAlignItems, TextAlign } from '../../../enums/index.js';
-import { CLEAR_SORTING, GROUP, SORT_ASCENDING, SORT_DESCENDING, UNGROUP } from '../../../i18n/i18n-defaults.js';
+import { CLEAR_SORTING, FILTER, GROUP, SORT_ASCENDING, SORT_DESCENDING, UNGROUP } from '../../../i18n/i18n-defaults.js';
 import { stopPropagation } from '../../../internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '../../../internal/utils.js';
 import { Icon } from '../../../webComponents/Icon/index.js';
@@ -19,6 +20,7 @@ import { ListItemCustom } from '../../../webComponents/ListItemCustom/index.js';
 import { ListItemStandard } from '../../../webComponents/ListItemStandard/index.js';
 import type { PopoverDomRef } from '../../../webComponents/Popover/index.js';
 import { Popover } from '../../../webComponents/Popover/index.js';
+import { Text } from '../../../webComponents/Text/index.js';
 import { FlexBox } from '../../FlexBox/index.js';
 import type { AnalyticalTableColumnDefinition } from '../types/index.js';
 import { classNames, styleData } from './ColumnHeaderModal.module.css.js';
@@ -52,6 +54,16 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
   const sortDescendingText = i18nBundle.getText(SORT_DESCENDING);
   const groupText = i18nBundle.getText(GROUP);
   const ungroupText = i18nBundle.getText(UNGROUP);
+  const filterText = i18nBundle.getText(FILTER);
+
+  const filterStyles = useMemo(() => {
+    if (showFilter) {
+      return {
+        iconDimensions: `var(${getScopedVarName('--_ui5_list_item_icon_size')})`,
+        fontSize: `var(${getScopedVarName('--_ui5_list_item_title_size')})`
+      };
+    }
+  }, [showFilter]);
 
   const handleSort = (e) => {
     const sortType = e.detail.item.getAttribute('data-sort');
@@ -195,10 +207,26 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
           </ListItemStandard>
         )}
         {showFilter && (
-          //todo maybe need to enhance Input selection after ui5-webcomponents issue has been fixed (undefined is displayed as val)
-          <ListItemCustom type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown}>
+          <ListItemCustom type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown} accessibleName={filterText}>
             <FlexBox alignItems={FlexBoxAlignItems.Center}>
-              <Icon name={iconFilter} className={classNames.filterIcon} aria-hidden />
+              <Icon
+                name={iconFilter}
+                className={classNames.filterIcon}
+                aria-hidden
+                style={{
+                  minWidth: filterStyles.iconDimensions,
+                  minHeight: filterStyles.iconDimensions
+                }}
+              />
+              <Text
+                maxLines={1}
+                className={classNames.filterText}
+                style={{
+                  fontSize: filterStyles.fontSize
+                }}
+              >
+                {filterText}
+              </Text>
               <Filter column={column} popoverRef={ref} />
             </FlexBox>
           </ListItemCustom>