fix: set aria-setsize attribute on items instead of the scroller (#5254…

…) (#5257) Co-authored-by: Steve Repsher <[email protected]>
vaadin · Jan 7, 2023 · 9b6cd78 · 9b6cd78
1 parent de68119
commit 9b6cd78
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/packages/combo-box/src/vaadin-combo-box-scroller.js b/packages/combo-box/src/vaadin-combo-box-scroller.js
@@ -237,8 +237,6 @@ export class ComboBoxScroller extends PolymerElement {
     if (this.__virtualizer && items) {
       this.__virtualizer.size = items.length;
       this.__virtualizer.flush();
-      // Ensure the total count of items is properly announced.
-      this.setAttribute('aria-setsize', items.length);
       this.requestContentUpdate();
     }
   }
@@ -304,6 +302,7 @@ export class ComboBoxScroller extends PolymerElement {
     el.setAttribute('role', this.__getAriaRole(index));
     el.setAttribute('aria-selected', this.__getAriaSelected(focusedIndex, index));
     el.setAttribute('aria-posinset', index + 1);
+    el.setAttribute('aria-setsize', this.items.length);
 
     if (this.theme) {
       el.setAttribute('theme', this.theme);

diff --git a/packages/combo-box/test/aria.test.js b/packages/combo-box/test/aria.test.js
@@ -70,10 +70,6 @@ describe('ARIA', () => {
       expect(scroller.getAttribute('role')).to.equal('listbox');
     });
 
-    it('should set aria-setsize attribute on the scroller', () => {
-      expect(scroller.getAttribute('aria-setsize')).to.equal(comboBox.items.length.toString());
-    });
-
     it('should set aria-controls on the native input', () => {
       expect(input.getAttribute('aria-controls')).to.equal(scroller.id);
     });
@@ -112,6 +108,12 @@ describe('ARIA', () => {
       });
     });
 
+    it('should set aria-setsize attribute on the dropdown items', () => {
+      items.forEach((item) => {
+        expect(item.getAttribute('aria-setsize')).to.equal(comboBox.items.length.toString());
+      });
+    });
+
     it('should set aria-activedescendant on the input', () => {
       expect(input.hasAttribute('aria-activedescendant')).to.be.false;
 

diff --git a/packages/time-picker/test/aria.test.js b/packages/time-picker/test/aria.test.js
@@ -68,10 +68,6 @@ describe('ARIA', () => {
       expect(scroller.getAttribute('role')).to.equal('listbox');
     });
 
-    it('should set aria-setsize attribute on the scroller', () => {
-      expect(scroller.getAttribute('aria-setsize')).to.equal(comboBox.filteredItems.length.toString());
-    });
-
     it('should set aria-controls on the native input', () => {
       expect(input.getAttribute('aria-controls')).to.equal(scroller.id);
     });
@@ -110,6 +106,12 @@ describe('ARIA', () => {
       });
     });
 
+    it('should set aria-setsize attribute on the dropdown items', () => {
+      items.forEach((item) => {
+        expect(item.getAttribute('aria-setsize')).to.equal(comboBox.filteredItems.length.toString());
+      });
+    });
+
     it('should set aria-activedescendant on the input', () => {
       expect(input.hasAttribute('aria-activedescendant')).to.be.false;