[Tether] give cr-network-list-item the correct role attribute

The cr-network-list-item already has an attribute show-buttons but does
not have an aria-role set. This change exposes the role top-level
attribute with the value of "button" when show-buttons is true. When
showButtons is false, the role is set to ''.

Fixed: 1007452
Change-Id: I20f076e54c857d55bd8fd2763fb9f02d51498c92
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1911481Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#714649}

ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.js

@@ -59,6 +59,17 @@ Polymer({
       computed: 'getAriaLabel_(item, networkState)',
     },
 
+    /**
+     * Expose the aria role attribute based on the showButtons properties/
+     * attribute. When showButtons is true, the role is "button" otherwise it is
+     * left blank.
+     */
+    role: {
+      type: String,
+      reflectToAttribute: true,
+      computed: 'getAriaRole_(showButtons)',
+    },
+
     /**
      * The cached ConnectionState for the network.
      * @type {!chromeos.networkConfig.mojom.ConnectionStateType|undefined}
@@ -144,6 +155,16 @@ Polymer({
     return this.getItemName_();
   },
 
+  /**
+   * Compute the aria role based on the showButtons property value
+   * @return {string} the aria role
+   * @private
+   */
+  getAriaRole_: function() {
+    return this.showButtons ? 'button' : '';
+  },
+
+
   /**
    * @return {boolean}
    * @private