Fix contextmenu / dropdown field menu accessibility (#3892)

* Fix contextmenu and dropdown field accessibility

core/field_dropdown.js

@@ -273,10 +273,6 @@ Blockly.FieldDropdown.prototype.showEditor_ = function(opt_e) {
   var menuElement = /** @type {!Element} */ (this.menu_.getElement());
   Blockly.utils.dom.addClass(menuElement, 'blocklyDropdownMenu');
 
-  Blockly.utils.aria.setState(menuElement,
-      Blockly.utils.aria.State.ACTIVEDESCENDANT,
-      this.selectedMenuItem_ ? this.selectedMenuItem_.getId() : '');
-
   if (this.getConstants().FIELD_DROPDOWN_COLOURED_DIV) {
     var primaryColour = (this.sourceBlock_.isShadow()) ?
         this.sourceBlock_.getParent().getColour() :
@@ -295,11 +291,8 @@ Blockly.FieldDropdown.prototype.showEditor_ = function(opt_e) {
   // view. See issue #1329.
   this.menu_.focus();
 
-  // Scroll the dropdown to show the selected menu item.
   if (this.selectedMenuItem_) {
-    Blockly.utils.style.scrollIntoContainerView(
-        /** @type {!Element} */ (this.selectedMenuItem_.getElement()),
-        menuElement);
+    this.menu_.setHighlighted(this.selectedMenuItem_);
   }
 
   this.applyColour();

core/menu.js

@@ -253,9 +253,9 @@ Blockly.Menu.prototype.getMenuItem_ = function(elem) {
 /**
  * Highlights the given menu item, or clears highlighting if null.
  * @param {Blockly.MenuItem} item Item to highlight, or null.
- * @private
+ * @package
  */
-Blockly.Menu.prototype.setHighlighted_ = function(item) {
+Blockly.Menu.prototype.setHighlighted = function(item) {
   var currentHighlighted = this.highlightedItem_;
   if (currentHighlighted) {
     currentHighlighted.setHighlighted(false);
@@ -266,9 +266,12 @@ Blockly.Menu.prototype.setHighlighted_ = function(item) {
     this.highlightedItem_ = item;
     // Bring the highlighted item into view. This has no effect if the menu is
     // not scrollable.
+    var el = /** @type {!Element} */ (this.getElement());
     Blockly.utils.style.scrollIntoContainerView(
-        /** @type {!Element} */ (item.getElement()),
-        /** @type {!Element} */ (this.getElement()));
+        /** @type {!Element} */ (item.getElement()), el);
+
+    Blockly.utils.aria.setState(el, Blockly.utils.aria.State.ACTIVEDESCENDANT,
+        item.getId());
   }
 };
 
@@ -320,7 +323,7 @@ Blockly.Menu.prototype.highlightHelper_ = function(startIndex, delta) {
   var menuItem;
   while ((menuItem = this.menuItems_[index])) {
     if (menuItem.isEnabled()) {
-      this.setHighlighted_(menuItem);
+      this.setHighlighted(menuItem);
       break;
     }
     index += delta;
@@ -340,10 +343,10 @@ Blockly.Menu.prototype.handleMouseOver_ = function(e) {
   if (menuItem) {
     if (menuItem.isEnabled()) {
       if (this.highlightedItem_ != menuItem) {
-        this.setHighlighted_(menuItem);
+        this.setHighlighted(menuItem);
       }
     } else {
-      this.setHighlighted_(null);
+      this.setHighlighted(null);
     }
   }
 };
@@ -391,7 +394,7 @@ Blockly.Menu.prototype.handleMouseEnter_ = function(_e) {
 Blockly.Menu.prototype.handleMouseLeave_ = function(_e) {
   if (this.getElement()) {
     this.blur_();
-    this.setHighlighted_(null);
+    this.setHighlighted(null);
   }
 };
 

core/menuitem.js

@@ -125,6 +125,8 @@ Blockly.MenuItem.prototype.createDom = function() {
   }
   Blockly.utils.aria.setState(element, Blockly.utils.aria.State.SELECTED,
       (this.checkable_ && this.checked_) || false);
+  Blockly.utils.aria.setState(element, Blockly.utils.aria.State.DISABLED,
+      !this.enabled_);
 
   return element;
 };

core/utils/aria.js

@@ -86,6 +86,9 @@ Blockly.utils.aria.State = {
   // Value: integer.
   COLCOUNT: 'colcount',
 
+  // ARIA state for a disabled item. Value: one of {true, false}.
+  DISABLED: 'disabled',
+
   // ARIA state for setting whether the element like a tree node is expanded.
   // Value: one of {true, false, undefined}.
   EXPANDED: 'expanded',