Merge pull request #560 from hcarmona/master

Fix #369 - Populate aria-owns attribute on iron-list and test
PolymerElements · Oct 17, 2019 · a45e328 · a45e328
2 parents a05e90a + 7d8a1ad
commit a45e328
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/iron-list.js b/iron-list.js
@@ -1331,10 +1331,19 @@ Polymer({
         }
       });
     } else {
+      const order = [];
       this._iterateItems(function(pidx, vidx) {
-        this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
+        const item = this._physicalItems[pidx];
+        this.translate3d(0, y + 'px', 0, item);
         y += this._physicalSizes[pidx];
+        const itemId = item.id;
+        if (itemId) {
+          order.push(itemId);
+        }
       });
+      if (order.length) {
+        this.setAttribute('aria-owns', order.join(' '));
+      }
     }
   },
 

diff --git a/test/basic.html b/test/basic.html
@@ -151,6 +151,42 @@
       assert.equal(list.firstVisibleIndex, 99);
     });
 
+    test('expected aria-owns while scrolling', function() {
+      list.items = buildDataSet(100);
+      PolymerFlush();
+
+      const getExpectedAriaOwns = () => {
+        return Array
+            // Physical children.
+            .from(list.querySelectorAll('div.item'))
+
+            // Skip selected node.
+            .filter(child => child.getBoundingClientRect().top >= -10000)
+
+            // Sort by |top|.
+            .sort((left, right) => {
+              return left.getBoundingClientRect().top -
+                  right.getBoundingClientRect().top;
+            })
+
+            // Get IDs.
+            .map(child => child.id)
+
+            // Create expected |aria-owned|.
+            .join(' ');
+      };
+
+      // Make sure we're virtualizing nodes.
+      assert.isTrue(list.querySelectorAll('div.item').length < list.items.length);
+      assert.isTrue(list.querySelectorAll('div.item').length > 0);
+
+      // Scroll by 7 because it's not a 'nice round number'.
+      for (let i = 0; i < list.items.length; i += 7) {
+        list.scrollToIndex(i);
+        assert.equal(list.getAttribute('aria-owns'), getExpectedAriaOwns());
+      }
+    });
+
     test('scroll to index while not attached', function() {
       var tmpList = document.createElement('iron-list');
       dom(tmpList).appendChild(document.createElement('template'));

diff --git a/test/fixtures/x-list.js b/test/fixtures/x-list.js
@@ -41,7 +41,7 @@ Polymer({
 
     <iron-list items="[[data]]" as="item" id="list">
       <template>
-        <div class="item" selected\$="[[selected]]">
+        <div id$="xl[[index]]" class="item" selected\$="[[selected]]">
           <div style\$="[[_computedItemHeight(item)]]" tabindex\$="[[_computedTabIndex(tabIndex, useTabIndex)]]" hidden\$="[[primitive]]">[[item.index]]</div>
           <div style\$="[[_computedItemHeight(item)]]" tabindex\$="[[_computedTabIndex(tabIndex, useTabIndex)]]" hidden\$="[[!primitive]]">[[item]]</div>
         </div>