chrome/browser/resources/settings/settings_menu/settings_menu.html - Issue 2651293003: Make MD Settings side bar keyboard accessible.

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

Issue 2651293003: Make MD Settings side bar keyboard accessible. (Closed)

Patch Set: Selectable Created 3 years, 11 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

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 d9458b9450d2a9ecf30b637b80e9ed532afabe5c..852cc627a83f6ed048a412ac57b34cd386781765 100644

--- a/chrome/browser/resources/settings/settings_menu/settings_menu.html

+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html

@@ -4,7 +4,6 @@

-<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">

@@ -21,54 +20,55 @@

-webkit-margin-end: 24px;

}

- .iron-selected:not(.menu-trigger) > iron-icon {

- fill: var(--google-blue-700);

+ .menu-trigger > iron-icon {

+ -webkit-margin-end: 22px; /* 24px - 2px from margin for outline. */

}

- .menu-trigger span {

+ paper-button span {

-webkit-margin-end: 16px;

flex: 1;

}

+ .iron-selected:not(.menu-trigger) > iron-icon {

+ fill: var(--google-blue-700);

+ }

paper-menu {

- --paper-menu-selected-item: {

+ padding: 0;

+ }

+ paper-button {

+ @apply(--settings-actionable);

+ --paper-menu-focused-item: {

+ outline: auto 5px -webkit-focus-ring-color;

+ };

+ --paper-button-flat-keyboard-focus: {

+ background: none;

font-weight: 500;

};

--paper-menu-focused-item-after: {

background: none;

};

+ --paper-menu-selected-item: {

+ color: var(--settings-nav-grey);

+ font-weight: 500;

+ };

+ -webkit-margin-end: 2px; /* Margin so selected outline is visible. */

+ -webkit-margin-start: 1px;

color: var(--settings-nav-grey);

- font-size: 100%;

+ display: flex;

padding: 0;

}

- div[data-path] {

- @apply(--settings-actionable);

- }

#basicPage {

margin-top: 8px;

}

- .page-menu > div {

+ .page-menu > paper-button {

+ -webkit-padding-end: 0;

margin-top: 8px;

}

- .page-menu {

- --paper-menu-selected-item: {

- font-weight: 500;

- };

- }

- paper-menu div {

- position: relative; /* Needed for paper-ripple. */

- }

- paper-ripple {

- color: var(--google-blue-700);

- opacity: .5;

- }

.page-menu paper-menu {

--paper-menu-selected-item: {

color: var(--google-blue-700);

@@ -76,144 +76,136 @@

};

}

- .page-menu div {

- -webkit-padding-start: 24px;

- align-items: center;

- display: flex;

+ .page-menu paper-button {

+ -webkit-padding-start: 23px; /* 24px - 1px from margin for outline. */

font-size: 100%;

font-weight: 500;

min-height: 40px;

+ text-transform: none;

word-break: break-word;

}

- .page-menu div iron-icon {

- flex-shrink: 0;

- }

.separator {

/* Per Alan@, this line is different from the other separator lines. */

border-bottom: 1px solid rgba(0, 0, 0, 0.08);

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]]">

+ <div class="page-menu" id="basicPage">

+ <paper-menu attr-for-selected="data-path" class="menu-content"

+ id="basicMenu" selected="[[currentRoute.path]]">

- <div data-path="/internet" on-tap="openPage_">

- <iron-icon icon="settings:network-wifi"></iron-icon>

- $i18n{internetPageTitle}

- </div>

+ <paper-button data-path="/internet" on-tap="openPage_">

dschuyler 2017/01/27 00:25:28 How much of a performance difference is there from

hcarmona 2017/01/27 22:54:51 Ok, ran Tommy's testing and change is negligible a

hcarmona 2017/01/30 19:01:43 Tested on my beefy dev machine and without change

hcarmona 2017/02/01 00:39:48 Changed to action-link and removed ripple after ou

+ <iron-icon icon="settings:network-wifi"></iron-icon>

+ <span>$i18n{internetPageTitle}</span>

+ </paper-button>

</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>

+ <paper-button id="people" data-path="/people" on-tap="openPage_"

+ hidden="[[!pageVisibility.people]]">

+ <iron-icon icon="settings:people"></iron-icon>

+ <span>$i18n{peoplePageTitle}</span>

+ </paper-button>

+ <paper-button data-path="/appearance" on-tap="openPage_"

+ hidden="[[!pageVisibility.appearance]]">

+ <iron-icon icon="settings:palette"></iron-icon>

+ <span>$i18n{appearancePageTitle}</span>

+ </paper-button>

- <div data-path="/device" on-tap="openPage_">

- <iron-icon icon="settings:laptop-chromebook"></iron-icon>

- $i18n{devicePageTitle}

- </div>

+ <paper-button data-path="/device" on-tap="openPage_">

+ <iron-icon icon="settings:laptop-chromebook"></iron-icon>

+ <span>$i18n{devicePageTitle}</span>

+ </paper-button>

</if>

- <div data-path="/search" on-tap="openPage_">

- <iron-icon icon="cr:search"></iron-icon>

- $i18n{searchPageTitle}

- </div>

+ <paper-button data-path="/search" on-tap="openPage_">

+ <iron-icon icon="cr:search"></iron-icon>

+ <span>$i18n{searchPageTitle}</span>

+ </paper-button>

- <div data-path="/androidApps" on-tap="openPage_"

- hidden="[[!showAndroidApps]]">

- <iron-icon icon="settings:android"></iron-icon>

- $i18n{androidAppsPageTitle}

- </div>

+ <paper-button data-path="/androidApps" on-tap="openPage_"

+ hidden="[[!showAndroidApps]]">

+ <iron-icon icon="settings:android"></iron-icon>

+ <span>$i18n{androidAppsPageTitle}</span>

+ </paper-button>

</if>

- <div data-path="/defaultBrowser" on-tap="openPage_"

- hidden="[[!pageVisibility.defaultBrowser]]">

- <iron-icon icon="settings:web"></iron-icon>

- $i18n{defaultBrowser}

- </div>

+ <paper-button data-path="/defaultBrowser" on-tap="openPage_"

+ hidden="[[!pageVisibility.defaultBrowser]]">

+ <iron-icon icon="settings:web"></iron-icon>

+ <span>$i18n{defaultBrowser}</span>

+ </paper-button>

</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-button data-path="/onStartup" on-tap="openPage_"

+ hidden="[[!pageVisibility.onStartup]]">

+ <iron-icon icon="settings:power-settings-new"></iron-icon>

+ <span>$i18n{onStartup}</span>

+ </paper-button>

+ </paper-menu>

<paper-submenu class="page-menu" id="advancedSubmenu" actionable

opened="{{advancedOpened}}"

hidden="[[!pageVisibility.advancedSettings]]">

- <div class="menu-trigger">

+ <paper-button class="menu-trigger" tabindex="0">

<span>$i18n{advancedPageTitle}</span>

<iron-icon icon="[[arrowState_(advancedOpened)]]"></iron-icon>

- <paper-ripple></paper-ripple>

- </div>

+ </paper-button>

<paper-menu attr-for-selected="data-path" class="menu-content"

id="advancedMenu" selected="[[currentRoute.path]]">

- <div data-path="/dateTime" on-tap="openPage_">

+ <paper-button data-path="/dateTime" on-tap="openPage_">

<iron-icon icon="settings:access-time"></iron-icon>

- $i18n{dateTimePageTitle}

- </div>

+ <span>$i18n{dateTimePageTitle}</span>

+ </paper-button>

</if>

- <div data-path="/privacy" on-tap="openPage_">

+ <paper-button data-path="/privacy" on-tap="openPage_">

<iron-icon icon="settings:security"></iron-icon>

- $i18n{privacyPageTitle}

- </div>

+ <span>$i18n{privacyPageTitle}</span>

+ </paper-button>

- <div data-path="/bluetooth" on-tap="openPage_">

+ <paper-button data-path="/bluetooth" on-tap="openPage_">

<iron-icon icon="settings:bluetooth"></iron-icon>

- $i18n{bluetoothPageTitle}

- </div>

+ <span>$i18n{bluetoothPageTitle}</span>

+ </paper-button>

</if>

- <div data-path="/passwordsAndForms" on-tap="openPage_"

+ <paper-button data-path="/passwordsAndForms" on-tap="openPage_"

hidden="[[!pageVisibility.passwordsAndForms]]">

<iron-icon icon="settings:assignment"></iron-icon>

- $i18n{passwordsAndAutofillPageTitle}

- </div>

- <div data-path="/languages" on-tap="openPage_">

+ <span>$i18n{passwordsAndAutofillPageTitle}</span>

+ </paper-button>

+ <paper-button data-path="/languages" on-tap="openPage_">

<iron-icon icon="settings:language"></iron-icon>

- $i18n{languagesPageTitle}

- </div>

- <div data-path="/downloads" on-tap="openPage_">

+ <span>$i18n{languagesPageTitle}</span>

+ </paper-button>

+ <paper-button data-path="/downloads" on-tap="openPage_">

<iron-icon icon="cr:file-download"></iron-icon>

- $i18n{downloadsPageTitle}

- </div>

- <div data-path="/printing" on-tap="openPage_">

+ <span>$i18n{downloadsPageTitle}</span>

+ </paper-button>

+ <paper-button data-path="/printing" on-tap="openPage_">

<iron-icon icon="cr:print"></iron-icon>

- $i18n{printingPageTitle}

- </div>

- <div data-path="/accessibility" on-tap="openPage_">

+ <span>$i18n{printingPageTitle}</span>

+ </paper-button>

+ <paper-button data-path="/accessibility" on-tap="openPage_">

<iron-icon icon="settings:accessibility"></iron-icon>

- $i18n{a11yPageTitle}

- </div>

+ <span>$i18n{a11yPageTitle}</span>

+ </paper-button>

- <div data-path="/system" on-tap="openPage_">

+ <paper-button data-path="/system" on-tap="openPage_">

<iron-icon icon="settings:build"></iron-icon>

- $i18n{systemPageTitle}

- </div>

+ <span>$i18n{systemPageTitle}</span>

+ </paper-button>

</if>

- <div data-path="/reset" on-tap="openPage_"

+ <paper-button data-path="/reset" on-tap="openPage_"

hidden="[[!pageVisibility.reset]]">

<iron-icon icon="settings:restore"></iron-icon>

- $i18n{resetPageTitle}

- </div>

+ <span>$i18n{resetPageTitle}</span>

+ </paper-button>

</paper-menu>

</paper-submenu>

- <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>

+ </div>

+ <div class="separator"></div>

+ <paper-menu class="page-menu">

+ <paper-button about-selected$="[[aboutSelected_]]"

+ id="about-menu" on-tap="openPage_" data-path="/help">

+ <span>$i18n{aboutPageTitle}</span>

+ </paper-button>

</paper-menu>

</template>

« no previous file with comments | « no previous file | no next file » | no next file with comments »