fix(AnalyticalTable): improve screen reader announcement for filter input (#7300)

Fixes #7298

Author: Lukas742

packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx

@@ -9,7 +9,7 @@ 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 } from '@ui5/webcomponents-react-base';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
 import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
 import { TextAlign } from '../../../../enums/TextAlign.js';
 import {
@@ -31,20 +31,21 @@ import { Popover } from '../../../../webComponents/Popover/index.js';
 import { Text } from '../../../../webComponents/Text/index.js';
 import { FlexBox } from '../../../FlexBox/index.js';
 import type { TableInstanceWithPopoverProps } from '../../types/index.js';
+import { RenderColumnTypes } from '../../types/index.js';
 
 export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
   const { setOpen, openerRef } = instance.popoverProps;
   const { column, state, webComponentsReactProperties } = instance;
   const { isRtl, groupBy } = state;
   const { onGroup, onSort, classes: classNames } = webComponentsReactProperties;
+  const uniqueId = useId();
 
   const showFilter = column.canFilter;
   const showGroup = column.canGroupBy;
   const showSort = column.canSort;
 
   const ref = useRef<PopoverDomRef>(null);
   const listRef = useRef(null);
-  const { Filter } = column;
 
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
 
@@ -231,10 +232,14 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
                 style={{
                   fontSize: filterStyles.fontSize
                 }}
+                id={`${uniqueId}-filter-text`}
               >
                 {filterText}
               </Text>
-              <Filter column={column} popoverRef={ref} />
+              {column.render(RenderColumnTypes.Filter, {
+                accessibleNameRef: `${uniqueId}-filter-text`,
+                popoverRef: ref
+              })}
             </FlexBox>
           </ListItemCustom>
         )}

packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx

@@ -4,7 +4,7 @@ import type { InputPropTypes } from '../../../../webComponents/Input/index.js';
 import { Input } from '../../../../webComponents/Input/index.js';
 import type { FilterProps } from '../../types/index.js';
 
-export const DefaultFilterComponent = ({ column }: FilterProps) => {
+export const DefaultFilterComponent = ({ column, accessibleNameRef }: FilterProps) => {
   const handleInput: InputPropTypes['onInput'] = useCallback(
     (e) => {
       // Setting the filter to `undefined` removes it
@@ -19,7 +19,15 @@ export const DefaultFilterComponent = ({ column }: FilterProps) => {
     }
   };
 
-  return <Input onInput={handleInput} value={column.filterValue ?? ''} showClearIcon onKeyDown={handleKeyDown} />;
+  return (
+    <Input
+      onInput={handleInput}
+      value={column.filterValue ?? ''}
+      showClearIcon
+      onKeyDown={handleKeyDown}
+      accessibleNameRef={accessibleNameRef}
+    />
+  );
 };
 
 DefaultFilterComponent.displayName = 'DefaultFilterComponent';

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -1,6 +1,15 @@
 import type { ScrollToOptions } from '@tanstack/react-virtual';
 import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
-import type { ComponentType, DependencyList, Dispatch, MutableRefObject, ReactNode, Ref, SetStateAction } from 'react';
+import type {
+  ComponentType,
+  DependencyList,
+  Dispatch,
+  MutableRefObject,
+  ReactNode,
+  Ref,
+  RefObject,
+  SetStateAction
+} from 'react';
 import type {
   AnalyticalTablePopinDisplay,
   AnalyticalTableScaleWidthMode,
@@ -341,7 +350,14 @@ export interface TableInstanceWithPopoverProps extends TableInstance {
 
 export interface FilterProps {
   column: ColumnType;
-  popoverRef: MutableRefObject<PopoverDomRef>;
+  /**
+   * `Popover` DOM RefObject
+   */
+  popoverRef: RefObject<PopoverDomRef>;
+  /**
+   * `accessibleNameRef` for filter `Input`
+   */
+  accessibleNameRef: string;
 }
 
 export interface AnalyticalTableColumnDefinition {