diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx index 070df1c3435..18d2501c3c9 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx +++ b/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(null); - const listRef = useRef(null); + const listRef = useRef(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,16 +187,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 +221,25 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { icon={iconSortDescending} data-sort="desc" text={sortDescendingText} + accessible-role="MenuItem" /> )} {isSortedDescending && ( - + )} {showFilter && ( - + @@ -231,6 +258,7 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { icon={iconGroup} data-sort={'group'} text={column.isGrouped ? ungroupText : groupText} + accessible-role="MenuItem" /> )}