From 43da99312e447d17237ba874b5b3db817d7dd7f3 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 14 Nov 2024 15:48:21 -0800 Subject: [PATCH] docs: Fixing virtualized list example being skipped when tabbing forward. --- .../stories/src/List/VirtualizedList.stories.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-list-preview/stories/src/List/VirtualizedList.stories.tsx b/packages/react-components/react-list-preview/stories/src/List/VirtualizedList.stories.tsx index eb78c2ca347c7..572ecde54902c 100644 --- a/packages/react-components/react-list-preview/stories/src/List/VirtualizedList.stories.tsx +++ b/packages/react-components/react-list-preview/stories/src/List/VirtualizedList.stories.tsx @@ -207,7 +207,7 @@ const useTextStyle = makeResetStyles({ }); const CountriesList = React.forwardRef((props: React.ComponentProps, ref) => ( - + )); export const VirtualizedList = () => { @@ -241,7 +241,12 @@ VirtualizedList.parameters = { 'by using the `tabIndex={0}` property on the List.', '', '> ⚠️ _It is important to manually set `aria-setsize` and `aria-posinset` attributes on the list items, since_', - '_the virualization will only render the visible items. Relying on the DOM state for these attributes will not work._', + '_the virtualization will only render the visible items. Relying on the DOM state for these attributes will not work._', + '', + '> ⚠️ _There is a weird issue when using `react-window` with `tabster` where adding `tab-index={0}` to the `List` while', + 'having a mover for arrow navigation causes the tab key to skip the list when moving forward, but not backwards.', + 'Since we do not need to support arrow navigation with non-interactive list items, we can set `data-tabster={undefined}`', + 'to prevent this issue._', ].join('\n'), }, },