Make initial focus consistent in all instances of cr-drawer.
This removes focus ring from "Chrome history" and "Extensions" when
showing cr-drawer using keyboard.
BUG=NONE
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
Review-Url: https://codereview.chromium.org/2732003003
Cr-Commit-Position: refs/heads/master@{#482044}
diff --git a/chrome/browser/resources/md_extensions/manager.html b/chrome/browser/resources/md_extensions/manager.html
index 237ed717..9f5f5a1 100644
--- a/chrome/browser/resources/md_extensions/manager.html
+++ b/chrome/browser/resources/md_extensions/manager.html
@@ -80,8 +80,7 @@
on-cr-toolbar-menu-tap="onMenuButtonTap_"
on-search-changed="onFilterChanged_">
</extensions-toolbar>
- <dialog id="drawer" is="cr-drawer">
- <div class="drawer-header">$i18n{toolbarTitle}</div>
+ <dialog id="drawer" is="cr-drawer" title="$i18n{toolbarTitle}">
<div class="drawer-content">
<extensions-sidebar></extensions-sidebar>
</div>
diff --git a/chrome/browser/resources/md_history/app.html b/chrome/browser/resources/md_history/app.html
index e7de3247..c36a5bd1 100644
--- a/chrome/browser/resources/md_history/app.html
+++ b/chrome/browser/resources/md_history/app.html
@@ -113,8 +113,7 @@
</div>
<template is="cr-lazy-render" id="drawer">
- <dialog is="cr-drawer" swipe-open>
- <div class="drawer-header">$i18n{title}</div>
+ <dialog is="cr-drawer" title="$i18n{title}" swipe-open>
<history-side-bar id="drawer-side-bar" class="drawer-content"
selected-page="{{selectedPage_}}"
show-footer="[[showSidebarFooter]]">
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 0616648..c1f67ff 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -32,10 +32,6 @@
overflow: hidden; /* Prevent double scroll bar bugs. */
}
- .drawer-header {
- outline: none;
- }
-
.last {
display: flex;
justify-content: flex-end;
@@ -92,8 +88,8 @@
role="none"
show-menu>
</cr-toolbar>
- <dialog id="drawer" is="cr-drawer" on-close="onMenuClosed_">
- <div class="drawer-header" tabindex="-1">$i18n{settings}</div>
+ <dialog id="drawer" is="cr-drawer" on-close="onMenuClosed_"
+ title="$i18n{settings}">
<div class="drawer-content">
<template is="dom-if" id="drawerTemplate">
<settings-menu page-visibility="[[pageVisibility_]]"
diff --git a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
index dfca072..1b1bbe4 100644
--- a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
+++ b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
@@ -54,13 +54,14 @@
opacity: 1;
}
- :host ::content .drawer-header {
+ .drawer-header {
-webkit-padding-start: 24px;
align-items: center;
border-bottom: var(--cr-separator-line);
display: flex;
font-size: 123.08%; /* go to 16px from 13px */
min-height: 56px;
+ outline: none;
}
:host ::content .drawer-content {
@@ -69,6 +70,7 @@
}
</style>
<div id="container" on-tap="onContainerTap_">
+ <div class="drawer-header" tabindex="-1">[[title]]</div>
<content></content>
</div>
</template>
diff --git a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js
index 2676734..5a8b56bf 100644
--- a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js
+++ b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js
@@ -7,6 +7,8 @@
extends: 'dialog',
properties: {
+ title: String,
+
/** Enables notifications for |Dialog.open|. */
open: {
type: Boolean,
