chrome/browser/resources/md_bookmarks/folder_node.html - Issue 2820153003: [MD Bookmarks] Add keyboard navigation to sidebar.

Side by Side Diff: chrome/browser/resources/md_bookmarks/folder_node.html

Issue 2820153003: [MD Bookmarks] Add keyboard navigation to sidebar. (Closed)

Patch Set: select_on_move Created 3 years, 8 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:

« no previous file with comments | « chrome/browser/resources/md_bookmarks/compiled_resources2.gyp ('k') | chrome/browser/resources/md_bookmarks/folder_node.js » ('j') | chrome/browser/resources/md_bookmarks/folder_node.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <link rel="import" href="chrome://resources/html/polymer.html">	1 <link rel="import" href="chrome://resources/html/polymer.html">

2 <link rel="import" href="chrome://resources/cr_elements/icons.html">	2 <link rel="import" href="chrome://resources/cr_elements/icons.html">

3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l">	3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l">

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

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

6 <link rel="import" href="chrome://bookmarks/actions.html">	6 <link rel="import" href="chrome://bookmarks/actions.html">

7 <link rel="import" href="chrome://bookmarks/icons.html">	7 <link rel="import" href="chrome://bookmarks/icons.html">

8 <link rel="import" href="chrome://bookmarks/shared_style.html">	8 <link rel="import" href="chrome://bookmarks/shared_style.html">

9 <link rel="import" href="chrome://bookmarks/store_client.html">	9 <link rel="import" href="chrome://bookmarks/store_client.html">

10	10

(...skipping 64 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
75 transform: initial;	75 transform: initial;

76 }	76 }

77	77

78 [no-children] {	78 [no-children] {

79 -webkit-padding-start: 52px; /* The width of the arrow and its margin */	79 -webkit-padding-start: 52px; /* The width of the arrow and its margin */

80 }	80 }

81 </style>	81 </style>

82	82

83 <div id="container" class="v-centered" on-tap="selectFolder_"	83 <div id="container" class="v-centered" on-tap="selectFolder_"

84 draggable="[[!isRootFolder_(depth)]]"	84 draggable="[[!isRootFolder_(depth)]]"

	85 tabindex$="[[getTabIndex_(isSelectedFolder_)]]"

85 hidden="[[!isPositiveDepth_(depth)]]">	86 hidden="[[!isPositiveDepth_(depth)]]">

86 <template is="dom-if" if="[[hasChildFolder_(item_.children)]]">	87 <template is="dom-if" if="[[hasChildFolder_(item_.children)]]">

87 <paper-icon-button id="arrow" icon="cr:arrow-drop-down"	88 <paper-icon-button id="arrow" icon="cr:arrow-drop-down"

88 is-open$="[[!isClosed_]]" on-tap="toggleFolder_">	89 is-open$="[[!isClosed_]]" on-tap="toggleFolder_" tabindex="">
	tsergeant 2017/04/19 07:32:17 Should this be tabindex="-1"? Should this be tabindex="-1"? calamity 2017/04/28 06:15:47 I think this is a little better. -1 is still focus Show quoted text On 2017/04/19 07:32:17, tsergeant wrote: > Should this be tabindex="-1"? I think this is a little better. -1 is still focusable by mouse, which causes the focus to silently change when you click another item's button. Pressing up/down after that then goes up/down relative to that item. Clicking with tabindex="" focuses the list and makes up/down move that instead of selecting a new item. tsergeant 2017/05/01 01:35:57 I'm not sure what you mean by "focuses the list"? Show quoted text On 2017/04/28 06:15:47, calamity wrote: > On 2017/04/19 07:32:17, tsergeant wrote: > > Should this be tabindex="-1"? > > I think this is a little better. -1 is still focusable by mouse, which causes > the focus to silently change when you click another item's button. Pressing > up/down after that then goes up/down relative to that item. > > Clicking with tabindex="" focuses the list and makes up/down move that instead > of selecting a new item. I'm not sure what you mean by "focuses the list"? When I click the toggle button with a different node selected, the focus gets dropped and goes back to <body> calamity 2017/05/03 03:01:47 Discussed. Show quoted text On 2017/05/01 01:35:57, tsergeant wrote: > On 2017/04/28 06:15:47, calamity wrote: > > On 2017/04/19 07:32:17, tsergeant wrote: > > > Should this be tabindex="-1"? > > > > I think this is a little better. -1 is still focusable by mouse, which causes > > the focus to silently change when you click another item's button. Pressing > > up/down after that then goes up/down relative to that item. > > > > Clicking with tabindex="" focuses the list and makes up/down move that instead > > of selecting a new item. > > I'm not sure what you mean by "focuses the list"? When I click the toggle button > with a different node selected, the focus gets dropped and goes back to <body> Discussed.
89 </paper-icon-button>	90 </paper-icon-button>

90 </template>	91 </template>

91 <div id="folder-label" class="v-centered">	92 <div id="folder-label" class="v-centered">

92 <iron-icon icon="[[getFolderIcon_(isSelectedFolder_)]]"	93 <iron-icon icon="[[getFolderIcon_(isSelectedFolder_)]]"

93 no-children$="[[!hasChildFolder_(item_.children)]]">	94 no-children$="[[!hasChildFolder_(item_.children)]]">

94 </iron-icon>	95 </iron-icon>

95 <div class="menu-label">[[item_.title]]</div>	96 <div class="menu-label">[[item_.title]]</div>

96 </div>	97 </div>

97 </div>	98 </div>

98 <div id="descendants" hidden$="[[isClosed_]]">	99 <div id="descendants" hidden$="[[isClosed_]]">

99 <template is="dom-repeat"	100 <template is="dom-repeat"

100 items="[[item_.children]]"	101 items="[[item_.children]]"

101 as="child"	102 as="child"

102 filter="isFolder_">	103 filter="isFolder_">

103 <bookmarks-folder-node item-id="[[child]]"	104 <bookmarks-folder-node item-id="[[child]]"

104 depth="[[getChildDepth_(depth)]]">	105 depth="[[getChildDepth_(depth)]]">

105 </bookmarks-folder-node>	106 </bookmarks-folder-node>

106 </template>	107 </template>

107 </div>	108 </div>

108 </template>	109 </template>

109 <script src="chrome://bookmarks/folder_node.js"></script>	110 <script src="chrome://bookmarks/folder_node.js"></script>

110 </dom-module>	111 </dom-module>

OLD	NEW