Grid Combobox Example: Add scroll into view feature (#2075)

* updated reference table

* Added scrollto features for grid-combo

* fixed linking bug

examples/combobox/grid-combo.html

@@ -81,6 +81,12 @@ <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
     </section>
 
+    <section>
+      <h2>Accessibility Features</h2>
+      <p>Browsers do not manage visibility of elements referenced by <code>aria-activedescendant</code> like they do for elements with focus. When a keyboard event changes the active option in the listbox, the JavaScript scrolls the option referenced by <code>aria-activedescendant</code> into view. Managing <code>aria-activedescendant</code> visibility is essential to accessibility for people who use a browser's zoom feature to increase the size of content.
+      </p>
+    </section>
+
     <section>
       <h2 id="kbd_label">Keyboard Support</h2>
       <p>

examples/combobox/js/grid-combo.js

@@ -198,6 +198,19 @@ aria.GridCombobox.prototype.handleGridClick = function (evt) {
   this.selectItem(selectItem);
 };
 
+aria.GridCombobox.prototype.isElementInView = function (element) {
+  var bounding = element.getBoundingClientRect();
+
+  return (
+    bounding.top >= 0 &&
+    bounding.left >= 0 &&
+    bounding.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    bounding.right <=
+      (window.innerWidth || document.documentElement.clientWidth)
+  );
+};
+
 aria.GridCombobox.prototype.updateResults = function () {
   var searchString = this.input.value;
   var results = this.searchFn(searchString);
@@ -278,6 +291,11 @@ aria.GridCombobox.prototype.hideResults = function () {
   this.rowsCount = 0;
   this.colsCount = 0;
   this.input.setAttribute('aria-activedescendant', '');
+
+  // ensure the input is in view
+  if (!this.isElementInView(this.input)) {
+    this.input.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
 };
 
 aria.GridCombobox.prototype.removeFocusCell = function (rowIndex, colIndex) {
@@ -292,4 +310,9 @@ aria.GridCombobox.prototype.focusCell = function (rowIndex, colIndex) {
   aria.Utils.addClass(row, 'focused');
   var cell = this.getItemAt(rowIndex, colIndex);
   aria.Utils.addClass(cell, 'focused-cell');
+
+  // ensure the cell is in view
+  if (!this.isElementInView(cell)) {
+    cell.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
 };