diff --git a/change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json b/change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json new file mode 100644 index 00000000000000..4af0cf8c8459cc --- /dev/null +++ b/change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: Cell actions should have correct background when row focused within", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json b/change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json new file mode 100644 index 00000000000000..d0fd5d37508364 --- /dev/null +++ b/change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: focus-within attribute no longer the same as focus-visible", + "packageName": "@fluentui/react-tabster", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts index a37db7b444d68c..4cd0fc69b2cec3 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts +++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts @@ -1,6 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'; -import { useFocusWithin } from '@fluentui/react-tabster'; +import { getNativeElementProps } from '@fluentui/react-utilities'; import type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types'; /** @@ -21,7 +20,7 @@ export const useTableCellActions_unstable = ( root: 'div', }, root: getNativeElementProps('div', { - ref: useMergedRefs(ref, useFocusWithin()), + ref, ...props, }), visible: props.visible ?? false, diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts index 7f194415f60771..ad6377c4483b3a 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts +++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts @@ -1,7 +1,6 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; export const tableCellActionsClassNames: SlotClassNames = { root: 'fui-TableCellActions', @@ -18,13 +17,6 @@ const useStyles = makeStyles({ transform: 'translateY(-50%)', opacity: 0, marginLeft: 'auto', - - ...createCustomFocusIndicatorStyle( - { - opacity: 1, - }, - { selector: 'focus-within' }, - ), }, visible: { diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts index 35ffa820aecd59..2707d66c523eee 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'; import type { TableRowProps, TableRowState } from './TableRow.types'; import { useTableContext } from '../../contexts/tableContext'; -import { useFocusVisible } from '@fluentui/react-tabster'; +import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster'; /** * Create the state required to render TableRow. @@ -17,13 +17,14 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref