fix(AnalyticalTable): use "menu" role for columns popover (#8316)

Fixes #8313

Author: Lukas742

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

@@ -1,13 +1,17 @@
 import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
+import ListAccessibleRole from '@ui5/webcomponents/dist/types/ListAccessibleRole.js';
 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 PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.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 } from '@ui5/webcomponents-react-base';
+import { useI18nBundle } from '@ui5/webcomponents-react-base/hooks';
+import type { Ui5DomRef } from '@ui5/webcomponents-react-base/internal/types';
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/internal/utils';
 import { useEffect, useId, useRef } from 'react';
 import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
 import { TextAlign } from '../../../../enums/TextAlign.js';
@@ -22,7 +26,9 @@ import {
 import { stopPropagation } from '../../../../internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '../../../../internal/utils.js';
 import { Icon } from '../../../../webComponents/Icon/index.js';
+import type { ListDomRef } from '../../../../webComponents/List/index.js';
 import { List } from '../../../../webComponents/List/index.js';
+import type { ListItemCustomPropTypes } from '../../../../webComponents/ListItemCustom/index.js';
 import { ListItemCustom } from '../../../../webComponents/ListItemCustom/index.js';
 import { ListItemStandard } from '../../../../webComponents/ListItemStandard/index.js';
 import type { PopoverDomRef, PopoverPropTypes } from '../../../../webComponents/Popover/index.js';
@@ -44,7 +50,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
   const showSort = column.canSort;
 
   const ref = useRef<PopoverDomRef>(null);
-  const listRef = useRef(null);
+  const listRef = useRef<ListDomRef>(null);
 
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
 
@@ -125,7 +131,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
   };
 
   const onAfterOpen = () => {
-    listRef.current?.children?.[0]?.focus();
+    void (listRef.current?.children?.[0] as Ui5DomRef)?.focus();
   };
 
   const horizontalAlign = (() => {
@@ -145,7 +151,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
     }
   })();
 
-  const handleCustomLiKeyDown = (e) => {
+  const handleCustomLiKeyDown: ListItemCustomPropTypes['onKeyDown'] = (e) => {
     if (e.key === 'Enter') {
       setOpen(false);
     }
@@ -181,23 +187,32 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
       onClick={stopPropagation}
       onClose={onAfterClose}
       onOpen={onAfterOpen}
+      accessibleRole={PopupAccessibleRole.None}
       data-component-name="ATHeaderPopover"
     >
       <List
         onItemClick={handleSort}
         ref={listRef}
         onKeyDown={handleListKeyDown}
+        accessibleRole={ListAccessibleRole.Menu}
         data-component-name="ATHeaderPopoverList"
       >
         {isSortedAscending && (
-          <ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear" text={clearSortingText} />
+          <ListItemStandard
+            type={ListItemType.Active}
+            icon={iconDecline}
+            data-sort="clear"
+            text={clearSortingText}
+            accessible-role="MenuItem"
+          />
         )}
         {showSort && !isSortedAscending && (
           <ListItemStandard
             type={ListItemType.Active}
             icon={iconSortAscending}
             data-sort="asc"
             text={sortAscendingText}
+            accessible-role="MenuItem"
           />
         )}
         {showSort && !isSortedDescending && (
@@ -206,13 +221,25 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
             icon={iconSortDescending}
             data-sort="desc"
             text={sortDescendingText}
+            accessible-role="MenuItem"
           />
         )}
         {isSortedDescending && (
-          <ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear" text={clearSortingText} />
+          <ListItemStandard
+            type={ListItemType.Active}
+            icon={iconDecline}
+            data-sort="clear"
+            text={clearSortingText}
+            accessible-role="MenuItem"
+          />
         )}
         {showFilter && (
-          <ListItemCustom type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown} accessibleName={filterText}>
+          <ListItemCustom
+            type={ListItemType.Active}
+            onKeyDown={handleCustomLiKeyDown}
+            accessibleName={filterText}
+            accessible-role="MenuItem"
+          >
             <FlexBox alignItems={FlexBoxAlignItems.Center}>
               <Icon name={iconFilter} className={classNames.filterIcon} mode={IconMode.Decorative} />
               <Text maxLines={1} className={classNames.filterText} id={`${uniqueId}-filter-text`}>
@@ -231,6 +258,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
             icon={iconGroup}
             data-sort={'group'}
             text={column.isGrouped ? ungroupText : groupText}
+            accessible-role="MenuItem"
           />
         )}
       </List>