fix aria-rowindex

Author: yihuiliao

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -291,7 +291,10 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
   });
 
   if (isVirtualized) {
-    rowProps['aria-rowindex'] = node.index + 1;
+    let {collection} = state;
+    let nodes = [...collection];
+    // TODO: refactor ListCollection to store an absolute index of a node's position?
+    rowProps['aria-rowindex'] = nodes.find(node => node.type === 'section') ? [...collection.getKeys()].filter((key) => collection.getItem(key)?.type !== 'section').findIndex((key) => key === node.key) + 1 : node.index + 1;
   }
 
   let gridCellProps = {

packages/@react-aria/gridlist/src/useGridListSection.ts

@@ -10,12 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, Node as RSNode} from '@react-types/shared';
+import type {ListState} from '@react-stately/list';
 import {useLabels, useSlotId} from '@react-aria/utils';
 
 export interface AriaGridListSectionProps {
   /** An accessibility label for the section. Required if `heading` is not present. */
-  'aria-label'?: string
+  'aria-label'?: string,
+  /** Whether the list row is contained in a virtual scroller. */
+  isVirtualized?: boolean,
+  /** An object representing the list item. Contains all the relevant information that makes up the list row. */
+  node: RSNode<unknown>
 }
 
 export interface GridListSectionAria {
@@ -34,17 +39,26 @@ export interface GridListSectionAria {
  * See `useGridList` for more details about grid list.
  * @param props - Props for the section.
  */
-export function useGridListSection(props: AriaGridListSectionProps): GridListSectionAria {
-  let {'aria-label': ariaLabel} = props;
+export function useGridListSection<T>(props: AriaGridListSectionProps, state: ListState<T>): GridListSectionAria {
+  let {'aria-label': ariaLabel, isVirtualized, node} = props;
   let headingId = useSlotId();
   let labelProps = useLabels({
     'aria-label': ariaLabel,
     'aria-labelledby': headingId
   });
+  let rowIndex: number | undefined =  undefined;
+
+  if (isVirtualized) {
+    let {collection} = state;
+    let filteredCollection = [...collection.getKeys()].filter((key) => collection.getItem(key)?.type !== 'header');
+    let prevItem = node.prevKey ? state.collection.getItem(node.prevKey) : undefined;
+    rowIndex = prevItem ? filteredCollection.findIndex((key) => key === prevItem.key) + 2 : node.index + 1;
+  }
 
   return {
     rowProps: {
-      role: 'row'
+      role: 'row',
+      'aria-rowindex': rowIndex
     },
     rowHeaderProps: {
       id: headingId,

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

@@ -571,11 +571,13 @@ export interface GridListSectionProps<T> extends SectionProps<T> {}
 export const GridListSection = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: GridListSectionProps<T>, ref: ForwardedRef<HTMLElement>, item: Node<T>) => {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
-  let {CollectionBranch} = useContext(CollectionRendererContext);
+  let {CollectionBranch, isVirtualized} = useContext(CollectionRendererContext);
   let headingRef = useRef(null);
   let {rowHeaderProps, rowProps, rowGroupProps} = useGridListSection({
-    'aria-label': props['aria-label'] ?? undefined
-  });
+    'aria-label': props['aria-label'] ?? undefined,
+    isVirtualized,
+    node: item
+  }, state);
   let renderProps = useRenderProps({
     defaultClassName: 'react-aria-GridListSection',
     className: props.className,

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

@@ -212,7 +212,7 @@ export function VirtualizedGridListSection() {
   let sections: {id: string, name: string, children: {id: string, name: string}[]}[] = [];
   for (let s = 0; s < 10; s++) {
     let items: {id: string, name: string}[] = [];
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 3; i++) {
       items.push({id: `item_${s}_${i}`, name: `Section ${s}, Item ${i}`});
     }
     sections.push({id: `section_${s}`, name: `Section ${s}`, children: items});