A11y: Add application role and move focus in cr-action-menu.

Adding role="application" lets us be in control of the mode change on windows for screen readers.
aria-roledescription is necessary now because we don't want to change users' expectations that this is a menu.

Focus target change is necessary because focusing the application causes all its contents to be read as a label.

Bug: 855123
Change-Id: If2428d875f325b55339b6ad3c14874c9e066e584
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1869483Reviewed-by: Colin Blundell <blundell@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710034}

chrome/browser/resources/bookmarks/command_manager.html

@@ -32,7 +32,8 @@
     </style>
     <cr-lazy-render id="dropdown">
       <template>
-        <cr-action-menu on-mousedown="onMenuMousedown_">
+        <cr-action-menu on-mousedown="onMenuMousedown_"
+            role-description="$i18n{menu}">
           <template is="dom-repeat" items="[[menuCommands_]]" as="command">
             <button class="dropdown-item"
                 command$="[[command]]"

chrome/browser/resources/downloads/toolbar.html

@@ -46,7 +46,7 @@
           on-click="onMoreActionsTap_" aria-haspopup="menu"></cr-icon-button>
     </cr-toolbar>
     <cr-action-menu id="moreActionsMenu"
-        aria-label="$i18n{actionMenuDescription}">
+        role-description="$i18n{actionMenuDescription}">
       <button class="dropdown-item clear-all" on-click="onClearAllTap_">
         $i18n{clearAll}
       </button>

chrome/browser/resources/extensions/activity_log/activity_log_history.html

@@ -63,7 +63,7 @@
       <cr-icon-button id="more-actions" iron-icon="cr:more-vert"
           title="$i18n{activityLogMoreActionsLabel}"
           on-click="onMoreActionsClick_"></cr-icon-button>
-      <cr-action-menu>
+      <cr-action-menu role-description="$i18n{menu}">
         <button id="expand-all-button" class="dropdown-item"
             on-click="onExpandAllClick_">
           $i18n{activityLogExpandAll}

chrome/browser/resources/extensions/runtime_host_permissions.html

@@ -114,6 +114,7 @@
       </cr-radio-group>
     </div>
     <cr-action-menu id="hostActionMenu"
+        role-description="$i18n{menu}"
         on-close="onActionMenuClose_">
       <button class="dropdown-item" id="action-menu-edit"
           on-click="onActionMenuEditClick_">

chrome/browser/resources/history/history_list.html

@@ -78,7 +78,7 @@
 
     <cr-lazy-render id="sharedMenu">
       <template>
-        <cr-action-menu aria-label="$i18n{actionMenuDescription}">
+        <cr-action-menu role-description="$i18n{actionMenuDescription}">
           <button id="menuMoreButton" class="dropdown-item"
               hidden="[[!canSearchMoreFromSite_(
                   searchedTerm, actionMenuModel_.item.domain)]]"

chrome/browser/resources/history/synced_device_manager.html

@@ -95,7 +95,7 @@
 
     <cr-lazy-render id="menu">
       <template>
-        <cr-action-menu>
+        <cr-action-menu role-description="$i18n{menu}">
           <button id="menuOpenButton" class="dropdown-item"
               on-click="onOpenAllTap_">
             $i18n{openAll}

chrome/browser/resources/print_preview/polymer3/demo.js

@@ -58,7 +58,7 @@ class HelloPolymer3Element extends PolymerElement {
         <cr-icon-button iron-icon="cr:more-vert" on-click="showActionMenu_">
         </cr-icon-button>
       </cr-toolbar>
-      <cr-action-menu>
+      <cr-action-menu role-description="Menu">
         <button class="dropdown-item">Hello</button>
         <button class="dropdown-item">Action</button>
         <button class="dropdown-item">Menu</button>

chrome/browser/resources/settings/autofill_page/autofill_section.html

@@ -84,7 +84,7 @@
         $i18n{noAddressesFound}
       </div>
     </div>
-    <cr-action-menu id="addressSharedMenu">
+    <cr-action-menu id="addressSharedMenu" role-description="$i18n{menu}">
       <button id="menuEditAddress" class="dropdown-item"
           on-click="onMenuEditAddressTap_">$i18n{edit}</button>
       <button id="menuRemoveAddress" class="dropdown-item"

chrome/browser/resources/settings/autofill_page/passwords_section.html

@@ -139,13 +139,13 @@
         $i18n{noPasswordsFound}
       </div>
     </div>
-    <cr-action-menu id="menu">
+    <cr-action-menu id="menu" role-description="$i18n{menu}">
       <button id="menuEditPassword" class="dropdown-item"
           on-click="onMenuEditPasswordTap_">$i18n{passwordViewDetails}</button>
       <button id="menuRemovePassword" class="dropdown-item"
           on-click="onMenuRemovePasswordTap_">$i18n{removePassword}</button>
     </cr-action-menu>
-    <cr-action-menu id="exportImportMenu">
+    <cr-action-menu id="exportImportMenu" role-description="$i18n{menu}">
       <button id="menuImportPassword" class="dropdown-item"
           on-click="onImportTap_" hidden="[[!showImportPasswords_]]">
         $i18n{import}

chrome/browser/resources/settings/autofill_page/payments_section.html

@@ -92,7 +92,7 @@
         credit-cards="[[creditCards]]">
     </settings-credit-card-list>
 
-    <cr-action-menu id="creditCardSharedMenu">
+    <cr-action-menu id="creditCardSharedMenu" role-description="$i18n{menu}">
       <button id="menuEditCreditCard" class="dropdown-item"
           on-click="onMenuEditCreditCardTap_">$i18n{edit}</button>
       <button id="menuRemoveCreditCard" class="dropdown-item"

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html

@@ -36,7 +36,7 @@
         <cr-icon-button class="icon-more-vert" on-click="onMenuButtonTap_"
             tabindex$="[[tabindex]]" title="$i18n{moreActions}"
             on-keydown="ignoreEnterKey_"></cr-icon-button>
-        <cr-action-menu id="dotsMenu">
+        <cr-action-menu id="dotsMenu" role-description="$i18n{menu}">
           <button class="dropdown-item"
               on-click="onConnectActionTap_">
             [[getConnectActionText_(device.connected)]]

chrome/browser/resources/settings/chromeos/os_languages_page/os_languages_page.html

@@ -237,7 +237,8 @@
 
       <cr-lazy-render id="menu">
         <template>
-          <cr-action-menu class="complex" on-close="onCloseMenu_">
+          <cr-action-menu class="complex" on-close="onCloseMenu_"
+              role-description="$i18n{menu}">
             <cr-checkbox id="uiLanguageItem" class="dropdown-item"
                 hidden="[[isGuest_]]"
                 disabled="[[disableUILanguageCheckbox_(

chrome/browser/resources/settings/internet_page/internet_known_networks_page.html

@@ -74,7 +74,7 @@
       </template>
     </div>
 
-    <cr-action-menu id="dotsMenu">
+    <cr-action-menu id="dotsMenu" role-description="$i18n{menu}">
       <button class="dropdown-item" hidden="[[!showAddPreferred_]]"
           on-click="onAddPreferredTap_">
         $i18n{knownNetworksMenuAddPreferred}

chrome/browser/resources/settings/languages_page/languages_page.html

@@ -402,7 +402,7 @@
 </if> <!-- _google_chrome or not is_macosx -->
         <cr-lazy-render id="menu">
           <template>
-            <cr-action-menu
+            <cr-action-menu role-description="$i18n{menu}"
 <if expr="chromeos or is_win">
                 on-close="onCloseMenu_"
 </if>

chrome/browser/resources/settings/on_startup_page/startup_url_entry.html

@@ -28,7 +28,7 @@
         </cr-icon-button>
         <cr-lazy-render id="menu">
           <template>
-            <cr-action-menu>
+            <cr-action-menu role-description="$i18n{menu}">
               <button class="dropdown-item" on-click="onEditTap_">
                 $i18n{edit}
               </button>

chrome/browser/resources/settings/people_page/account_manager.html

@@ -196,7 +196,7 @@
 
       <div class="clear settings-box"></div>
 
-      <cr-action-menu>
+      <cr-action-menu role-description="$i18n{menu}">
         <button class="dropdown-item" on-click="onRemoveAccountTap_">
           $i18n{removeAccountLabel}
         </button>

chrome/browser/resources/settings/people_page/kerberos_accounts.html

@@ -148,7 +148,7 @@
 
       <div class="clear settings-box"></div>
 
-      <cr-action-menu>
+      <cr-action-menu role-description="$i18n{menu}">
         <button class="dropdown-item" on-click="onRefreshNowClick_">
           $i18n{kerberosAccountsRefreshNowLabel}
         </button>
@@ -181,4 +181,4 @@
     </template>
   </template>
   <script src="kerberos_accounts.js"></script>
-</dom-module>
\ No newline at end of file
+</dom-module>

chrome/browser/resources/settings/people_page/sync_account_control.html

@@ -218,7 +218,8 @@
         </div>
       </div>
       <template is="dom-if" if="[[!syncStatus.signedIn]]" restamp>
-        <cr-action-menu id="menu" auto-reposition>
+        <cr-action-menu id="menu" auto-reposition
+            role-description="$i18n{menu}">
           <template is="dom-repeat" items="[[storedAccounts_]]">
             <button class="dropdown-item" on-click="onAccountTap_">
               <img class="account-icon small" alt=""

chrome/browser/resources/settings/printing_page/cups_printers_list.html

@@ -15,7 +15,7 @@
       }
     </style>
 
-    <cr-action-menu>
+    <cr-action-menu role-description="$i18n{menu}">
       <button class="dropdown-item" on-click="onEditTap_">
         $i18n{editPrinter}
       </button>

chrome/browser/resources/settings/printing_page/cups_saved_printers.html

@@ -47,7 +47,7 @@
       }
     </style>
 
-    <cr-action-menu>
+    <cr-action-menu role-description="$i18n{menu}">
       <button id="editButton" class="dropdown-item" on-click="onEditTap_">
         $i18n{editPrinter}
       </button>

chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html

@@ -32,7 +32,7 @@
       <cr-icon-button class="icon-more-vert" on-click="onDotsTap_"
           title="$i18n{moreActions}" focus-row-control focus-type="menu">
       </cr-icon-button>
-      <cr-action-menu>
+      <cr-action-menu role-description="$i18n{menu}">
         <button class="dropdown-item" on-click="onManageTap_"
             id="manage">
           $i18n{searchEnginesManageExtension}

chrome/browser/resources/settings/search_engines_page/search_engine_entry.html

@@ -52,7 +52,7 @@
       <cr-icon-button class="icon-more-vert" on-click="onDotsTap_"
           title="$i18n{moreActions}" focus-row-control
           focus-type="cr-menu-button"></cr-icon-button>
-      <cr-action-menu>
+      <cr-action-menu role-description="$i18n{menu}">
         <button class="dropdown-item" on-click="onMakeDefaultTap_"
             hidden$="[[!engine.canBeDefault]]" id="makeDefault">
           $i18n{searchEnginesMakeDefault}

chrome/browser/resources/settings/site_settings/all_sites.html

@@ -72,7 +72,7 @@
     <!-- Overflow menu. -->
     <cr-lazy-render id="menu">
       <template>
-        <cr-action-menu>
+        <cr-action-menu role-description="$i18n{menu}">
           <button class="dropdown-item" role="menuitem"
               on-click="onConfirmResetSettings_">
             $i18n{siteSettingsSiteGroupReset}

chrome/browser/resources/settings/site_settings/protocol_handlers.html

@@ -60,7 +60,7 @@
       </div>
     </template>
 
-    <cr-action-menu>
+    <cr-action-menu role-description="$i18n{menu}">
       <button class="dropdown-item" on-click="onDefaultClick_"
           id="defaultButton" hidden$="[[actionMenuModel_.is_default]]">
         $i18n{handlerSetDefault}

chrome/browser/resources/settings/site_settings/site_list.html

@@ -38,7 +38,7 @@
         </cr-button>
       </div>
 
-      <cr-action-menu>
+      <cr-action-menu role-description="$i18n{menu}">
         <button class="dropdown-item" id="allow"
             on-click="onAllowTap_" hidden$="[[!showAllowAction_]]">
           $i18n{siteSettingsActionAllow}

chrome/browser/ui/webui/bookmarks/bookmarks_ui.cc

@@ -71,6 +71,7 @@ content::WebUIDataSource* CreateBookmarksUIHTMLSource(Profile* profile) {
       {"folderLabel", IDS_BOOKMARK_MANAGER_FOLDER_LABEL},
       {"itemsSelected", IDS_BOOKMARK_MANAGER_ITEMS_SELECTED},
       {"listAxLabel", IDS_BOOKMARK_MANAGER_LIST_AX_LABEL},
+      {"menu", IDS_MENU},
       {"menuAddBookmark", IDS_BOOKMARK_MANAGER_MENU_ADD_BOOKMARK},
       {"menuAddFolder", IDS_BOOKMARK_MANAGER_MENU_ADD_FOLDER},
       {"menuCut", IDS_BOOKMARK_MANAGER_MENU_CUT},

chrome/browser/ui/webui/certificate_manager_localized_strings_provider.cc

@@ -8,6 +8,7 @@
 #include "build/build_config.h"
 #include "chrome/browser/ui/webui/localized_string.h"
 #include "chrome/grit/generated_resources.h"
+#include "components/strings/grit/components_strings.h"
 #include "content/public/browser/web_ui_data_source.h"
 
 namespace certificate_manager {
@@ -80,6 +81,8 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_CERTIFICATE_MANAGER_CONFIRM_PASSWORD},
       {"certificateImportErrorFormat",
        IDS_SETTINGS_CERTIFICATE_MANAGER_IMPORT_ERROR_FORMAT},
+      // For A11y.
+      {"menu", IDS_MENU},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings,
                           base::size(kLocalizedStrings));

chrome/browser/ui/webui/extensions/extensions_ui.cc

@@ -73,6 +73,7 @@ content::WebUIDataSource* CreateMdExtensionsSource(Profile* profile,
     {"controlledSettingPolicy", IDS_CONTROLLED_SETTING_POLICY},
     {"done", IDS_DONE},
     {"learnMore", IDS_LEARN_MORE},
+    {"menu", IDS_MENU},
     {"noSearchResults", IDS_SEARCH_NO_RESULTS},
     {"ok", IDS_OK},
     {"save", IDS_SAVE},

chrome/browser/ui/webui/history_ui.cc

@@ -76,6 +76,7 @@ content::WebUIDataSource* CreateHistoryUIHTMLSource(Profile* profile) {
       {"historyMenuItem", IDS_HISTORY_HISTORY_MENU_ITEM},
       {"itemsSelected", IDS_HISTORY_ITEMS_SELECTED},
       {"loading", IDS_HISTORY_LOADING},
+      {"menu", IDS_MENU},
       {"menuPromo", IDS_HISTORY_MENU_PROMO},
       {"moreFromSite", IDS_HISTORY_MORE_FROM_SITE},
       {"openAll", IDS_HISTORY_OTHER_SESSIONS_OPEN_ALL},

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -166,6 +166,7 @@ void AddCommonStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"edit", IDS_SETTINGS_EDIT},
     {"extensionsLinkTooltip", IDS_SETTINGS_MENU_EXTENSIONS_LINK_TOOLTIP},
     {"learnMore", IDS_LEARN_MORE},
+    {"menu", IDS_MENU},
     {"menuButtonLabel", IDS_SETTINGS_MENU_BUTTON_LABEL},
     {"moreActions", IDS_SETTINGS_MORE_ACTIONS},
     {"ok", IDS_OK},

chrome/test/data/webui/cr_elements/cr_action_menu_test.js

@@ -274,7 +274,7 @@ suite('CrActionMenu', function() {
     menu.showAt(dots);
     items[0].focus();
     dispatchMouseoverEvent(menu);
-    assertEquals(dialog, getDeepActiveElement());
+    assertEquals(dialog.querySelector('[role="menu"]'), getDeepActiveElement());
   });
 
   test('moving mouse on a disabled item should focus the menu', () => {
@@ -282,7 +282,7 @@ suite('CrActionMenu', function() {
     items[2].toggleAttribute('disabled', true);
     items[0].focus();
     dispatchMouseoverEvent(items[2]);
-    assertEquals(dialog, getDeepActiveElement());
+    assertEquals(dialog.querySelector('[role="menu"]'), getDeepActiveElement());
   });
 
   test('mouse movements should override keyboard focus', () => {

components/components_strings.grd

@@ -260,6 +260,9 @@
       <message name="IDS_SAVE" desc="Used on a button to save information you are editing.">
         Save
       </message>
+      <message name="IDS_MENU" desc="The accessible name for the Menu. This is used as the aria-roledescription for context menus.">
+        Menu
+      </message>
       <if expr="is_android">
         <message name="IDS_SHOW" desc="Generic label to show content for a feature. [CHAR-LIMIT=20]" formatter_data="android_java">
           Show

ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html

@@ -40,7 +40,7 @@
       </cr-icon-button>
       <cr-lazy-render id="menu">
         <template>
-          <cr-action-menu>
+          <cr-action-menu role-description="[[i18n('menu')]]">
             <button class="dropdown-item" id="view"
                 on-tap="onViewTap_">
               [[i18n('certificateManagerView')]]

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html

@@ -64,9 +64,9 @@
         padding: 8px 0;
       }
     </style>
-    <dialog id="dialog" tabindex="0" on-close="onNativeDialogClose_" role="menu"
-        aria-label$="[[ariaLabel]]">
-      <div class="item-wrapper" role="none">
+    <dialog id="dialog" on-close="onNativeDialogClose_"
+        role="application" aria-roledescription$="[[roleDescription]]">
+      <div id="wrapper" class="item-wrapper" role="menu" tabindex="-1">
         <slot id="contentNode"></slot>
       </div>
     </dialog>

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

@@ -164,7 +164,8 @@ Polymer({
       value: false,
     },
 
-    ariaLabel: String,
+    /* Descriptor of the menu. Should be something along the lines of "menu" */
+    roleDescription: String,
   },
 
   listeners: {
@@ -289,7 +290,7 @@ Polymer({
   onMouseover_: function(e) {
     const query = '.dropdown-item:not([disabled])';
     const item = e.composedPath().find(el => el.matches && el.matches(query));
-    (item || this.$.dialog).focus();
+    (item || this.$.wrapper).focus();
   },
 
   /**
@@ -358,7 +359,7 @@ Polymer({
           anchorAlignmentX: AnchorAlignment.BEFORE_END,
         },
         opt_config)));
-    this.$.dialog.focus();
+    this.$.wrapper.focus();
   },
 
   /**