Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2932)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/settings/settings_menu/settings_menu.html

Issue 2651293003: Make MD Settings side bar keyboard accessible. (Closed)
Patch Set: feedback Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('j') | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/settings/settings_menu/settings_menu.html
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chrome/browser/resources/settings/settings_menu/settings_menu.html
index 5c42519ce4c700ee4cbf337622e4240dd279a0ef..6a8e28ec44920d058bfa18d3d3bcb598ad3faedb 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.html
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html
@@ -1,10 +1,10 @@
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
@@ -12,207 +12,178 @@
<dom-module id="settings-menu">
<template>
<style include="settings-shared">
- #about-menu[about-selected] {
- color: var(--google-blue-700);
- }
-
- iron-icon {
- --iron-icon-fill-color: var(--settings-nav-grey);
- -webkit-margin-end: 24px;
- }
-
- .iron-selected:not(.menu-trigger) > iron-icon {
- fill: var(--google-blue-700);
- }
-
- .menu-trigger span {
- -webkit-margin-end: 16px;
- flex: 1;
+ :host {
+ display: block;
+ margin-top: 8px;
}
- paper-menu {
- --paper-menu-selected-item: {
- font-weight: 500;
- };
- --paper-menu-focused-item-after: {
- background: none;
+ a[href],
+ #advancedButton {
+ --cr-selectable-focus: {
+ outline: auto 5px -webkit-focus-ring-color;
};
+ -webkit-margin-end: 2px; /* Margin so selected outline is visible. */
+ -webkit-margin-start: 1px;
+ -webkit-padding-start: 23px; /* 24px - 1px from margin for outline. */
color: var(--settings-nav-grey);
+ display: flex;
font-size: 100%;
dschuyler 2017/02/15 23:29:51 Does this have any effect? Maybe remove font-size:
hcarmona 2017/02/15 23:35:31 Done.
- padding: 0;
- }
-
- div[data-path] {
- @apply(--settings-actionable);
+ font-weight: 500;
+ min-height: 20px;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ word-break: break-word;
}
- #basicPage {
- margin-top: 8px;
+ a[href].iron-selected {
+ color: var(--google-blue-700);
}
- .page-menu > div {
- margin-top: 8px;
+ iron-icon {
+ --iron-icon-fill-color: var(--settings-nav-grey);
+ -webkit-margin-end: 24px;
+ vertical-align: top;
}
- .page-menu {
- --paper-menu-selected-item: {
- font-weight: 500;
- };
+ .iron-selected > iron-icon {
+ fill: var(--google-blue-700);
}
- paper-menu div {
- position: relative; /* Needed for paper-ripple. */
+ #advancedButton {
+ -webkit-padding-end: 0;
+ background-color: unset;
+ display: flex;
Dan Beam 2017/02/15 23:14:32 duplicate display: flex;
hcarmona 2017/02/15 23:35:31 Done.
+ height: unset;
+ margin-top: 8px;
+ text-transform: none;
}
- paper-ripple {
- color: var(--google-blue-700);
- opacity: .5;
+ #advancedButton:focus {
+ outline: none;
}
- .page-menu paper-menu {
- --paper-menu-selected-item: {
- color: var(--google-blue-700);
- font-weight: 500;
- };
+ #advancedButton.keyboard-focus:focus {
+ outline: auto 5px -webkit-focus-ring-color;
}
- .page-menu div {
- -webkit-padding-start: 24px;
- align-items: center;
- display: flex;
- font-size: 100%;
- font-weight: 500;
- min-height: 40px;
- word-break: break-word;
+ #advancedButton > span {
+ flex: 1;
}
- .page-menu div iron-icon {
- flex-shrink: 0;
+ #advancedButton > iron-icon {
+ -webkit-margin-end: 22px; /* 24px - 2px from margin for outline. */
}
.separator {
/* Per Alan@, this line is different from the other separator lines. */
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+ margin-bottom: 8px;
margin-top: 8px;
}
</style>
- <paper-menu name="root-menu">
- <div class="page-menu" id="basicPage">
- <paper-menu attr-for-selected="data-path" class="menu-content"
- id="basicMenu" selected="[[currentRoute.path]]">
+ <iron-selector id="topMenu" selectable="a" attr-for-selected="href"
+ on-iron-activate="onSelectorActivate_">
<if expr="chromeos">
- <div data-path="/internet" on-tap="openPage_">
- <iron-icon icon="settings:network-wifi"></iron-icon>
- $i18n{internetPageTitle}
- </div>
- <div data-path="/bluetooth" on-tap="openPage_">
- <iron-icon icon="settings:bluetooth"></iron-icon>
- $i18n{bluetoothPageTitle}
- </div>
+ <a href="/internet">
+ <iron-icon icon="settings:network-wifi"></iron-icon>
+ $i18n{internetPageTitle}
+ </a>
+ <a href="/bluetooth">
+ <iron-icon icon="settings:bluetooth"></iron-icon>
+ $i18n{bluetoothPageTitle}
+ </a>
</if>
- <div id="people" data-path="/people" on-tap="openPage_"
- hidden="[[!pageVisibility.people]]">
- <iron-icon icon="settings:people"></iron-icon>
- $i18n{peoplePageTitle}
- </div>
- <div data-path="/appearance" on-tap="openPage_"
- hidden="[[!pageVisibility.appearance]]">
- <iron-icon icon="settings:palette"></iron-icon>
- $i18n{appearancePageTitle}
- </div>
+ <a id="people" href="/people"
+ hidden="[[!pageVisibility.people]]">
Dan Beam 2017/02/15 23:14:32 unwrap
hcarmona 2017/02/15 23:35:31 Done.
+ <iron-icon icon="settings:people"></iron-icon>
+ $i18n{peoplePageTitle}
+ </a>
+ <a href="/appearance" hidden="[[!pageVisibility.appearance]]">
+ <iron-icon icon="settings:palette"></iron-icon>
+ $i18n{appearancePageTitle}
+ </a>
<if expr="chromeos">
- <div data-path="/device" on-tap="openPage_">
- <iron-icon icon="settings:laptop-chromebook"></iron-icon>
- $i18n{devicePageTitle}
- </div>
+ <a href="/device">
+ <iron-icon icon="settings:laptop-chromebook"></iron-icon>
+ $i18n{devicePageTitle}
+ </a>
</if>
- <div data-path="/search" on-tap="openPage_">
- <iron-icon icon="cr:search"></iron-icon>
- $i18n{searchPageTitle}
- </div>
+ <a href="/search">
+ <iron-icon icon="cr:search"></iron-icon>
+ $i18n{searchPageTitle}
+ </a>
<if expr="chromeos">
- <div data-path="/androidApps" on-tap="openPage_"
- hidden="[[!showAndroidApps]]">
- <iron-icon icon="settings:android"></iron-icon>
- $i18n{androidAppsPageTitle}
- </div>
+ <a href="/androidApps" hidden="[[!showAndroidApps]]">
+ <iron-icon icon="settings:android"></iron-icon>
+ $i18n{androidAppsPageTitle}
+ </a>
</if>
<if expr="not chromeos">
- <div data-path="/defaultBrowser" on-tap="openPage_"
- hidden="[[!pageVisibility.defaultBrowser]]">
- <iron-icon icon="settings:web"></iron-icon>
- $i18n{defaultBrowser}
- </div>
+ <a href="/defaultBrowser" hidden="[[!pageVisibility.defaultBrowser]]">
+ <iron-icon icon="settings:web"></iron-icon>
+ $i18n{defaultBrowser}
+ </a>
</if>
- <div data-path="/onStartup" on-tap="openPage_"
- hidden="[[!pageVisibility.onStartup]]">
- <iron-icon icon="settings:power-settings-new"></iron-icon>
- $i18n{onStartup}
- </div>
- </paper-menu>
- </div>
- <paper-submenu class="page-menu" id="advancedSubmenu" actionable
- opened="{{advancedOpened}}"
- hidden="[[!pageVisibility.advancedSettings]]">
- <div class="menu-trigger">
- <span>$i18n{advancedPageTitle}</span>
- <iron-icon icon="[[arrowState_(advancedOpened)]]"></iron-icon>
- <paper-ripple></paper-ripple>
- </div>
- <paper-menu attr-for-selected="data-path" class="menu-content"
- id="advancedMenu" selected="[[currentRoute.path]]">
+ <a href="/onStartup" hidden="[[!pageVisibility.onStartup]]">
+ <iron-icon icon="settings:power-settings-new"></iron-icon>
+ $i18n{onStartup}
+ </a>
+ <paper-button toggles id="advancedButton"
+ aria-active-attribute="aria-expanded" active="{{advancedOpened}}">
+ <span>$i18n{advancedPageTitle}</span>
+ <iron-icon icon="[[arrowState_(advancedOpened)]]">
+ </iron-icon></paper-button>
+ <iron-collapse id="advancedSubmenu" opened="[[advancedOpened]]">
+ <iron-selector id="subMenu" selectable="a" attr-for-selected="href"
+ on-iron-activate="onSelectorActivate_">
<if expr="chromeos">
- <div data-path="/dateTime" on-tap="openPage_">
+ <a href="/dateTime">
<iron-icon icon="settings:access-time"></iron-icon>
$i18n{dateTimePageTitle}
- </div>
+ </a>
</if>
- <div data-path="/privacy" on-tap="openPage_">
+ <a href="/privacy">
<iron-icon icon="settings:security"></iron-icon>
$i18n{privacyPageTitle}
- </div>
- <div data-path="/passwordsAndForms" on-tap="openPage_"
+ </a>
+ <a href="/passwordsAndForms"
hidden="[[!pageVisibility.passwordsAndForms]]">
<iron-icon icon="settings:assignment"></iron-icon>
$i18n{passwordsAndAutofillPageTitle}
- </div>
- <div data-path="/languages" on-tap="openPage_">
+ </a>
+ <a href="/languages">
<iron-icon icon="settings:language"></iron-icon>
$i18n{languagesPageTitle}
- </div>
- <div data-path="/downloads" on-tap="openPage_">
+ </a>
+ <a href="/downloads">
<iron-icon icon="cr:file-download"></iron-icon>
$i18n{downloadsPageTitle}
- </div>
- <div data-path="/printing" on-tap="openPage_">
+ </a>
+ <a href="/printing">
<iron-icon icon="cr:print"></iron-icon>
$i18n{printingPageTitle}
- </div>
- <div data-path="/accessibility" on-tap="openPage_">
+ </a>
+ <a href="/accessibility">
<iron-icon icon="settings:accessibility"></iron-icon>
$i18n{a11yPageTitle}
- </div>
+ </a>
<if expr="not chromeos">
- <div data-path="/system" on-tap="openPage_">
+ <a href="/system">
<iron-icon icon="settings:build"></iron-icon>
$i18n{systemPageTitle}
- </div>
+ </a>
</if>
- <div data-path="/reset" on-tap="openPage_"
- hidden="[[!pageVisibility.reset]]">
+ <a href="/reset" hidden="[[!pageVisibility.reset]]">
<iron-icon icon="settings:restore"></iron-icon>
$i18n{resetPageTitle}
- </div>
- </paper-menu>
- </paper-submenu>
+ </a>
+ </iron-selector>
+ </iron-collapse>
<div class="separator"></div>
- <paper-submenu class="page-menu">
- <div about-selected$="[[aboutSelected_]]" class="menu-trigger"
- id="about-menu" on-tap="openPage_" data-path="/help">
- $i18n{aboutPageTitle}
- </div>
- </paper-submenu>
- </paper-menu>
+ <a id="about-menu" href="/help">
+ $i18n{aboutPageTitle}
+ </a>
dschuyler 2017/02/15 23:29:51 This could unwrap, if you like.
hcarmona 2017/02/15 23:35:31 Done.
+ </iron-selector>
</template>
<script src="settings_menu.js"></script>
</dom-module>
« no previous file with comments | « no previous file | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('j') | chrome/browser/resources/settings/settings_menu/settings_menu.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698