Added scroll to feature to the menu button example using aria-activedescendant

examples/menu-button/js/menu-button-actions-active-descendant.js

@@ -61,13 +61,28 @@ class MenuButtonActionsActiveDescendant {
     );
   }
 
+  isMenuitemInView(menuitem) {
+    var bounding = menuitem.getBoundingClientRect();
+    return (
+      bounding.top >= 0 &&
+      bounding.left >= 0 &&
+      bounding.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      bounding.right <=
+        (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
   setFocusToMenuitem(newMenuitem) {
     for (var i = 0; i < this.menuitemNodes.length; i++) {
       var menuitem = this.menuitemNodes[i];
       if (menuitem === newMenuitem) {
         this.currentMenuitem = newMenuitem;
         menuitem.classList.add('focus');
         this.menuNode.setAttribute('aria-activedescendant', newMenuitem.id);
+        if (!this.isMenuitemInView(newMenuitem)) {
+          newMenuitem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
       } else {
         menuitem.classList.remove('focus');
       }

examples/menu-button/menu-button-actions-active-descendant.html

@@ -79,6 +79,9 @@ <h2 id="ex_label">Example</h2>
       <section>
         <h2>Accessibility Features</h2>
         <ol>
+          <li>
+            The <code>menuitem</code> referenced by <code>aria-activedescendant</code> is scrolled into view when it is not visible in the graphical rendering.  This can occur under many conditions, but is most common when people with visual impairments use a browser's zoom feature to increase the size of content.
+          </li>
           <li>A down arrow icon is included to help users understand that the button opens a menu.</li>
           <li>To support operating system high contrast settings:
             <ul>

test/tests/menu-button_actions-active-descendant.js

@@ -32,9 +32,8 @@ const checkFocus = function (t, selector, index) {
 const scrollToAndOpenMenu = async function (t) {
   // Click the "last action" box to scroll the menu into view before opening the menu and sending enter
   // This prevents a bug where when you click the menu button, the menu is opened and the page scrolls down
-  // to reveal the menu, which places the curser over the last menu item, which sets aria-activedescendant to
+  // to reveal the menu, which places the cursor over the last menu item, which sets aria-activedescendant to
   // the last item in the list.
-  await t.context.session.findElement(By.css(ex.lastActionSelector)).click();
 
   await t.context.session.findElement(By.css(ex.menubuttonSelector)).click();