diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 5f2abdb94..f55911101 100644 --- a/core/field_dropdown.js +++ b/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(); diff --git a/core/menu.js b/core/menu.js index bf2dbcb85..578b6cbf3 100644 --- a/core/menu.js +++ b/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); } }; diff --git a/core/menuitem.js b/core/menuitem.js index 778c78fde..d483dcd45 100644 --- a/core/menuitem.js +++ b/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; }; diff --git a/core/utils/aria.js b/core/utils/aria.js index eab295f12..f455b9928 100644 --- a/core/utils/aria.js +++ b/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',