MD Bookmarks: Initial screenreader accessibility improvements

chrome/browser/resources/md_bookmarks/folder_node.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Polymer({
   is: 'bookmarks-folder-node',
 
   behaviors: [
     bookmarks.MouseFocusBehavior,
     bookmarks.StoreClient,
@@ skipping 22 matching lines @@
     /** @private */
     searchActive_: Boolean,
 
     /** @private */
     isSelectedFolder_: {
       type: Boolean,
       value: false,
       reflectToAttribute: true,
       computed: 'computeIsSelected_(itemId, selectedFolder_, searchActive_)'
     },
+
+    /** @private */
+    hasChildFolder_: {
+      type: Boolean,
+      computed: 'computeHasChildFolder_(item_.children)',
+    },
   },
 
   listeners: {
     'keydown': 'onKeydown_',
   },
 
+  observers: [
+    'updateAriaExpanded_(hasChildFolder_, isClosed_)',
+  ],
+
   /** @override */
   attached: function() {
     this.watch('item_', function(state) {
       return state.nodes[this.itemId];
     }.bind(this));
     this.watch('isClosed_', function(state) {
       return state.closedFolders.has(this.itemId);
     }.bind(this));
     this.watch('selectedFolder_', function(state) {
       return state.selectedFolder;
@@ skipping 69 matching lines @@
    * @param {!HTMLElement} currentFocus
    */
   changeKeyboardSelection_: function(xDirection, yDirection, currentFocus) {
     var newFocusFolderNode = null;
     var isChildFolderNodeFocused =
         currentFocus.tagName == 'BOOKMARKS-FOLDER-NODE';
 
     if (xDirection == 1) {
       // The right arrow opens a folder if closed and goes to the first child
       // otherwise.
-      if (this.hasChildFolder_()) {
+      if (this.hasChildFolder_) {
         if (this.isClosed_) {
           this.dispatch(
               bookmarks.actions.changeFolderOpen(this.item_.id, true));
         } else {
           yDirection = 1;
         }
       }
     } else if (xDirection == -1) {
       // The left arrow closes a folder if open and goes to the parent
       // otherwise.
-      if (this.hasChildFolder_() && !this.isClosed_) {
+      if (this.hasChildFolder_ && !this.isClosed_) {
         this.dispatch(bookmarks.actions.changeFolderOpen(this.item_.id, false));
       } else {
         var parentFolderNode = this.getParentFolderNode_();
         if (parentFolderNode.itemId != ROOT_NODE_ID) {
           parentFolderNode.selectFolder_();
           parentFolderNode.getFocusTarget().focus();
         }
       }
     }
 
@@ skipping 150 matching lines @@
    * @return {boolean}
    */
   computeIsSelected_: function(itemId, selectedFolder, searchActive) {
     return itemId == selectedFolder && !searchActive;
   },
 
   /**
    * @private
    * @return {boolean}
    */
-  hasChildFolder_: function() {
+  computeHasChildFolder_: function() {
     return bookmarks.util.hasChildFolders(this.itemId, this.getState().nodes);
   },
 
   /** @private */
   depthChanged_: function() {
     this.style.setProperty('--node-depth', String(this.depth));
+    if (this.depth == -1)
+      this.$.descendants.removeAttribute('role');
   },
 
   /**
    * @private
    * @return {number}
    */
   getChildDepth_: function() {
     return this.depth + 1;
   },
 
@@ skipping 14 matching lines @@
     return this.itemId == ROOT_NODE_ID;
   },
 
   /**
    * @private
    * @return {string}
    */
   getTabIndex_: function() {
     return this.isSelectedFolder_ ? '0' : '-1';
   },
+
+  /**
+   * Sets the 'aria-expanded' accessibility on nodes which need it. Note that
+   * aria-expanded="false" is different to having the attribute be undefined.
+   * @param {boolean} hasChildFolder
+   * @param {boolean} isClosed
+   * @private
+   */
+  updateAriaExpanded_: function(hasChildFolder, isClosed) {
+    if (hasChildFolder)
+      this.getFocusTarget().setAttribute('aria-expanded', String(!isClosed));
+    else
+      this.getFocusTarget().removeAttribute('aria-expanded');
+  },
 });