From 9caba74694a633a8356ddbc2c64afa00a6a4c075 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 12 Mar 2026 14:43:57 +0100 Subject: [PATCH 1/3] fix(AnalyticalTable): use "menu" role for columns popover --- .../defaults/Column/ColumnHeaderModal.tsx | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx index 070df1c3435..f73df647a4e 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx @@ -1,7 +1,9 @@ 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'; @@ -22,7 +24,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 +48,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { const showSort = column.canSort; const ref = useRef(null); - const listRef = useRef(null); + const listRef = useRef(null); const i18nBundle = useI18nBundle('@ui5/webcomponents-react'); @@ -145,7 +149,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { } })(); - const handleCustomLiKeyDown = (e) => { + const handleCustomLiKeyDown: ListItemCustomPropTypes['onKeyDown'] = (e) => { if (e.key === 'Enter') { setOpen(false); } @@ -181,16 +185,24 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { onClick={stopPropagation} onClose={onAfterClose} onOpen={onAfterOpen} + accessibleRole={PopupAccessibleRole.None} data-component-name="ATHeaderPopover" > {isSortedAscending && ( - + )} {showSort && !isSortedAscending && ( { icon={iconSortAscending} data-sort="asc" text={sortAscendingText} + accessible-role="MenuItem" /> )} {showSort && !isSortedDescending && ( @@ -206,13 +219,25 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { icon={iconSortDescending} data-sort="desc" text={sortDescendingText} + accessible-role="MenuItem" /> )} {isSortedDescending && ( - + )} {showFilter && ( - + @@ -231,6 +256,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { icon={iconGroup} data-sort={'group'} text={column.isGrouped ? ungroupText : groupText} + accessible-role="MenuItem" /> )} From 0770c370a25a1db7f62193c4eb829c9c0a4f96e3 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 12 Mar 2026 15:46:16 +0100 Subject: [PATCH 2/3] Update ColumnHeaderModal.tsx --- .../AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx index f73df647a4e..e50afa46cd4 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx @@ -10,6 +10,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 type { Ui5DomRef } from '@ui5/webcomponents-react-base/types'; import { useEffect, useId, useRef } from 'react'; import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js'; import { TextAlign } from '../../../../enums/TextAlign.js'; @@ -129,7 +130,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { }; const onAfterOpen = () => { - listRef.current?.children?.[0]?.focus(); + void (listRef.current?.children?.[0] as Ui5DomRef)?.focus(); }; const horizontalAlign = (() => { From c7badb2a3f20423f101818fa11f6599755c78d82 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 12 Mar 2026 16:17:12 +0100 Subject: [PATCH 3/3] Update ColumnHeaderModal.tsx --- .../AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx index e50afa46cd4..18d2501c3c9 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx @@ -9,8 +9,9 @@ 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 type { Ui5DomRef } from '@ui5/webcomponents-react-base/types'; +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';