@fundamental-styles/mcp 0.41.9-rc.9 → 0.41.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/CHANGELOG.md +69 -3
- package/data/components/avatar-product-switch.md +167 -52
- package/data/components/container.md +113 -0
- package/data/components/dialog-docs-static-settings.md +1490 -130
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +470 -1088
- package/data/components/navigation.md +2269 -489
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +3 -228
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +3 -209
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +0 -44
- package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
- package/data/examples/Components/product-switch/large.example.html +65 -19
- package/data/examples/Components/product-switch/medium.example.html +5 -7
- package/data/examples/Components/product-switch/small.example.html +4 -6
- package/data/examples/Components/product-switch/two-column.example.html +20 -0
- package/data/examples/Components/settings/md.example.html +124 -30
- package/data/examples/Components/settings/sm.example.html +64 -27
- package/data/examples/Components/settings/xl-appearance.example.html +370 -0
- package/data/examples/Components/settings/xl-language-region.example.html +284 -0
- package/data/examples/Components/settings/xl-notifications-details.example.html +240 -0
- package/data/examples/Components/settings/xl-notifications.example.html +370 -0
- package/data/examples/Components/settings/xl-user-account.example.html +114 -0
- package/data/examples/Components/settings/xl.example.html +113 -25
- package/package.json +1 -1
- package/data/examples/Components/settings/xl-default.example.html +0 -108
|
@@ -67,7 +67,7 @@ npm install fundamental-styles
|
|
|
67
67
|
<div
|
|
68
68
|
class="fd-navigation__item"
|
|
69
69
|
aria-current="page"
|
|
70
|
-
aria-selected="
|
|
70
|
+
aria-selected="false"
|
|
71
71
|
aria-expanded="false"
|
|
72
72
|
role="menuitem"
|
|
73
73
|
>
|
|
@@ -91,11 +91,11 @@ npm install fundamental-styles
|
|
|
91
91
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
92
92
|
<a class="fd-navigation__link" role="link" href="#">
|
|
93
93
|
<span
|
|
94
|
-
class="fd-navigation__icon sap-icon--
|
|
94
|
+
class="fd-navigation__icon sap-icon--attachment"
|
|
95
95
|
role="presentation"
|
|
96
96
|
aria-hidden="true"
|
|
97
97
|
></span>
|
|
98
|
-
<span class="fd-navigation__text">
|
|
98
|
+
<span class="fd-navigation__text">Attachment</span>
|
|
99
99
|
<span
|
|
100
100
|
class="fd-navigation__selection-indicator"
|
|
101
101
|
role="presentation"
|
|
@@ -110,11 +110,11 @@ npm install fundamental-styles
|
|
|
110
110
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
111
111
|
<a class="fd-navigation__link" role="link" href="#">
|
|
112
112
|
<span
|
|
113
|
-
class="fd-navigation__icon sap-icon--
|
|
113
|
+
class="fd-navigation__icon sap-icon--create-entry-time"
|
|
114
114
|
role="presentation"
|
|
115
115
|
aria-hidden="true"
|
|
116
116
|
></span>
|
|
117
|
-
<span class="fd-navigation__text">
|
|
117
|
+
<span class="fd-navigation__text">Time</span>
|
|
118
118
|
<span
|
|
119
119
|
class="fd-navigation__selection-indicator"
|
|
120
120
|
role="presentation"
|
|
@@ -125,118 +125,121 @@ npm install fundamental-styles
|
|
|
125
125
|
</div>
|
|
126
126
|
</li>
|
|
127
127
|
|
|
128
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
129
|
-
<div
|
|
130
|
-
|
|
128
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
129
|
+
<div
|
|
130
|
+
class="fd-navigation__item fd-popover__control"
|
|
131
|
+
aria-current="false"
|
|
132
|
+
aria-expanded="true"
|
|
133
|
+
aria-selected="true"
|
|
134
|
+
aria-haspopup="tree"
|
|
135
|
+
role="menuitem"
|
|
136
|
+
>
|
|
137
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
131
138
|
<span
|
|
132
|
-
class="fd-navigation__icon sap-icon--
|
|
139
|
+
class="fd-navigation__icon sap-icon--basket"
|
|
133
140
|
role="presentation"
|
|
134
141
|
aria-hidden="true"
|
|
135
142
|
></span>
|
|
136
|
-
<span class="fd-navigation__text">
|
|
143
|
+
<span class="fd-navigation__text">Basket</span>
|
|
137
144
|
<span
|
|
138
145
|
class="fd-navigation__selection-indicator"
|
|
139
146
|
role="presentation"
|
|
140
147
|
aria-hidden="true"
|
|
141
148
|
aria-label="selection indicator"
|
|
142
149
|
></span>
|
|
143
|
-
</a>
|
|
144
|
-
</div>
|
|
145
|
-
</li>
|
|
146
|
-
|
|
147
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
148
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
149
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
150
150
|
<span
|
|
151
|
-
class="fd-
|
|
151
|
+
class="fd-navigation__has-children-indicator"
|
|
152
152
|
role="presentation"
|
|
153
153
|
aria-hidden="true"
|
|
154
|
+
aria-label="has children indicator"
|
|
154
155
|
></span>
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
156
|
+
</a>
|
|
157
|
+
</div>
|
|
158
|
+
<div
|
|
159
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
|
|
160
|
+
aria-hidden="false"
|
|
161
|
+
>
|
|
162
|
+
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
163
|
+
<ul
|
|
164
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
165
|
+
role="tree"
|
|
166
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
167
|
+
tabindex="-1"
|
|
159
168
|
aria-hidden="true"
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
</a>
|
|
163
|
-
</div>
|
|
164
|
-
</li>
|
|
165
|
-
|
|
166
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
167
|
-
<div
|
|
168
|
-
class="fd-navigation__item fd-popover__control"
|
|
169
|
-
aria-current="false"
|
|
170
|
-
aria-expanded="true"
|
|
171
|
-
aria-haspopup="tree"
|
|
172
|
-
role="menuitem"
|
|
173
|
-
>
|
|
174
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
175
|
-
<span
|
|
176
|
-
class="fd-navigation__icon sap-icon--basket"
|
|
177
|
-
role="presentation"
|
|
178
|
-
aria-hidden="true"
|
|
179
|
-
></span>
|
|
180
|
-
<span class="fd-navigation__text">Basket</span>
|
|
181
|
-
<span
|
|
182
|
-
class="fd-navigation__selection-indicator"
|
|
183
|
-
role="presentation"
|
|
184
|
-
aria-hidden="true"
|
|
185
|
-
aria-label="selection indicator"
|
|
186
|
-
></span>
|
|
187
|
-
<span
|
|
188
|
-
class="fd-navigation__has-children-indicator"
|
|
189
|
-
role="presentation"
|
|
190
|
-
aria-hidden="true"
|
|
191
|
-
aria-label="has children indicator"
|
|
192
|
-
></span>
|
|
193
|
-
</a>
|
|
194
|
-
</div>
|
|
169
|
+
>
|
|
170
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
195
171
|
<div
|
|
196
|
-
class="fd-
|
|
197
|
-
aria-
|
|
172
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
173
|
+
aria-level="1"
|
|
174
|
+
role="treeitem"
|
|
175
|
+
title="Future Orders"
|
|
176
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
177
|
+
aria-expanded="false"
|
|
178
|
+
aria-selected="false"
|
|
198
179
|
>
|
|
199
|
-
<
|
|
200
|
-
<
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
tabindex="-1"
|
|
180
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
181
|
+
<span class="fd-navigation__text">Future Orders</span>
|
|
182
|
+
<span
|
|
183
|
+
class="fd-navigation__selection-indicator"
|
|
184
|
+
role="presentation"
|
|
205
185
|
aria-hidden="true"
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
186
|
+
aria-label="selection indicator"
|
|
187
|
+
></span>
|
|
188
|
+
</a>
|
|
189
|
+
</div>
|
|
190
|
+
</li>
|
|
191
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
192
|
+
<div
|
|
193
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
194
|
+
aria-level="1"
|
|
195
|
+
role="treeitem"
|
|
196
|
+
title="Current Orders"
|
|
197
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
198
|
+
aria-expanded="false"
|
|
199
|
+
aria-selected="true"
|
|
200
|
+
>
|
|
201
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
202
|
+
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
203
|
+
<span
|
|
204
|
+
class="fd-navigation__selection-indicator"
|
|
205
|
+
role="presentation"
|
|
206
|
+
aria-hidden="true"
|
|
207
|
+
aria-label="selection indicator"
|
|
208
|
+
></span>
|
|
209
|
+
</a>
|
|
210
|
+
</li>
|
|
211
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
212
|
+
<div
|
|
213
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
214
|
+
aria-level="1"
|
|
215
|
+
role="treeitem"
|
|
216
|
+
title="Past Orders"
|
|
217
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
218
|
+
aria-expanded="false"
|
|
219
|
+
aria-selected="false"
|
|
220
|
+
>
|
|
221
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
222
|
+
<span class="fd-navigation__text">Past Orders</span>
|
|
223
|
+
<span
|
|
224
|
+
class="fd-navigation__selection-indicator"
|
|
225
|
+
role="presentation"
|
|
226
|
+
aria-hidden="true"
|
|
227
|
+
aria-label="selection indicator"
|
|
228
|
+
></span>
|
|
229
|
+
</a>
|
|
227
230
|
</li>
|
|
228
231
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
229
232
|
<div
|
|
230
233
|
class="fd-navigation__item fd-navigation__item--child"
|
|
231
234
|
aria-level="1"
|
|
232
235
|
role="treeitem"
|
|
233
|
-
title="
|
|
236
|
+
title="Lost Orders"
|
|
234
237
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
235
238
|
aria-expanded="false"
|
|
236
|
-
aria-selected="
|
|
239
|
+
aria-selected="false"
|
|
237
240
|
>
|
|
238
241
|
<a class="fd-navigation__link" role="link" href="#">
|
|
239
|
-
<span class="fd-navigation__text">
|
|
242
|
+
<span class="fd-navigation__text">Lost Orders</span>
|
|
240
243
|
<span
|
|
241
244
|
class="fd-navigation__selection-indicator"
|
|
242
245
|
role="presentation"
|
|
@@ -250,33 +253,39 @@ npm install fundamental-styles
|
|
|
250
253
|
class="fd-navigation__item fd-navigation__item--child"
|
|
251
254
|
aria-level="1"
|
|
252
255
|
role="treeitem"
|
|
253
|
-
title="
|
|
256
|
+
title="Forgotten Orders"
|
|
254
257
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
255
258
|
aria-expanded="false"
|
|
256
259
|
aria-selected="false"
|
|
257
260
|
>
|
|
258
261
|
<a class="fd-navigation__link" role="link" href="#">
|
|
259
|
-
<span class="fd-navigation__text">
|
|
262
|
+
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
260
263
|
<span
|
|
261
264
|
class="fd-navigation__selection-indicator"
|
|
262
265
|
role="presentation"
|
|
263
266
|
aria-hidden="true"
|
|
264
267
|
aria-label="selection indicator"
|
|
265
268
|
></span>
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
269
|
+
<span
|
|
270
|
+
class="fd-navigation__external-link-indicator"
|
|
271
|
+
role="presentation"
|
|
272
|
+
aria-hidden="true"
|
|
273
|
+
aria-label="external link indicator"
|
|
274
|
+
></span>
|
|
275
|
+
</a>
|
|
276
|
+
</li>
|
|
277
|
+
</ul>
|
|
278
|
+
</li>
|
|
279
|
+
|
|
280
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
281
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
282
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
283
|
+
<span
|
|
284
|
+
class="fd-navigation__icon sap-icon--shield"
|
|
285
|
+
role="presentation"
|
|
286
|
+
aria-hidden="true"
|
|
287
|
+
></span>
|
|
288
|
+
<span class="fd-navigation__text">Shield</span>
|
|
280
289
|
<span
|
|
281
290
|
class="fd-navigation__selection-indicator"
|
|
282
291
|
role="presentation"
|
|
@@ -284,19 +293,18 @@ npm install fundamental-styles
|
|
|
284
293
|
aria-label="selection indicator"
|
|
285
294
|
></span>
|
|
286
295
|
</a>
|
|
287
|
-
</
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
296
|
+
</div>
|
|
297
|
+
</li>
|
|
298
|
+
|
|
299
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
300
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
301
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
302
|
+
<span
|
|
303
|
+
class="fd-navigation__icon sap-icon--action-settings"
|
|
304
|
+
role="presentation"
|
|
305
|
+
aria-hidden="true"
|
|
306
|
+
></span>
|
|
307
|
+
<span class="fd-navigation__text">Cog</span>
|
|
300
308
|
<span
|
|
301
309
|
class="fd-navigation__selection-indicator"
|
|
302
310
|
role="presentation"
|
|
@@ -304,245 +312,39 @@ npm install fundamental-styles
|
|
|
304
312
|
aria-label="selection indicator"
|
|
305
313
|
></span>
|
|
306
314
|
<span
|
|
307
|
-
class="fd-
|
|
315
|
+
class="fd-navigation__has-children-indicator"
|
|
308
316
|
role="presentation"
|
|
309
317
|
aria-hidden="true"
|
|
310
|
-
aria-label="
|
|
318
|
+
aria-label="has children indicator, expanded"
|
|
311
319
|
></span>
|
|
312
320
|
</a>
|
|
313
|
-
</
|
|
314
|
-
</
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
role="presentation"
|
|
329
|
-
aria-hidden="true"
|
|
330
|
-
aria-label="selection indicator"
|
|
331
|
-
></span>
|
|
332
|
-
</a>
|
|
333
|
-
</div>
|
|
334
|
-
</li>
|
|
335
|
-
|
|
336
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
321
|
+
</div>
|
|
322
|
+
</li>
|
|
323
|
+
|
|
324
|
+
<li
|
|
325
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
326
|
+
role="presentation"
|
|
327
|
+
aria-hidden="true"
|
|
328
|
+
></li>
|
|
329
|
+
|
|
330
|
+
<li
|
|
331
|
+
role="none"
|
|
332
|
+
tabindex="-1"
|
|
333
|
+
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
334
|
+
aria-hidden="true"
|
|
335
|
+
>
|
|
337
336
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
338
|
-
<a class="fd-navigation__link" role="
|
|
337
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
339
338
|
<span
|
|
340
|
-
class="fd-navigation__icon sap-icon--
|
|
339
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
341
340
|
role="presentation"
|
|
342
341
|
aria-hidden="true"
|
|
343
342
|
></span>
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
aria-label="selection indicator"
|
|
350
|
-
></span>
|
|
351
|
-
<span
|
|
352
|
-
class="fd-navigation__has-children-indicator"
|
|
353
|
-
role="presentation"
|
|
354
|
-
aria-hidden="true"
|
|
355
|
-
aria-label="has children indicator, expanded"
|
|
356
|
-
></span>
|
|
357
|
-
</a>
|
|
358
|
-
</div>
|
|
359
|
-
</li>
|
|
360
|
-
|
|
361
|
-
<li
|
|
362
|
-
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
363
|
-
role="presentation"
|
|
364
|
-
aria-hidden="true"
|
|
365
|
-
></li>
|
|
366
|
-
|
|
367
|
-
<li
|
|
368
|
-
role="none"
|
|
369
|
-
tabindex="-1"
|
|
370
|
-
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
371
|
-
aria-hidden="true"
|
|
372
|
-
>
|
|
373
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="true" role="menuitem">
|
|
374
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
375
|
-
<span
|
|
376
|
-
class="fd-navigation__icon sap-icon--overflow"
|
|
377
|
-
role="presentation"
|
|
378
|
-
aria-hidden="true"
|
|
379
|
-
></span>
|
|
380
|
-
</a>
|
|
381
|
-
</div>
|
|
382
|
-
<div
|
|
383
|
-
class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
|
|
384
|
-
aria-hidden="false"
|
|
385
|
-
id="navMenuOverflow"
|
|
386
|
-
>
|
|
387
|
-
<div class="fd-navigation__list-wrapper">
|
|
388
|
-
<ul
|
|
389
|
-
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
390
|
-
role="menu"
|
|
391
|
-
aria-roledescription="Navigation List Tree"
|
|
392
|
-
tabindex="-1"
|
|
393
|
-
>
|
|
394
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
395
|
-
<div
|
|
396
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
397
|
-
role="menuitem"
|
|
398
|
-
aria-disabled="false"
|
|
399
|
-
aria-posinset="1"
|
|
400
|
-
aria-setsize="3"
|
|
401
|
-
aria-haspopup="false"
|
|
402
|
-
aria-labelledby="txt-1"
|
|
403
|
-
aria-expanded="false"
|
|
404
|
-
>
|
|
405
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
406
|
-
<span
|
|
407
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
408
|
-
role="presentation"
|
|
409
|
-
aria-hidden="true"
|
|
410
|
-
></span>
|
|
411
|
-
<span class="fd-navigation__text" id="txt-1">Parent Item</span>
|
|
412
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
413
|
-
</a>
|
|
414
|
-
</div>
|
|
415
|
-
</li>
|
|
416
|
-
|
|
417
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
418
|
-
<div
|
|
419
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
420
|
-
role="menuitem"
|
|
421
|
-
aria-disabled="false"
|
|
422
|
-
aria-posinset="2"
|
|
423
|
-
aria-setsize="3"
|
|
424
|
-
aria-haspopup="menu"
|
|
425
|
-
aria-labelledby="txt-2"
|
|
426
|
-
aria-expanded="true"
|
|
427
|
-
aria-owns="children-menu"
|
|
428
|
-
>
|
|
429
|
-
<a
|
|
430
|
-
class="fd-navigation__link"
|
|
431
|
-
role="button"
|
|
432
|
-
tabindex="0"
|
|
433
|
-
aria-controls="navPopover3"
|
|
434
|
-
>
|
|
435
|
-
<span
|
|
436
|
-
class="fd-navigation__icon sap-icon--horizontal-bar-chart"
|
|
437
|
-
role="presentation"
|
|
438
|
-
aria-hidden="true"
|
|
439
|
-
></span>
|
|
440
|
-
<span class="fd-navigation__text" id="txt-2">Parent Item</span>
|
|
441
|
-
<span
|
|
442
|
-
class="fd-navigation__selection-indicator"
|
|
443
|
-
role="presentation"
|
|
444
|
-
aria-hidden="true"
|
|
445
|
-
aria-label="selection indicator"
|
|
446
|
-
></span>
|
|
447
|
-
<span
|
|
448
|
-
class="fd-navigation__has-children-indicator"
|
|
449
|
-
role="presentation"
|
|
450
|
-
aria-hidden="true"
|
|
451
|
-
aria-label="has children indicator, expanded"
|
|
452
|
-
></span>
|
|
453
|
-
</a>
|
|
454
|
-
<div
|
|
455
|
-
class="fd-navigation__list-container fd-navigation__list-container--submenu"
|
|
456
|
-
aria-hidden="false"
|
|
457
|
-
>
|
|
458
|
-
<div class="fd-navigation__list-wrapper">
|
|
459
|
-
<ul
|
|
460
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
461
|
-
id="children-menu"
|
|
462
|
-
role="menu"
|
|
463
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
464
|
-
tabindex="-1"
|
|
465
|
-
>
|
|
466
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
467
|
-
<div
|
|
468
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
469
|
-
aria-labelledby="txt-child-1"
|
|
470
|
-
role="menuitem"
|
|
471
|
-
aria-posinset="1"
|
|
472
|
-
aria-setsize="3"
|
|
473
|
-
aria-disabled="false"
|
|
474
|
-
aria-selected="false"
|
|
475
|
-
>
|
|
476
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
477
|
-
<span class="fd-navigation__text" id="txt-child-1"
|
|
478
|
-
>Child Item</span
|
|
479
|
-
>
|
|
480
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
481
|
-
</a>
|
|
482
|
-
</div>
|
|
483
|
-
</li>
|
|
484
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
485
|
-
<div
|
|
486
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
487
|
-
aria-labelledby="txt-child-2"
|
|
488
|
-
role="menuitem"
|
|
489
|
-
aria-posinset="2"
|
|
490
|
-
aria-setsize="3"
|
|
491
|
-
aria-disabled="false"
|
|
492
|
-
aria-selected="false"
|
|
493
|
-
>
|
|
494
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
495
|
-
<span class="fd-navigation__text" id="txt-child-2"
|
|
496
|
-
>Child Item</span
|
|
497
|
-
>
|
|
498
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
499
|
-
</a>
|
|
500
|
-
</li>
|
|
501
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
502
|
-
<div
|
|
503
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
504
|
-
aria-labelledby="txt-child-3"
|
|
505
|
-
role="menuitem"
|
|
506
|
-
aria-posinset="3"
|
|
507
|
-
aria-setsize="3"
|
|
508
|
-
aria-disabled="false"
|
|
509
|
-
aria-selected="true"
|
|
510
|
-
>
|
|
511
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
512
|
-
<span class="fd-navigation__text" id="txt-child-3"
|
|
513
|
-
>Child Item</span
|
|
514
|
-
>
|
|
515
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
516
|
-
</a>
|
|
517
|
-
</li>
|
|
518
|
-
</ul>
|
|
519
|
-
</li>
|
|
520
|
-
|
|
521
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
522
|
-
<div
|
|
523
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
524
|
-
role="menuitem"
|
|
525
|
-
aria-disabled="false"
|
|
526
|
-
aria-posinset="3"
|
|
527
|
-
aria-setsize="3"
|
|
528
|
-
aria-haspopup="false"
|
|
529
|
-
aria-labelledby="txt-3"
|
|
530
|
-
aria-expanded="false"
|
|
531
|
-
>
|
|
532
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
533
|
-
<span
|
|
534
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
535
|
-
role="presentation"
|
|
536
|
-
aria-hidden="true"
|
|
537
|
-
></span>
|
|
538
|
-
<span class="fd-navigation__text" id="txt-3">Parent Item</span>
|
|
539
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
540
|
-
</a>
|
|
541
|
-
</li>
|
|
542
|
-
</ul>
|
|
543
|
-
</li>
|
|
544
|
-
</ul>
|
|
545
|
-
</nav>
|
|
343
|
+
</a>
|
|
344
|
+
</div>
|
|
345
|
+
</li>
|
|
346
|
+
</ul>
|
|
347
|
+
</nav>
|
|
546
348
|
```
|
|
547
349
|
|
|
548
350
|
## Modifiers
|
|
@@ -561,16 +363,11 @@ This component uses the following BEM elements:
|
|
|
561
363
|
- `fd-navigation__icon`
|
|
562
364
|
- `fd-navigation__item`
|
|
563
365
|
- `fd-navigation__item--child`
|
|
564
|
-
- `fd-navigation__item--overflow`
|
|
565
|
-
- `fd-navigation__item--submenu-child`
|
|
566
366
|
- `fd-navigation__item--with-expander`
|
|
567
367
|
- `fd-navigation__link`
|
|
568
368
|
- `fd-navigation__list`
|
|
569
369
|
- `fd-navigation__list--child-items`
|
|
570
|
-
- `fd-navigation__list--parent-items`
|
|
571
370
|
- `fd-navigation__list-container`
|
|
572
|
-
- `fd-navigation__list-container--menu`
|
|
573
|
-
- `fd-navigation__list-container--submenu`
|
|
574
371
|
- `fd-navigation__list-item`
|
|
575
372
|
- `fd-navigation__list-item--overflow`
|
|
576
373
|
- `fd-navigation__list-item--spacer`
|
|
@@ -592,7 +389,7 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
592
389
|
<div
|
|
593
390
|
class="fd-navigation__item"
|
|
594
391
|
aria-current="page"
|
|
595
|
-
aria-selected="
|
|
392
|
+
aria-selected="false"
|
|
596
393
|
aria-expanded="false"
|
|
597
394
|
role="menuitem"
|
|
598
395
|
>
|
|
@@ -616,11 +413,11 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
616
413
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
617
414
|
<a class="fd-navigation__link" role="link" href="#">
|
|
618
415
|
<span
|
|
619
|
-
class="fd-navigation__icon sap-icon--
|
|
416
|
+
class="fd-navigation__icon sap-icon--attachment"
|
|
620
417
|
role="presentation"
|
|
621
418
|
aria-hidden="true"
|
|
622
419
|
></span>
|
|
623
|
-
<span class="fd-navigation__text">
|
|
420
|
+
<span class="fd-navigation__text">Attachment</span>
|
|
624
421
|
<span
|
|
625
422
|
class="fd-navigation__selection-indicator"
|
|
626
423
|
role="presentation"
|
|
@@ -635,11 +432,11 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
635
432
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
636
433
|
<a class="fd-navigation__link" role="link" href="#">
|
|
637
434
|
<span
|
|
638
|
-
class="fd-navigation__icon sap-icon--
|
|
435
|
+
class="fd-navigation__icon sap-icon--create-entry-time"
|
|
639
436
|
role="presentation"
|
|
640
437
|
aria-hidden="true"
|
|
641
438
|
></span>
|
|
642
|
-
<span class="fd-navigation__text">
|
|
439
|
+
<span class="fd-navigation__text">Time</span>
|
|
643
440
|
<span
|
|
644
441
|
class="fd-navigation__selection-indicator"
|
|
645
442
|
role="presentation"
|
|
@@ -650,118 +447,121 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
650
447
|
</div>
|
|
651
448
|
</li>
|
|
652
449
|
|
|
653
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
654
|
-
<div
|
|
655
|
-
|
|
450
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
451
|
+
<div
|
|
452
|
+
class="fd-navigation__item fd-popover__control"
|
|
453
|
+
aria-current="false"
|
|
454
|
+
aria-expanded="true"
|
|
455
|
+
aria-selected="true"
|
|
456
|
+
aria-haspopup="tree"
|
|
457
|
+
role="menuitem"
|
|
458
|
+
>
|
|
459
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
656
460
|
<span
|
|
657
|
-
class="fd-navigation__icon sap-icon--
|
|
461
|
+
class="fd-navigation__icon sap-icon--basket"
|
|
658
462
|
role="presentation"
|
|
659
463
|
aria-hidden="true"
|
|
660
464
|
></span>
|
|
661
|
-
<span class="fd-navigation__text">
|
|
465
|
+
<span class="fd-navigation__text">Basket</span>
|
|
662
466
|
<span
|
|
663
467
|
class="fd-navigation__selection-indicator"
|
|
664
468
|
role="presentation"
|
|
665
469
|
aria-hidden="true"
|
|
666
470
|
aria-label="selection indicator"
|
|
667
471
|
></span>
|
|
668
|
-
</a>
|
|
669
|
-
</div>
|
|
670
|
-
</li>
|
|
671
|
-
|
|
672
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
673
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
674
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
675
472
|
<span
|
|
676
|
-
class="fd-
|
|
473
|
+
class="fd-navigation__has-children-indicator"
|
|
677
474
|
role="presentation"
|
|
678
475
|
aria-hidden="true"
|
|
476
|
+
aria-label="has children indicator"
|
|
679
477
|
></span>
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
478
|
+
</a>
|
|
479
|
+
</div>
|
|
480
|
+
<div
|
|
481
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
|
|
482
|
+
aria-hidden="false"
|
|
483
|
+
>
|
|
484
|
+
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
485
|
+
<ul
|
|
486
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
487
|
+
role="tree"
|
|
488
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
489
|
+
tabindex="-1"
|
|
684
490
|
aria-hidden="true"
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
</a>
|
|
688
|
-
</div>
|
|
689
|
-
</li>
|
|
690
|
-
|
|
691
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
692
|
-
<div
|
|
693
|
-
class="fd-navigation__item fd-popover__control"
|
|
694
|
-
aria-current="false"
|
|
695
|
-
aria-expanded="true"
|
|
696
|
-
aria-haspopup="tree"
|
|
697
|
-
role="menuitem"
|
|
698
|
-
>
|
|
699
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
700
|
-
<span
|
|
701
|
-
class="fd-navigation__icon sap-icon--basket"
|
|
702
|
-
role="presentation"
|
|
703
|
-
aria-hidden="true"
|
|
704
|
-
></span>
|
|
705
|
-
<span class="fd-navigation__text">Basket</span>
|
|
706
|
-
<span
|
|
707
|
-
class="fd-navigation__selection-indicator"
|
|
708
|
-
role="presentation"
|
|
709
|
-
aria-hidden="true"
|
|
710
|
-
aria-label="selection indicator"
|
|
711
|
-
></span>
|
|
712
|
-
<span
|
|
713
|
-
class="fd-navigation__has-children-indicator"
|
|
714
|
-
role="presentation"
|
|
715
|
-
aria-hidden="true"
|
|
716
|
-
aria-label="has children indicator"
|
|
717
|
-
></span>
|
|
718
|
-
</a>
|
|
719
|
-
</div>
|
|
491
|
+
>
|
|
492
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
720
493
|
<div
|
|
721
|
-
class="fd-
|
|
722
|
-
aria-
|
|
494
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
495
|
+
aria-level="1"
|
|
496
|
+
role="treeitem"
|
|
497
|
+
title="Future Orders"
|
|
498
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
499
|
+
aria-expanded="false"
|
|
500
|
+
aria-selected="false"
|
|
723
501
|
>
|
|
724
|
-
<
|
|
725
|
-
<
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
tabindex="-1"
|
|
502
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
503
|
+
<span class="fd-navigation__text">Future Orders</span>
|
|
504
|
+
<span
|
|
505
|
+
class="fd-navigation__selection-indicator"
|
|
506
|
+
role="presentation"
|
|
730
507
|
aria-hidden="true"
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
508
|
+
aria-label="selection indicator"
|
|
509
|
+
></span>
|
|
510
|
+
</a>
|
|
511
|
+
</div>
|
|
512
|
+
</li>
|
|
513
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
514
|
+
<div
|
|
515
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
516
|
+
aria-level="1"
|
|
517
|
+
role="treeitem"
|
|
518
|
+
title="Current Orders"
|
|
519
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
520
|
+
aria-expanded="false"
|
|
521
|
+
aria-selected="true"
|
|
522
|
+
>
|
|
523
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
524
|
+
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
525
|
+
<span
|
|
526
|
+
class="fd-navigation__selection-indicator"
|
|
527
|
+
role="presentation"
|
|
528
|
+
aria-hidden="true"
|
|
529
|
+
aria-label="selection indicator"
|
|
530
|
+
></span>
|
|
531
|
+
</a>
|
|
532
|
+
</li>
|
|
533
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
534
|
+
<div
|
|
535
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
536
|
+
aria-level="1"
|
|
537
|
+
role="treeitem"
|
|
538
|
+
title="Past Orders"
|
|
539
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
540
|
+
aria-expanded="false"
|
|
541
|
+
aria-selected="false"
|
|
542
|
+
>
|
|
543
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
544
|
+
<span class="fd-navigation__text">Past Orders</span>
|
|
545
|
+
<span
|
|
546
|
+
class="fd-navigation__selection-indicator"
|
|
547
|
+
role="presentation"
|
|
548
|
+
aria-hidden="true"
|
|
549
|
+
aria-label="selection indicator"
|
|
550
|
+
></span>
|
|
551
|
+
</a>
|
|
752
552
|
</li>
|
|
753
553
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
754
554
|
<div
|
|
755
555
|
class="fd-navigation__item fd-navigation__item--child"
|
|
756
556
|
aria-level="1"
|
|
757
557
|
role="treeitem"
|
|
758
|
-
title="
|
|
558
|
+
title="Lost Orders"
|
|
759
559
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
760
560
|
aria-expanded="false"
|
|
761
|
-
aria-selected="
|
|
561
|
+
aria-selected="false"
|
|
762
562
|
>
|
|
763
563
|
<a class="fd-navigation__link" role="link" href="#">
|
|
764
|
-
<span class="fd-navigation__text">
|
|
564
|
+
<span class="fd-navigation__text">Lost Orders</span>
|
|
765
565
|
<span
|
|
766
566
|
class="fd-navigation__selection-indicator"
|
|
767
567
|
role="presentation"
|
|
@@ -775,33 +575,39 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
775
575
|
class="fd-navigation__item fd-navigation__item--child"
|
|
776
576
|
aria-level="1"
|
|
777
577
|
role="treeitem"
|
|
778
|
-
title="
|
|
578
|
+
title="Forgotten Orders"
|
|
779
579
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
780
580
|
aria-expanded="false"
|
|
781
581
|
aria-selected="false"
|
|
782
582
|
>
|
|
783
583
|
<a class="fd-navigation__link" role="link" href="#">
|
|
784
|
-
<span class="fd-navigation__text">
|
|
584
|
+
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
785
585
|
<span
|
|
786
586
|
class="fd-navigation__selection-indicator"
|
|
787
587
|
role="presentation"
|
|
788
588
|
aria-hidden="true"
|
|
789
589
|
aria-label="selection indicator"
|
|
790
590
|
></span>
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
591
|
+
<span
|
|
592
|
+
class="fd-navigation__external-link-indicator"
|
|
593
|
+
role="presentation"
|
|
594
|
+
aria-hidden="true"
|
|
595
|
+
aria-label="external link indicator"
|
|
596
|
+
></span>
|
|
597
|
+
</a>
|
|
598
|
+
</li>
|
|
599
|
+
</ul>
|
|
600
|
+
</li>
|
|
601
|
+
|
|
602
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
603
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
604
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
605
|
+
<span
|
|
606
|
+
class="fd-navigation__icon sap-icon--shield"
|
|
607
|
+
role="presentation"
|
|
608
|
+
aria-hidden="true"
|
|
609
|
+
></span>
|
|
610
|
+
<span class="fd-navigation__text">Shield</span>
|
|
805
611
|
<span
|
|
806
612
|
class="fd-navigation__selection-indicator"
|
|
807
613
|
role="presentation"
|
|
@@ -809,19 +615,18 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
809
615
|
aria-label="selection indicator"
|
|
810
616
|
></span>
|
|
811
617
|
</a>
|
|
812
|
-
</
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
618
|
+
</div>
|
|
619
|
+
</li>
|
|
620
|
+
|
|
621
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
622
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
623
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
624
|
+
<span
|
|
625
|
+
class="fd-navigation__icon sap-icon--action-settings"
|
|
626
|
+
role="presentation"
|
|
627
|
+
aria-hidden="true"
|
|
628
|
+
></span>
|
|
629
|
+
<span class="fd-navigation__text">Cog</span>
|
|
825
630
|
<span
|
|
826
631
|
class="fd-navigation__selection-indicator"
|
|
827
632
|
role="presentation"
|
|
@@ -829,245 +634,39 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
829
634
|
aria-label="selection indicator"
|
|
830
635
|
></span>
|
|
831
636
|
<span
|
|
832
|
-
class="fd-
|
|
637
|
+
class="fd-navigation__has-children-indicator"
|
|
833
638
|
role="presentation"
|
|
834
639
|
aria-hidden="true"
|
|
835
|
-
aria-label="
|
|
640
|
+
aria-label="has children indicator, expanded"
|
|
836
641
|
></span>
|
|
837
642
|
</a>
|
|
838
|
-
</
|
|
839
|
-
</
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
role="presentation"
|
|
854
|
-
aria-hidden="true"
|
|
855
|
-
aria-label="selection indicator"
|
|
856
|
-
></span>
|
|
857
|
-
</a>
|
|
858
|
-
</div>
|
|
859
|
-
</li>
|
|
860
|
-
|
|
861
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
643
|
+
</div>
|
|
644
|
+
</li>
|
|
645
|
+
|
|
646
|
+
<li
|
|
647
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
648
|
+
role="presentation"
|
|
649
|
+
aria-hidden="true"
|
|
650
|
+
></li>
|
|
651
|
+
|
|
652
|
+
<li
|
|
653
|
+
role="none"
|
|
654
|
+
tabindex="-1"
|
|
655
|
+
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
656
|
+
aria-hidden="true"
|
|
657
|
+
>
|
|
862
658
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
863
|
-
<a class="fd-navigation__link" role="
|
|
659
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
864
660
|
<span
|
|
865
|
-
class="fd-navigation__icon sap-icon--
|
|
661
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
866
662
|
role="presentation"
|
|
867
663
|
aria-hidden="true"
|
|
868
664
|
></span>
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
aria-label="selection indicator"
|
|
875
|
-
></span>
|
|
876
|
-
<span
|
|
877
|
-
class="fd-navigation__has-children-indicator"
|
|
878
|
-
role="presentation"
|
|
879
|
-
aria-hidden="true"
|
|
880
|
-
aria-label="has children indicator, expanded"
|
|
881
|
-
></span>
|
|
882
|
-
</a>
|
|
883
|
-
</div>
|
|
884
|
-
</li>
|
|
885
|
-
|
|
886
|
-
<li
|
|
887
|
-
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
888
|
-
role="presentation"
|
|
889
|
-
aria-hidden="true"
|
|
890
|
-
></li>
|
|
891
|
-
|
|
892
|
-
<li
|
|
893
|
-
role="none"
|
|
894
|
-
tabindex="-1"
|
|
895
|
-
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
896
|
-
aria-hidden="true"
|
|
897
|
-
>
|
|
898
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="true" role="menuitem">
|
|
899
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
900
|
-
<span
|
|
901
|
-
class="fd-navigation__icon sap-icon--overflow"
|
|
902
|
-
role="presentation"
|
|
903
|
-
aria-hidden="true"
|
|
904
|
-
></span>
|
|
905
|
-
</a>
|
|
906
|
-
</div>
|
|
907
|
-
<div
|
|
908
|
-
class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
|
|
909
|
-
aria-hidden="false"
|
|
910
|
-
id="navMenuOverflow"
|
|
911
|
-
>
|
|
912
|
-
<div class="fd-navigation__list-wrapper">
|
|
913
|
-
<ul
|
|
914
|
-
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
915
|
-
role="menu"
|
|
916
|
-
aria-roledescription="Navigation List Tree"
|
|
917
|
-
tabindex="-1"
|
|
918
|
-
>
|
|
919
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
920
|
-
<div
|
|
921
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
922
|
-
role="menuitem"
|
|
923
|
-
aria-disabled="false"
|
|
924
|
-
aria-posinset="1"
|
|
925
|
-
aria-setsize="3"
|
|
926
|
-
aria-haspopup="false"
|
|
927
|
-
aria-labelledby="txt-1"
|
|
928
|
-
aria-expanded="false"
|
|
929
|
-
>
|
|
930
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
931
|
-
<span
|
|
932
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
933
|
-
role="presentation"
|
|
934
|
-
aria-hidden="true"
|
|
935
|
-
></span>
|
|
936
|
-
<span class="fd-navigation__text" id="txt-1">Parent Item</span>
|
|
937
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
938
|
-
</a>
|
|
939
|
-
</div>
|
|
940
|
-
</li>
|
|
941
|
-
|
|
942
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
943
|
-
<div
|
|
944
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
945
|
-
role="menuitem"
|
|
946
|
-
aria-disabled="false"
|
|
947
|
-
aria-posinset="2"
|
|
948
|
-
aria-setsize="3"
|
|
949
|
-
aria-haspopup="menu"
|
|
950
|
-
aria-labelledby="txt-2"
|
|
951
|
-
aria-expanded="true"
|
|
952
|
-
aria-owns="children-menu"
|
|
953
|
-
>
|
|
954
|
-
<a
|
|
955
|
-
class="fd-navigation__link"
|
|
956
|
-
role="button"
|
|
957
|
-
tabindex="0"
|
|
958
|
-
aria-controls="navPopover3"
|
|
959
|
-
>
|
|
960
|
-
<span
|
|
961
|
-
class="fd-navigation__icon sap-icon--horizontal-bar-chart"
|
|
962
|
-
role="presentation"
|
|
963
|
-
aria-hidden="true"
|
|
964
|
-
></span>
|
|
965
|
-
<span class="fd-navigation__text" id="txt-2">Parent Item</span>
|
|
966
|
-
<span
|
|
967
|
-
class="fd-navigation__selection-indicator"
|
|
968
|
-
role="presentation"
|
|
969
|
-
aria-hidden="true"
|
|
970
|
-
aria-label="selection indicator"
|
|
971
|
-
></span>
|
|
972
|
-
<span
|
|
973
|
-
class="fd-navigation__has-children-indicator"
|
|
974
|
-
role="presentation"
|
|
975
|
-
aria-hidden="true"
|
|
976
|
-
aria-label="has children indicator, expanded"
|
|
977
|
-
></span>
|
|
978
|
-
</a>
|
|
979
|
-
<div
|
|
980
|
-
class="fd-navigation__list-container fd-navigation__list-container--submenu"
|
|
981
|
-
aria-hidden="false"
|
|
982
|
-
>
|
|
983
|
-
<div class="fd-navigation__list-wrapper">
|
|
984
|
-
<ul
|
|
985
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
986
|
-
id="children-menu"
|
|
987
|
-
role="menu"
|
|
988
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
989
|
-
tabindex="-1"
|
|
990
|
-
>
|
|
991
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
992
|
-
<div
|
|
993
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
994
|
-
aria-labelledby="txt-child-1"
|
|
995
|
-
role="menuitem"
|
|
996
|
-
aria-posinset="1"
|
|
997
|
-
aria-setsize="3"
|
|
998
|
-
aria-disabled="false"
|
|
999
|
-
aria-selected="false"
|
|
1000
|
-
>
|
|
1001
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1002
|
-
<span class="fd-navigation__text" id="txt-child-1"
|
|
1003
|
-
>Child Item</span
|
|
1004
|
-
>
|
|
1005
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1006
|
-
</a>
|
|
1007
|
-
</div>
|
|
1008
|
-
</li>
|
|
1009
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1010
|
-
<div
|
|
1011
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1012
|
-
aria-labelledby="txt-child-2"
|
|
1013
|
-
role="menuitem"
|
|
1014
|
-
aria-posinset="2"
|
|
1015
|
-
aria-setsize="3"
|
|
1016
|
-
aria-disabled="false"
|
|
1017
|
-
aria-selected="false"
|
|
1018
|
-
>
|
|
1019
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1020
|
-
<span class="fd-navigation__text" id="txt-child-2"
|
|
1021
|
-
>Child Item</span
|
|
1022
|
-
>
|
|
1023
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1024
|
-
</a>
|
|
1025
|
-
</li>
|
|
1026
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1027
|
-
<div
|
|
1028
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1029
|
-
aria-labelledby="txt-child-3"
|
|
1030
|
-
role="menuitem"
|
|
1031
|
-
aria-posinset="3"
|
|
1032
|
-
aria-setsize="3"
|
|
1033
|
-
aria-disabled="false"
|
|
1034
|
-
aria-selected="true"
|
|
1035
|
-
>
|
|
1036
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1037
|
-
<span class="fd-navigation__text" id="txt-child-3"
|
|
1038
|
-
>Child Item</span
|
|
1039
|
-
>
|
|
1040
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1041
|
-
</a>
|
|
1042
|
-
</li>
|
|
1043
|
-
</ul>
|
|
1044
|
-
</li>
|
|
1045
|
-
|
|
1046
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1047
|
-
<div
|
|
1048
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1049
|
-
role="menuitem"
|
|
1050
|
-
aria-disabled="false"
|
|
1051
|
-
aria-posinset="3"
|
|
1052
|
-
aria-setsize="3"
|
|
1053
|
-
aria-haspopup="false"
|
|
1054
|
-
aria-labelledby="txt-3"
|
|
1055
|
-
aria-expanded="false"
|
|
1056
|
-
>
|
|
1057
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1058
|
-
<span
|
|
1059
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
1060
|
-
role="presentation"
|
|
1061
|
-
aria-hidden="true"
|
|
1062
|
-
></span>
|
|
1063
|
-
<span class="fd-navigation__text" id="txt-3">Parent Item</span>
|
|
1064
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1065
|
-
</a>
|
|
1066
|
-
</li>
|
|
1067
|
-
</ul>
|
|
1068
|
-
</li>
|
|
1069
|
-
</ul>
|
|
1070
|
-
</nav>
|
|
665
|
+
</a>
|
|
666
|
+
</div>
|
|
667
|
+
</li>
|
|
668
|
+
</ul>
|
|
669
|
+
</nav>
|
|
1071
670
|
```
|
|
1072
671
|
|
|
1073
672
|
### Horizontal Navigation - Two-Click Area
|
|
@@ -1104,11 +703,11 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
1104
703
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
1105
704
|
<a class="fd-navigation__link" role="link" href="#">
|
|
1106
705
|
<span
|
|
1107
|
-
class="fd-navigation__icon sap-icon--
|
|
706
|
+
class="fd-navigation__icon sap-icon--create-entry-time"
|
|
1108
707
|
role="presentation"
|
|
1109
708
|
aria-hidden="true"
|
|
1110
709
|
></span>
|
|
1111
|
-
<span class="fd-navigation__text">
|
|
710
|
+
<span class="fd-navigation__text">Time</span>
|
|
1112
711
|
<span
|
|
1113
712
|
class="fd-navigation__selection-indicator"
|
|
1114
713
|
role="presentation"
|
|
@@ -1119,15 +718,22 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
1119
718
|
</div>
|
|
1120
719
|
</li>
|
|
1121
720
|
|
|
1122
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
1123
|
-
<div
|
|
1124
|
-
|
|
721
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
722
|
+
<div
|
|
723
|
+
class="fd-navigation__item fd-navigation__item--with-expander fd-popover__control"
|
|
724
|
+
aria-current="false"
|
|
725
|
+
aria-expanded="true"
|
|
726
|
+
aria-haspopup="tree"
|
|
727
|
+
aria-selected="true"
|
|
728
|
+
role="menuitem"
|
|
729
|
+
>
|
|
730
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
1125
731
|
<span
|
|
1126
|
-
class="fd-navigation__icon sap-icon--
|
|
732
|
+
class="fd-navigation__icon sap-icon--basket"
|
|
1127
733
|
role="presentation"
|
|
1128
734
|
aria-hidden="true"
|
|
1129
735
|
></span>
|
|
1130
|
-
<span class="fd-navigation__text">
|
|
736
|
+
<span class="fd-navigation__text">Basket</span>
|
|
1131
737
|
<span
|
|
1132
738
|
class="fd-navigation__selection-indicator"
|
|
1133
739
|
role="presentation"
|
|
@@ -1135,62 +741,38 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
1135
741
|
aria-label="selection indicator"
|
|
1136
742
|
></span>
|
|
1137
743
|
</a>
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
744
|
+
<span
|
|
745
|
+
class="fd-navigation__has-children-indicator"
|
|
746
|
+
role="button"
|
|
747
|
+
aria-hidden="true"
|
|
748
|
+
aria-label="Expand/Collapse"
|
|
749
|
+
aria-expanded="true"
|
|
750
|
+
></span>
|
|
751
|
+
</div>
|
|
752
|
+
<div
|
|
753
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
|
|
754
|
+
aria-hidden="false"
|
|
755
|
+
>
|
|
756
|
+
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
757
|
+
<ul
|
|
758
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
759
|
+
role="tree"
|
|
760
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
761
|
+
tabindex="-1"
|
|
1153
762
|
aria-hidden="true"
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
></span>
|
|
1168
|
-
<span class="fd-navigation__text">Time</span>
|
|
1169
|
-
<span
|
|
1170
|
-
class="fd-navigation__selection-indicator"
|
|
1171
|
-
role="presentation"
|
|
1172
|
-
aria-hidden="true"
|
|
1173
|
-
aria-label="selection indicator"
|
|
1174
|
-
></span>
|
|
1175
|
-
</a>
|
|
1176
|
-
</div>
|
|
1177
|
-
</li>
|
|
1178
|
-
|
|
1179
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
1180
|
-
<div
|
|
1181
|
-
class="fd-navigation__item fd-navigation__item--with-expander fd-popover__control"
|
|
1182
|
-
aria-current="false"
|
|
1183
|
-
aria-expanded="true"
|
|
1184
|
-
aria-haspopup="tree"
|
|
1185
|
-
role="menuitem"
|
|
1186
|
-
>
|
|
1187
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
1188
|
-
<span
|
|
1189
|
-
class="fd-navigation__icon sap-icon--basket"
|
|
1190
|
-
role="presentation"
|
|
1191
|
-
aria-hidden="true"
|
|
1192
|
-
></span>
|
|
1193
|
-
<span class="fd-navigation__text">Basket</span>
|
|
763
|
+
>
|
|
764
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
765
|
+
<div
|
|
766
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
767
|
+
aria-level="1"
|
|
768
|
+
role="treeitem"
|
|
769
|
+
title="Future Orders"
|
|
770
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
771
|
+
aria-expanded="false"
|
|
772
|
+
aria-selected="false"
|
|
773
|
+
>
|
|
774
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
775
|
+
<span class="fd-navigation__text">Future Orders</span>
|
|
1194
776
|
<span
|
|
1195
777
|
class="fd-navigation__selection-indicator"
|
|
1196
778
|
role="presentation"
|
|
@@ -1198,79 +780,106 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
1198
780
|
aria-label="selection indicator"
|
|
1199
781
|
></span>
|
|
1200
782
|
</a>
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
783
|
+
</div>
|
|
784
|
+
</li>
|
|
785
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
786
|
+
<div
|
|
787
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
788
|
+
aria-level="1"
|
|
789
|
+
role="treeitem"
|
|
790
|
+
title="Current Orders"
|
|
791
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
792
|
+
aria-expanded="false"
|
|
793
|
+
aria-selected="true"
|
|
794
|
+
>
|
|
795
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
796
|
+
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
797
|
+
<span
|
|
798
|
+
class="fd-navigation__selection-indicator"
|
|
799
|
+
role="presentation"
|
|
800
|
+
aria-hidden="true"
|
|
801
|
+
aria-label="selection indicator"
|
|
802
|
+
></span>
|
|
803
|
+
</a>
|
|
804
|
+
</li>
|
|
805
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
806
|
+
<div
|
|
807
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
808
|
+
aria-level="1"
|
|
809
|
+
role="treeitem"
|
|
810
|
+
title="Past Orders"
|
|
811
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
812
|
+
aria-expanded="false"
|
|
813
|
+
aria-selected="false"
|
|
814
|
+
>
|
|
815
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
816
|
+
<span class="fd-navigation__text">Past Orders</span>
|
|
817
|
+
<span
|
|
818
|
+
class="fd-navigation__selection-indicator"
|
|
819
|
+
role="presentation"
|
|
820
|
+
aria-hidden="true"
|
|
821
|
+
aria-label="selection indicator"
|
|
822
|
+
></span>
|
|
823
|
+
</a>
|
|
824
|
+
</li>
|
|
825
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
826
|
+
<div
|
|
827
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
828
|
+
aria-level="1"
|
|
829
|
+
role="treeitem"
|
|
830
|
+
title="Lost Orders"
|
|
831
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
832
|
+
aria-expanded="false"
|
|
833
|
+
aria-selected="false"
|
|
834
|
+
>
|
|
835
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
836
|
+
<span class="fd-navigation__text">Lost Orders</span>
|
|
837
|
+
<span
|
|
838
|
+
class="fd-navigation__selection-indicator"
|
|
839
|
+
role="presentation"
|
|
840
|
+
aria-hidden="true"
|
|
841
|
+
aria-label="selection indicator"
|
|
842
|
+
></span>
|
|
843
|
+
</a>
|
|
1241
844
|
</li>
|
|
1242
845
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1243
846
|
<div
|
|
1244
847
|
class="fd-navigation__item fd-navigation__item--child"
|
|
1245
848
|
aria-level="1"
|
|
1246
849
|
role="treeitem"
|
|
1247
|
-
title="
|
|
850
|
+
title="Forgotten Orders"
|
|
1248
851
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
1249
852
|
aria-expanded="false"
|
|
1250
|
-
aria-selected="
|
|
853
|
+
aria-selected="false"
|
|
1251
854
|
>
|
|
1252
855
|
<a class="fd-navigation__link" role="link" href="#">
|
|
1253
|
-
<span class="fd-navigation__text">
|
|
856
|
+
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
1254
857
|
<span
|
|
1255
858
|
class="fd-navigation__selection-indicator"
|
|
1256
859
|
role="presentation"
|
|
1257
860
|
aria-hidden="true"
|
|
1258
861
|
aria-label="selection indicator"
|
|
1259
862
|
></span>
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
863
|
+
<span
|
|
864
|
+
class="fd-navigation__external-link-indicator"
|
|
865
|
+
role="presentation"
|
|
866
|
+
aria-hidden="true"
|
|
867
|
+
aria-label="external link indicator"
|
|
868
|
+
></span>
|
|
869
|
+
</a>
|
|
870
|
+
</li>
|
|
871
|
+
</ul>
|
|
872
|
+
</li>
|
|
873
|
+
|
|
874
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
875
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
876
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
877
|
+
<span
|
|
878
|
+
class="fd-navigation__icon sap-icon--shield"
|
|
879
|
+
role="presentation"
|
|
880
|
+
aria-hidden="true"
|
|
881
|
+
></span>
|
|
882
|
+
<span class="fd-navigation__text">Shield</span>
|
|
1274
883
|
<span
|
|
1275
884
|
class="fd-navigation__selection-indicator"
|
|
1276
885
|
role="presentation"
|
|
@@ -1278,19 +887,24 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
1278
887
|
aria-label="selection indicator"
|
|
1279
888
|
></span>
|
|
1280
889
|
</a>
|
|
1281
|
-
</
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
890
|
+
</div>
|
|
891
|
+
</li>
|
|
892
|
+
|
|
893
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
894
|
+
<div
|
|
895
|
+
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
896
|
+
aria-current="false"
|
|
897
|
+
aria-expanded="false"
|
|
898
|
+
aria-selected="false"
|
|
899
|
+
role="menuitem"
|
|
900
|
+
>
|
|
901
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
902
|
+
<span
|
|
903
|
+
class="fd-navigation__icon sap-icon--action-settings"
|
|
904
|
+
role="presentation"
|
|
905
|
+
aria-hidden="true"
|
|
906
|
+
></span>
|
|
907
|
+
<span class="fd-navigation__text">Cog</span>
|
|
1294
908
|
<span
|
|
1295
909
|
class="fd-navigation__selection-indicator"
|
|
1296
910
|
role="presentation"
|
|
@@ -1298,270 +912,38 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
1298
912
|
aria-label="selection indicator"
|
|
1299
913
|
></span>
|
|
1300
914
|
</a>
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
aria-
|
|
1306
|
-
|
|
1307
|
-
title="Forgotten Orders"
|
|
1308
|
-
aria-roledescription="Navigation List Menu Item - Child"
|
|
1309
|
-
aria-expanded="false"
|
|
1310
|
-
aria-selected="false"
|
|
1311
|
-
>
|
|
1312
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1313
|
-
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
1314
|
-
<span
|
|
1315
|
-
class="fd-navigation__selection-indicator"
|
|
1316
|
-
role="presentation"
|
|
1317
|
-
aria-hidden="true"
|
|
1318
|
-
aria-label="selection indicator"
|
|
1319
|
-
></span>
|
|
1320
|
-
<span
|
|
1321
|
-
class="fd-navigation__external-link-indicator"
|
|
1322
|
-
role="presentation"
|
|
1323
|
-
aria-hidden="true"
|
|
1324
|
-
aria-label="external link indicator"
|
|
1325
|
-
></span>
|
|
1326
|
-
</a>
|
|
1327
|
-
</li>
|
|
1328
|
-
</ul>
|
|
915
|
+
<span
|
|
916
|
+
class="fd-navigation__has-children-indicator"
|
|
917
|
+
role="button"
|
|
918
|
+
aria-hidden="true"
|
|
919
|
+
aria-label="Expand/Collapse"
|
|
920
|
+
></span>
|
|
1329
921
|
</li>
|
|
1330
922
|
|
|
1331
|
-
<li
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
923
|
+
<li
|
|
924
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
925
|
+
role="presentation"
|
|
926
|
+
aria-hidden="true"
|
|
927
|
+
></li>
|
|
928
|
+
|
|
929
|
+
<li
|
|
930
|
+
role="none"
|
|
931
|
+
tabindex="-1"
|
|
932
|
+
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
933
|
+
aria-hidden="true"
|
|
934
|
+
>
|
|
935
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
936
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
1340
937
|
<span
|
|
1341
|
-
class="fd-
|
|
938
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
1342
939
|
role="presentation"
|
|
1343
940
|
aria-hidden="true"
|
|
1344
|
-
aria-label="selection indicator"
|
|
1345
941
|
></span>
|
|
1346
942
|
</a>
|
|
1347
943
|
</div>
|
|
1348
944
|
</li>
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
<div
|
|
1352
|
-
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
1353
|
-
aria-current="false"
|
|
1354
|
-
aria-expanded="false"
|
|
1355
|
-
aria-selected="true"
|
|
1356
|
-
role="menuitem"
|
|
1357
|
-
>
|
|
1358
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1359
|
-
<span
|
|
1360
|
-
class="fd-navigation__icon sap-icon--action-settings"
|
|
1361
|
-
role="presentation"
|
|
1362
|
-
aria-hidden="true"
|
|
1363
|
-
></span>
|
|
1364
|
-
<span class="fd-navigation__text">Cog</span>
|
|
1365
|
-
<span
|
|
1366
|
-
class="fd-navigation__selection-indicator"
|
|
1367
|
-
role="presentation"
|
|
1368
|
-
aria-hidden="true"
|
|
1369
|
-
aria-label="selection indicator"
|
|
1370
|
-
></span>
|
|
1371
|
-
</a>
|
|
1372
|
-
<span
|
|
1373
|
-
class="fd-navigation__has-children-indicator"
|
|
1374
|
-
role="button"
|
|
1375
|
-
aria-hidden="true"
|
|
1376
|
-
aria-label="Expand/Collapse"
|
|
1377
|
-
></span>
|
|
1378
|
-
</li>
|
|
1379
|
-
|
|
1380
|
-
<li
|
|
1381
|
-
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
1382
|
-
role="presentation"
|
|
1383
|
-
aria-hidden="true"
|
|
1384
|
-
></li>
|
|
1385
|
-
|
|
1386
|
-
<li
|
|
1387
|
-
role="none"
|
|
1388
|
-
tabindex="-1"
|
|
1389
|
-
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
1390
|
-
aria-hidden="true"
|
|
1391
|
-
>
|
|
1392
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="true" role="menuitem">
|
|
1393
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
1394
|
-
<span
|
|
1395
|
-
class="fd-navigation__icon sap-icon--overflow"
|
|
1396
|
-
role="presentation"
|
|
1397
|
-
aria-hidden="true"
|
|
1398
|
-
></span>
|
|
1399
|
-
</a>
|
|
1400
|
-
</div>
|
|
1401
|
-
<div
|
|
1402
|
-
class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
|
|
1403
|
-
aria-hidden="false"
|
|
1404
|
-
id="navMenuOverflow"
|
|
1405
|
-
>
|
|
1406
|
-
<div class="fd-navigation__list-wrapper">
|
|
1407
|
-
<ul
|
|
1408
|
-
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
1409
|
-
role="menu"
|
|
1410
|
-
aria-roledescription="Navigation List Tree"
|
|
1411
|
-
tabindex="-1"
|
|
1412
|
-
>
|
|
1413
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1414
|
-
<div
|
|
1415
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1416
|
-
role="menuitem"
|
|
1417
|
-
aria-disabled="false"
|
|
1418
|
-
aria-posinset="1"
|
|
1419
|
-
aria-setsize="3"
|
|
1420
|
-
aria-haspopup="false"
|
|
1421
|
-
aria-labelledby="txt-1"
|
|
1422
|
-
aria-expanded="false"
|
|
1423
|
-
>
|
|
1424
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1425
|
-
<span
|
|
1426
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
1427
|
-
role="presentation"
|
|
1428
|
-
aria-hidden="true"
|
|
1429
|
-
></span>
|
|
1430
|
-
<span class="fd-navigation__text" id="txt-1">Parent Item</span>
|
|
1431
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1432
|
-
</a>
|
|
1433
|
-
</div>
|
|
1434
|
-
</li>
|
|
1435
|
-
|
|
1436
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1437
|
-
<div
|
|
1438
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1439
|
-
role="menuitem"
|
|
1440
|
-
aria-disabled="false"
|
|
1441
|
-
aria-posinset="2"
|
|
1442
|
-
aria-setsize="3"
|
|
1443
|
-
aria-haspopup="menu"
|
|
1444
|
-
aria-labelledby="txt-2"
|
|
1445
|
-
aria-expanded="true"
|
|
1446
|
-
aria-owns="children-menu"
|
|
1447
|
-
>
|
|
1448
|
-
<a
|
|
1449
|
-
class="fd-navigation__link"
|
|
1450
|
-
role="button"
|
|
1451
|
-
tabindex="0"
|
|
1452
|
-
aria-controls="navPopover3"
|
|
1453
|
-
>
|
|
1454
|
-
<span
|
|
1455
|
-
class="fd-navigation__icon sap-icon--horizontal-bar-chart"
|
|
1456
|
-
role="presentation"
|
|
1457
|
-
aria-hidden="true"
|
|
1458
|
-
></span>
|
|
1459
|
-
<span class="fd-navigation__text" id="txt-2">Parent Item</span>
|
|
1460
|
-
<span
|
|
1461
|
-
class="fd-navigation__selection-indicator"
|
|
1462
|
-
role="presentation"
|
|
1463
|
-
aria-hidden="true"
|
|
1464
|
-
aria-label="selection indicator"
|
|
1465
|
-
></span>
|
|
1466
|
-
<span
|
|
1467
|
-
class="fd-navigation__has-children-indicator"
|
|
1468
|
-
role="presentation"
|
|
1469
|
-
aria-hidden="true"
|
|
1470
|
-
aria-label="has children indicator, expanded"
|
|
1471
|
-
></span>
|
|
1472
|
-
</a>
|
|
1473
|
-
<div
|
|
1474
|
-
class="fd-navigation__list-container fd-navigation__list-container--submenu"
|
|
1475
|
-
aria-hidden="false"
|
|
1476
|
-
>
|
|
1477
|
-
<div class="fd-navigation__list-wrapper">
|
|
1478
|
-
<ul
|
|
1479
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
1480
|
-
id="children-menu"
|
|
1481
|
-
role="menu"
|
|
1482
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
1483
|
-
tabindex="-1"
|
|
1484
|
-
>
|
|
1485
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1486
|
-
<div
|
|
1487
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1488
|
-
aria-labelledby="txt-child-1"
|
|
1489
|
-
role="menuitem"
|
|
1490
|
-
aria-posinset="1"
|
|
1491
|
-
aria-setsize="3"
|
|
1492
|
-
aria-disabled="false"
|
|
1493
|
-
aria-selected="false"
|
|
1494
|
-
>
|
|
1495
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1496
|
-
<span class="fd-navigation__text" id="txt-child-1"
|
|
1497
|
-
>Child Item</span
|
|
1498
|
-
>
|
|
1499
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1500
|
-
</a>
|
|
1501
|
-
</div>
|
|
1502
|
-
</li>
|
|
1503
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1504
|
-
<div
|
|
1505
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1506
|
-
aria-labelledby="txt-child-2"
|
|
1507
|
-
role="menuitem"
|
|
1508
|
-
aria-posinset="2"
|
|
1509
|
-
aria-setsize="3"
|
|
1510
|
-
aria-disabled="false"
|
|
1511
|
-
aria-selected="false"
|
|
1512
|
-
>
|
|
1513
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1514
|
-
<span class="fd-navigation__text" id="txt-child-2"
|
|
1515
|
-
>Child Item</span
|
|
1516
|
-
>
|
|
1517
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1518
|
-
</a>
|
|
1519
|
-
</li>
|
|
1520
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1521
|
-
<div
|
|
1522
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1523
|
-
aria-labelledby="txt-child-3"
|
|
1524
|
-
role="menuitem"
|
|
1525
|
-
aria-posinset="3"
|
|
1526
|
-
aria-setsize="3"
|
|
1527
|
-
aria-disabled="false"
|
|
1528
|
-
aria-selected="true"
|
|
1529
|
-
>
|
|
1530
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1531
|
-
<span class="fd-navigation__text" id="txt-child-3"
|
|
1532
|
-
>Child Item</span
|
|
1533
|
-
>
|
|
1534
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1535
|
-
</a>
|
|
1536
|
-
</li>
|
|
1537
|
-
</ul>
|
|
1538
|
-
</li>
|
|
1539
|
-
|
|
1540
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1541
|
-
<div
|
|
1542
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1543
|
-
role="menuitem"
|
|
1544
|
-
aria-disabled="false"
|
|
1545
|
-
aria-posinset="3"
|
|
1546
|
-
aria-setsize="3"
|
|
1547
|
-
aria-haspopup="false"
|
|
1548
|
-
aria-labelledby="txt-3"
|
|
1549
|
-
aria-expanded="false"
|
|
1550
|
-
>
|
|
1551
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1552
|
-
<span
|
|
1553
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
1554
|
-
role="presentation"
|
|
1555
|
-
aria-hidden="true"
|
|
1556
|
-
></span>
|
|
1557
|
-
<span class="fd-navigation__text" id="txt-3">Parent Item</span>
|
|
1558
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1559
|
-
</a>
|
|
1560
|
-
</li>
|
|
1561
|
-
</ul>
|
|
1562
|
-
</li>
|
|
1563
|
-
</ul>
|
|
1564
|
-
</nav>
|
|
945
|
+
</ul>
|
|
946
|
+
</nav>
|
|
1565
947
|
```
|
|
1566
948
|
|
|
1567
949
|
## Accessibility
|