Skip to content

Commit 0ef52ef

Browse files
committed
fix Talkback and NVDA announcements for loading spinner
1 parent da166f2 commit 0ef52ef

File tree

4 files changed

+8
-9
lines changed

4 files changed

+8
-9
lines changed

packages/react-aria-components/src/GridList.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,6 @@ export interface GridListLoadingIndicatorProps extends StyleProps {
512512
}
513513

514514
export const UNSTABLE_GridListLoadingIndicator = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadingIndicatorProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
515-
let state = useContext(ListStateContext)!;
516515
let {isVirtualized} = useContext(CollectionRendererContext);
517516

518517
let renderProps = useRenderProps({
@@ -527,13 +526,11 @@ export const UNSTABLE_GridListLoadingIndicator = createLeafComponent('loader', f
527526
<div
528527
role="row"
529528
// TODO: do we need any of the other row props from useGridListItem? Rather not grab too much if this is all we need
530-
aria-rowindex={isVirtualized ? state.collection.size + 1 : undefined}
529+
aria-rowindex={isVirtualized ? item.index + 1 : undefined}
531530
ref={ref}
532531
{...mergeProps(filterDOMProps(props as any))}
533532
{...renderProps}>
534533
<div
535-
// TODO: test accessibility of this. For some reason the useGridListItem hook includes this still even when not virtualized
536-
// which doesn't seem right
537534
aria-colindex={isVirtualized ? 1 : undefined}
538535
role="gridcell">
539536
{renderProps.children}

packages/react-aria-components/src/ListBox.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -501,10 +501,14 @@ export const UNSTABLE_ListBoxLoadingIndicator = createLeafComponent('loader', fu
501501
defaultClassName: 'react-aria-ListBoxLoadingIndicator',
502502
values: null
503503
});
504-
let optionProps = {};
504+
505+
let optionProps = {
506+
// For Android talkback
507+
tabIndex: -1
508+
};
505509

506510
if (isVirtualized) {
507-
optionProps['aria-posinset'] = state.collection.size + 1;
511+
optionProps['aria-posinset'] = item.index + 1;
508512
optionProps['aria-setsize'] = state.collection.size;
509513
}
510514

packages/react-aria-components/src/Table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1385,7 +1385,7 @@ export const UNSTABLE_TableLoadingIndicator = createLeafComponent('loader', func
13851385
let style = {};
13861386

13871387
if (isVirtualized) {
1388-
rowProps['aria-rowindex'] = state.collection.headerRows.length + state.collection.size ;
1388+
rowProps['aria-rowindex'] = item.index + 1 + state.collection.headerRows.length;
13891389
rowHeaderProps['aria-colspan'] = numColumns;
13901390
style = {display: 'contents'};
13911391
} else {

packages/react-aria-components/stories/ComboBox.stories.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,8 +336,6 @@ export const AsyncVirtualizedCollectionRenderCombobox = () => {
336336
<MyListBoxItem id={item.name}>{item.name}</MyListBoxItem>
337337
)}
338338
</Collection>
339-
{/* TODO: loading indicator and/or renderEmpty? The spinner shows at weird times and flickers if
340-
no delay is added, might be nice to support loadingState */}
341339
{list.isLoading && <MyListBoxLoaderIndicator />}
342340
</ListBox>
343341
</Virtualizer>

0 commit comments

Comments
 (0)