microsoft · smhigley · Feb 20, 2025 · Dec 31, 2024
@@ -18,7 +18,12 @@ export const Default = () => {
     <VirtualizerScrollView
       numItems={childLength}
       itemSize={100}
-      container={{ role: 'list', style: { maxHeight: '80vh' } }}
+      container={{
+        role: 'list',
+        'aria-label': `Virtualized list with ${childLength} children`,
+        tabIndex: 0,
+        style: { maxHeight: '80vh' },
+      }}
     >
       {(index: number) => {
         return (

@@ -42,7 +42,12 @@ export const ScrollTo = () => {
       <VirtualizerScrollView
         numItems={childLength}
         itemSize={100}
-        container={{ role: 'list', style: { maxHeight: '80vh' } }}
+        container={{
+          role: 'list',
+          'aria-label': `Virtualized list with ${childLength} children`,
+          tabIndex: 0,
+          style: { maxHeight: '80vh' },
+        }}
         imperativeRef={scrollRef}
       >
         {(index: number) => {

@@ -24,7 +24,12 @@ export const SnapToAlignment = () => {
       numItems={childLength}
       itemSize={100}
       axis={'horizontal'}
-      container={{ role: 'list', className: styles.container }}
+      container={{
+        role: 'list',
+        'aria-label': `Virtualized list with ${childLength} children`,
+        tabIndex: 0,
+        className: styles.container,
+      }}
       enablePagination
     >
       {(index: number) => {

@@ -0,0 +1,3 @@
+## Accessibility
+
+When the ScrollView has no focusable children, the container itself should be given `tabIndex: 0` so that it can be scrolled with the keyboard. If it does contain focusable descendants, this is not necessary.
@@ -1,5 +1,6 @@
 import { VirtualizerScrollView } from '@fluentui/react-virtualizer';
 import descriptionMd from './VirtualizerScrollViewDescription.md';
+import accessibilityMd from './VirtualizerScrollViewAccessibility.md';
 
 export { Default } from './Default.stories';
 export { ScrollTo } from './ScrollTo.stories';
@@ -11,7 +12,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd].join('\n'),
+        component: [descriptionMd, accessibilityMd].join('\n'),
       },
     },
   },

@@ -37,7 +37,12 @@ export const AutoMeasure = () => {
       numItems={childLength}
       // We can use itemSize to set average height and reduce unknown whitespace
       itemSize={minHeight + maxHeightIncrease / 2.0 + 100}
-      container={{ role: 'list', style: { maxHeight: '80vh', gap: '20px' } }}
+      container={{
+        role: 'list',
+        'aria-label': `Virtualized list with ${childLength} children`,
+        tabIndex: 0,
+        style: { maxHeight: '80vh', gap: '20px' },
+      }}
       bufferItems={1}
       bufferSize={minHeight / 2.0}
       gap={20}

@@ -42,7 +42,12 @@ export const Default = () => {
       numItems={childLength}
       itemSize={minHeight + maxHeightMod / 2.0}
       getItemSize={getItemSizeCallback}
-      container={{ role: 'list', style: { maxHeight: '80vh' } }}
+      container={{
+        role: 'list',
+        'aria-label': `Virtualized list with ${childLength} children`,
+        tabIndex: 0,
+        style: { maxHeight: '80vh' },
+      }}
       bufferItems={1}
       bufferSize={minHeight / 2.0}
     >

@@ -41,7 +41,12 @@ export const ScrollLoading = () => {
       numItems={childLength}
       itemSize={minHeight}
       getItemSize={getItemSizeCallback}
-      container={{ role: 'list', style: { maxHeight: '80vh' } }}
+      container={{
+        role: 'list',
+        'aria-label': `Virtualized list with ${childLength} children`,
+        tabIndex: 0,
+        style: { maxHeight: '80vh' },
+      }}
       enableScrollLoad={true}
     >
       {(index: number, isScrolling = false) => {

@@ -62,14 +62,19 @@ export const ScrollTo = () => {
     <div>
       <Input defaultValue={'0'} onChange={onChangeGoToIndex} />
       <Button onClick={scrollToIndex}>{'GoTo'}</Button>
-      <Text>{message}</Text>
+      <Text aria-live="polite">{message}</Text>
       <VirtualizerScrollViewDynamic
         numItems={childLength}
         itemSize={100}
         getItemSize={getItemSizeCallback}
         imperativeRef={scrollRef}
         imperativeVirtualizerRef={sizeRef}
-        container={{ role: 'list', style: { maxHeight: '80vh' } }}
+        container={{
+          role: 'list',
+          'aria-label': `Virtualized list with ${childLength} children`,
+          tabIndex: 0,
+          style: { maxHeight: '80vh' },
+        }}
       >
         {(index: number) => {
           const backgroundColor = index % 2 ? '#FFFFFF' : '#ABABAB';

@@ -32,7 +32,12 @@ export const SnapToAlignment = () => {
       numItems={childLength}
       // We can use itemSize to set an average height for minimal size change impact
       itemSize={minHeight + maxHeightIncrease / 2}
-      container={{ role: 'list', style: { maxHeight: '80vh' } }}
+      container={{
+        role: 'list',
+        'aria-label': `Virtualized list with ${childLength} children`,
+        tabIndex: 0,
+        style: { maxHeight: '80vh' },
+      }}
       enablePagination
     >
       {(index: number) => {

@@ -0,0 +1,3 @@
+## Accessibility
+
+When the ScrollView has no focusable children, the container itself should be given `tabIndex: 0` so that it can be scrolled with the keyboard. If it does contain focusable descendants, this is not necessary.
@@ -1,5 +1,6 @@
 import { VirtualizerScrollViewDynamic } from '@fluentui/react-virtualizer';
 import descriptionMd from './VirtualizerScrollViewDynamicDescription.md';
+import accessibilityMd from './VirtualizerScrollViewDynamicAccessibility.md';
 
 export { AutoMeasure } from './AutoMeasure.stories';
 export { Default } from './Default.stories';
@@ -13,7 +14,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd].join('\n'),
+        component: [descriptionMd, accessibilityMd].join('\n'),
       },
     },
   },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## Accessibility

		When the ScrollView has no focusable children, the container itself should be given `tabIndex: 0` so that it can be scrolled with the keyboard. If it does contain focusable descendants, this is not necessary.