chore(combobox): resolve a11y issue with posinset attribute

twilio-labs · Oct 13, 2021 · b83ef38 · b83ef38
1 parent b0be5aa
commit b83ef38
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx b/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx
@@ -67,23 +67,23 @@ describe('Combobox - Virtualization', () => {
 
       expect(first).toHaveAttribute('transform', 'translateY(8px)');
       expect(first).toHaveAttribute('aria-setsize', '5');
-      expect(first).toHaveAttribute('aria-posinset', '0');
+      expect(first).toHaveAttribute('aria-posinset', '1');
 
       expect(second).toHaveAttribute('transform', 'translateY(8px)');
       expect(second).toHaveAttribute('aria-setsize', '5');
-      expect(second).toHaveAttribute('aria-posinset', '1');
+      expect(second).toHaveAttribute('aria-posinset', '2');
 
       expect(third).toHaveAttribute('transform', 'translateY(44px)');
       expect(third).toHaveAttribute('aria-setsize', '5');
-      expect(third).toHaveAttribute('aria-posinset', '2');
+      expect(third).toHaveAttribute('aria-posinset', '3');
 
       expect(fourth).toHaveAttribute('transform', 'translateY(80px)');
       expect(fourth).toHaveAttribute('aria-setsize', '5');
-      expect(fourth).toHaveAttribute('aria-posinset', '3');
+      expect(fourth).toHaveAttribute('aria-posinset', '4');
 
       expect(fifth).toHaveAttribute('transform', 'translateY(116px)');
       expect(fifth).toHaveAttribute('aria-setsize', '5');
-      expect(fifth).toHaveAttribute('aria-posinset', '4');
+      expect(fifth).toHaveAttribute('aria-posinset', '5');
     });
 
     it('should call the measure ref from virtualize when component is mounted', () => {
@@ -159,23 +159,23 @@ describe('Combobox - Virtualization', () => {
 
       expect(first).toHaveAttribute('transform', 'translateY(8px)');
       expect(first).toHaveAttribute('aria-setsize', '5');
-      expect(first).toHaveAttribute('aria-posinset', '0');
+      expect(first).toHaveAttribute('aria-posinset', '1');
 
       expect(second).toHaveAttribute('transform', 'translateY(8px)');
       expect(second).toHaveAttribute('aria-setsize', '5');
-      expect(second).toHaveAttribute('aria-posinset', '1');
+      expect(second).toHaveAttribute('aria-posinset', '2');
 
       expect(third).toHaveAttribute('transform', 'translateY(44px)');
       expect(third).toHaveAttribute('aria-setsize', '5');
-      expect(third).toHaveAttribute('aria-posinset', '2');
+      expect(third).toHaveAttribute('aria-posinset', '3');
 
       expect(fourth).toHaveAttribute('transform', 'translateY(80px)');
       expect(fourth).toHaveAttribute('aria-setsize', '5');
-      expect(fourth).toHaveAttribute('aria-posinset', '3');
+      expect(fourth).toHaveAttribute('aria-posinset', '4');
 
       expect(fifth).toHaveAttribute('transform', 'translateY(116px)');
       expect(fifth).toHaveAttribute('aria-setsize', '5');
-      expect(fifth).toHaveAttribute('aria-posinset', '4');
+      expect(fifth).toHaveAttribute('aria-posinset', '5');
     });
 
     it('should call the measure ref from virtualize when component is mounted', () => {

diff --git a/packages/paste-core/components/combobox/src/ComboboxItems.tsx b/packages/paste-core/components/combobox/src/ComboboxItems.tsx
@@ -44,7 +44,7 @@ const ComboboxItems: React.FC<ComboboxItemsProps> = ({
               variant="default"
               startHeight={virtualItem.start}
               aria-setsize={items.length}
-              aria-posinset={virtualItemIndex}
+              aria-posinset={virtualItemIndex + 1}
             >
               {item}
             </ComboboxListboxOption>