MD Bookmarks: Initial screenreader accessibility improvements

chrome/browser/resources/md_bookmarks/toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/edit_dialog.html">

[calamity, 2017/06/30 06:05:18]

Is it just me or does the URL field in the edit dialog always read out 'Invalid
URL'?

[tsergeant, 2017/07/03 04:07:19]

I went down the rabbit hole and filed
https://github.com/PolymerElements/paper-input/issues/553.

This is an issue across several Chrome pages (Settings also has inputs which
behave like this). Depending on what we hear back on that bug, we might want to
go through and fix them. I'll make a note on our crbug, but I don't think it's a
blocker right now.

 <link rel="import" href="chrome://bookmarks/shared_style.html">
 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
 
 <dom-module id="bookmarks-toolbar">
   <template>
     <style include="shared-style">
       :host {
         background: var(--md-toolbar-color);
         transition: background-color 150ms;
       }
@@ skipping 29 matching lines @@
     </style>
     <cr-toolbar page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
         hidden$="[[showSelectionOverlay]]"
         narrow="{{narrow_}}"
         on-search-changed="onSearchChanged_">
       <button is="paper-icon-button-light"
           id="menuButton"
           class="more-actions more-vert-button"
+          title="$i18n{organizeButtonTitle}"
           on-tap="onMenuButtonOpenTap_">
         <div></div>
         <div></div>
         <div></div>
       </button>
     </cr-toolbar>
     <template is="cr-lazy-render" id="dropdown">
-      <dialog is="cr-action-menu">
-        <button class="dropdown-item" on-tap="onSortTap_"
-            disabled="[[!canChangeList_]]">
+      <dialog is="cr-action-menu" role="menu">
+        <button class="dropdown-item"
+            on-tap="onSortTap_"
+            disabled="[[!canChangeList_]]"
+            role="menuitem">

[calamity, 2017/06/30 06:05:18]

Still no way around the top level menu issue?

[tsergeant, 2017/07/03 04:07:19]

Do you mean the one where VoiceOver was getting caught up on the item wrapper
div?

The behavior seems more reasonable on ChromeVox than Voiceover. We can check
with a11y review if there's anything better we can do after this lands.

           $i18n{menuSort}
         </button>
         <hr>
-        <button id="addBookmarkButton" class="dropdown-item"
-            on-tap="onAddBookmarkTap_" disabled="[[!canChangeList_]]">
+        <button id="addBookmarkButton"
+            class="dropdown-item"
+            on-tap="onAddBookmarkTap_"
+            disabled="[[!canChangeList_]]"
+            role="menuitem">
           $i18n{menuAddBookmark}
         </button>
-        <button class="dropdown-item" on-tap="onAddFolderTap_"
-            disabled="[[!canChangeList_]]">
+        <button class="dropdown-item"
+            on-tap="onAddFolderTap_"
+            disabled="[[!canChangeList_]]"
+            role="menuitem">
           $i18n{menuAddFolder}
         </button>
         <hr>
-        <button id="importBookmarkButton" class="dropdown-item"
-            on-tap="onImportTap_" disabled="[[!globalCanEdit_]]">
+        <button id="importBookmarkButton"
+            class="dropdown-item"
+            on-tap="onImportTap_"
+            disabled="[[!globalCanEdit_]]"
+            role="menuitem">
           $i18n{menuImport}
         </button>
-        <button class="dropdown-item" on-tap="onExportTap_">
+        <button class="dropdown-item"
+            on-tap="onExportTap_"
+            role="menuitem">
           $i18n{menuExport}
         </button>
       </dialog>
     </template>
     <template is="cr-lazy-render" id="addDialog">
       <bookmarks-edit-dialog></bookmarks-edit-dialog>
     </template>
     <template is="dom-if" if="[[showSelectionOverlay]]">
       <cr-toolbar-selection-overlay delete-label="$i18n{delete}"
           cancel-label="$i18n{cancel}"
           selection-label="[[getItemsSelectedString_(selectedItems_.size)]]"
           delete-disabled="[[!canDeleteSelection_(selectedItems_)]]"
           on-delete-selected-items="onDeleteSelectionTap_"
           on-clear-selected-items="onClearSelectionTap_">
       </cr-toolbar-selection-overlay>
     </template>
   </template>
   <script src="chrome://bookmarks/toolbar.js"></script>
 </dom-module>