@fundamental-styles/theming-preview 0.30.0-rc.9 → 0.30.0

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.
Files changed (15) hide show
  1. package/button.html +149 -139
  2. package/calendar.html +450 -289
  3. package/form.html +26 -26
  4. package/fundamental-styles.css +4 -140
  5. package/header-footer.html +15 -15
  6. package/icon.html +5 -5
  7. package/input.html +141 -61
  8. package/object-header.html +3 -3
  9. package/package.json +2 -2
  10. package/panel.html +16 -13
  11. package/semantic-colors.html +24 -12
  12. package/shell-tile-card.html +281 -199
  13. package/table.html +16 -16
  14. package/text.html +30 -18
  15. package/toolbar.html +31 -31
package/button.html CHANGED
@@ -19,7 +19,7 @@
19
19
  <script src="theme-manager.js"></script>
20
20
  </head>
21
21
  <body>
22
- <div class="fd-theming">
22
+ <div class="fd-theming is-cozy">
23
23
  <div class="fd-panel fd-panel--fixed">
24
24
  <div class="fd-panel__header">
25
25
  <h4 class="fd-panel__title">Button</h4>
@@ -217,28 +217,28 @@
217
217
  <div class="fd-panel__content fd-theming__flex">
218
218
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
219
219
  <div class="fd-segmented-button" role="group" aria-label="Group label">
220
- <button aria-label="Survey" class="fd-button"><i class="sap-icon--survey"></i></button>
220
+ <button aria-label="Survey" class="fd-button" aria-pressed="false"><i class="sap-icon--survey"></i></button>
221
221
  <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true"><i class="sap-icon--pie-chart"></i></button>
222
- <button aria-label="Pool" class="fd-button"><i class="sap-icon--pool"></i></button>
222
+ <button aria-label="Pool" class="fd-button" aria-pressed="false"><i class="sap-icon--pool"></i></button>
223
223
  </div>
224
224
  <br>
225
225
  <div class="fd-segmented-button" role="group" aria-label="Group label">
226
- <button aria-label="Survey" class="fd-button" disabled><i class="sap-icon--survey"></i></button>
226
+ <button aria-label="Survey" class="fd-button" aria-pressed="false" disabled><i class="sap-icon--survey"></i></button>
227
227
  <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true" disabled><i class="sap-icon--pie-chart"></i></button>
228
- <button aria-label="Pool" class="fd-button" disabled><i class="sap-icon--pool"></i></button>
228
+ <button aria-label="Pool" class="fd-button" aria-pressed="false" disabled><i class="sap-icon--pool"></i></button>
229
229
  </div>
230
230
  </div>
231
231
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
232
232
  <div class="fd-segmented-button" role="group" aria-label="Group label">
233
233
  <button class="fd-button is-selected" aria-pressed="true">Left</button>
234
- <button class="fd-button">Middle</button>
235
- <button class="fd-button">Right</button>
234
+ <button class="fd-button" aria-pressed="false">Middle</button>
235
+ <button class="fd-button" aria-pressed="false">Right</button>
236
236
  </div>
237
237
  <br>
238
238
  <div class="fd-segmented-button" role="group" aria-label="Group label">
239
239
  <button class="fd-button is-selected" aria-pressed="true" disabled>Left</button>
240
- <button class="fd-button" disabled>Middle</button>
241
- <button class="fd-button" disabled>Right</button>
240
+ <button class="fd-button" aria-pressed="false" disabled>Middle</button>
241
+ <button class="fd-button" aria-pressed="false" disabled>Right</button>
242
242
  </div>
243
243
  </div>
244
244
  <div class="fd-theming__flex fd-theming__flex-column">
@@ -247,11 +247,11 @@
247
247
  <i class="sap-icon--employee-approvals"></i>
248
248
  <span class="fd-button__text">Approve</span>
249
249
  </button>
250
- <button class="fd-button">
250
+ <button class="fd-button" aria-pressed="false">
251
251
  <i class="sap-icon--employee-rejections"></i>
252
252
  <span class="fd-button__text">Reject</span>
253
253
  </button>
254
- <button class="fd-button">
254
+ <button class="fd-button" aria-pressed="false">
255
255
  <i class="sap-icon--employee-lookup"></i>
256
256
  <span class="fd-button__text">Lookup</span>
257
257
  </button>
@@ -262,11 +262,11 @@
262
262
  <i class="sap-icon--employee-approvals"></i>
263
263
  <span class="fd-button__text">Approve</span>
264
264
  </button>
265
- <button class="fd-button" disabled>
265
+ <button class="fd-button" aria-pressed="false" disabled>
266
266
  <i class="sap-icon--employee-rejections"></i>
267
267
  <span class="fd-button__text">Reject</span>
268
268
  </button>
269
- <button class="fd-button" disabled>
269
+ <button class="fd-button" aria-pressed="false" disabled>
270
270
  <i class="sap-icon--employee-lookup"></i>
271
271
  <span class="fd-button__text">Lookup</span>
272
272
  </button>
@@ -290,18 +290,6 @@
290
290
  <span class="fd-button__text">Default</span>
291
291
  <i class="sap-icon--slim-arrow-down"></i>
292
292
  </button>
293
- <br>
294
- <button class="fd-button fd-button--menu">
295
- <i class="sap-icon--thumb-up"></i>
296
- <span class="fd-button__text">Default</span>
297
- <i class="sap-icon--slim-arrow-down"></i>
298
- </button>
299
- <br>
300
- <button class="fd-button fd-button--menu" disabled>
301
- <i class="sap-icon--thumb-up"></i>
302
- <span class="fd-button__text">Default</span>
303
- <i class="sap-icon--slim-arrow-down"></i>
304
- </button>
305
293
  </div>
306
294
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
307
295
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
@@ -321,69 +309,151 @@
321
309
  <i class="sap-icon--slim-arrow-down"></i>
322
310
  </button>
323
311
  </div>
312
+ </div>
313
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
314
+ <button class="fd-button fd-button--attention fd-button--menu">
315
+ <span class="fd-button__text">Attention</span>
316
+ <i class="sap-icon--slim-arrow-down"></i>
317
+ </button>
324
318
  <br>
319
+ <button class="fd-button fd-button--attention fd-button--menu" disabled>
320
+ <span class="fd-button__text">Attention</span>
321
+ <i class="sap-icon--slim-arrow-down"></i>
322
+ </button>
323
+ </div>
324
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
325
325
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
326
- <button class="fd-button" aria-label="button">
327
- <i class="sap-icon--thumb-up"></i>
328
- <span class="fd-button-split__text">Split Default</span>
326
+ <button class="fd-button fd-button--attention" aria-label="button">
327
+ <span class="fd-button__text">Split Attention</span>
329
328
  </button>
330
- <button class="fd-button" aria-controls="t4c0o273">
329
+ <button class="fd-button fd-button--attention" aria-controls="t4c0o273">
331
330
  <i class="sap-icon--slim-arrow-down"></i>
332
331
  </button>
333
332
  </div>
334
333
  <br>
335
334
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
336
- <button class="fd-button" aria-label="button" disabled>
337
- <i class="sap-icon--thumb-up"></i>
338
- <span class="fd-button-split__text">Split Default</span>
335
+ <button class="fd-button fd-button--attention" aria-label="button" disabled>
336
+ <span class="fd-button__text">Split Attention</span>
339
337
  </button>
340
- <button class="fd-button" aria-controls="t4c0o273" disabled>
338
+ <button class="fd-button fd-button--attention" aria-controls="t4c0o273" disabled>
341
339
  <i class="sap-icon--slim-arrow-down"></i>
342
340
  </button>
343
341
  </div>
344
342
  </div>
345
343
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
346
- <button class="fd-button fd-button--attention fd-button--menu">
347
- <span class="fd-button__text">Attention</span>
344
+ <button class="fd-button fd-button--positive fd-button--menu">
345
+ <span class="fd-button__text">Accept</span>
348
346
  <i class="sap-icon--slim-arrow-down"></i>
349
347
  </button>
350
348
  <br>
351
- <button class="fd-button fd-button--attention fd-button--menu" disabled>
352
- <span class="fd-button__text">Attention</span>
349
+ <button class="fd-button fd-button--positive fd-button--menu" disabled>
350
+ <span class="fd-button__text">Accept</span>
351
+ <i class="sap-icon--slim-arrow-down"></i>
352
+ </button>
353
+ </div>
354
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
355
+ <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
356
+ <button class="fd-button fd-button--positive" aria-label="button">
357
+ <span class="fd-button__text">Split Accept</span>
358
+ </button>
359
+ <button class="fd-button fd-button--positive" aria-controls="t4c0o273">
360
+ <i class="sap-icon--slim-arrow-down"></i>
361
+ </button>
362
+ <br>
363
+ </div>
364
+ <br>
365
+ <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
366
+ <button class="fd-button fd-button--positive" aria-label="button" disabled>
367
+ <span class="fd-button__text">Split Accept</span>
368
+ </button>
369
+ <button class="fd-button fd-button--positive" aria-controls="t4c0o273" disabled>
370
+ <i class="sap-icon--slim-arrow-down"></i>
371
+ </button>
372
+ </div>
373
+ </div>
374
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
375
+ <button class="fd-button fd-button--negative fd-button--menu">
376
+ <span class="fd-button__text">Reject</span>
353
377
  <i class="sap-icon--slim-arrow-down"></i>
354
378
  </button>
355
379
  <br>
356
- <button class="fd-button fd-button--attention fd-button--menu">
380
+ <button class="fd-button fd-button--negative fd-button--menu" disabled>
381
+ <span class="fd-button__text">Reject</span>
382
+ <i class="sap-icon--slim-arrow-down"></i>
383
+ </button>
384
+ </div>
385
+ <div class="fd-theming__flex fd-theming__flex-column">
386
+ <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
387
+ <button class="fd-button fd-button--negative" aria-label="button">
388
+ <span class="fd-button__text">Split Reject</span>
389
+ </button>
390
+ <button class="fd-button fd-button--negative" aria-controls="t4c0o273">
391
+ <i class="sap-icon--slim-arrow-down"></i>
392
+ </button>
393
+ <br>
394
+ </div>
395
+ <br>
396
+ <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
397
+ <button class="fd-button fd-button--negative" aria-label="button" disabled>
398
+ <span class="fd-button__text">Split Reject</span>
399
+ </button>
400
+ <button class="fd-button fd-button--negative" aria-controls="t4c0o273" disabled>
401
+ <i class="sap-icon--slim-arrow-down"></i>
402
+ </button>
403
+ <br>
404
+ </div>
405
+ <br>
406
+ </div>
407
+ </div>
408
+ <div class="fd-panel__content fd-theming__flex">
409
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
410
+ <button class="fd-button fd-button--menu">
357
411
  <i class="sap-icon--thumb-up"></i>
358
- <span class="fd-button__text">Attention</span>
412
+ <span class="fd-button__text">Default</span>
359
413
  <i class="sap-icon--slim-arrow-down"></i>
360
414
  </button>
361
415
  <br>
362
- <button class="fd-button fd-button--attention fd-button--menu" disabled>
416
+ <button class="fd-button fd-button--menu" disabled>
363
417
  <i class="sap-icon--thumb-up"></i>
364
- <span class="fd-button__text">Attention</span>
418
+ <span class="fd-button__text">Default</span>
365
419
  <i class="sap-icon--slim-arrow-down"></i>
366
420
  </button>
367
421
  </div>
368
422
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
369
423
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
370
- <button class="fd-button fd-button--attention" aria-label="button">
371
- <span class="fd-button__text">Split Attention</span>
424
+ <button class="fd-button" aria-label="button">
425
+ <i class="sap-icon--thumb-up"></i>
426
+ <span class="fd-button-split__text">Split Default</span>
372
427
  </button>
373
- <button class="fd-button fd-button--attention" aria-controls="t4c0o273">
428
+ <button class="fd-button" aria-controls="t4c0o273">
374
429
  <i class="sap-icon--slim-arrow-down"></i>
375
430
  </button>
376
431
  </div>
377
432
  <br>
378
433
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
379
- <button class="fd-button fd-button--attention" aria-label="button" disabled>
380
- <span class="fd-button__text">Split Attention</span>
434
+ <button class="fd-button" aria-label="button" disabled>
435
+ <i class="sap-icon--thumb-up"></i>
436
+ <span class="fd-button-split__text">Split Default</span>
381
437
  </button>
382
- <button class="fd-button fd-button--attention" aria-controls="t4c0o273" disabled>
438
+ <button class="fd-button" aria-controls="t4c0o273" disabled>
383
439
  <i class="sap-icon--slim-arrow-down"></i>
384
440
  </button>
385
441
  </div>
442
+ </div>
443
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
444
+ <button class="fd-button fd-button--attention fd-button--menu">
445
+ <i class="sap-icon--thumb-up"></i>
446
+ <span class="fd-button__text">Attention</span>
447
+ <i class="sap-icon--slim-arrow-down"></i>
448
+ </button>
386
449
  <br>
450
+ <button class="fd-button fd-button--attention fd-button--menu" disabled>
451
+ <i class="sap-icon--thumb-up"></i>
452
+ <span class="fd-button__text">Attention</span>
453
+ <i class="sap-icon--slim-arrow-down"></i>
454
+ </button>
455
+ </div>
456
+ <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
387
457
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
388
458
  <button class="fd-button fd-button--attention" aria-label="button">
389
459
  <i class="sap-icon--thumb-up"></i>
@@ -405,16 +475,6 @@
405
475
  </div>
406
476
  </div>
407
477
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
408
- <button class="fd-button fd-button--positive fd-button--menu">
409
- <span class="fd-button__text">Accept</span>
410
- <i class="sap-icon--slim-arrow-down"></i>
411
- </button>
412
- <br>
413
- <button class="fd-button fd-button--positive fd-button--menu" disabled>
414
- <span class="fd-button__text">Accept</span>
415
- <i class="sap-icon--slim-arrow-down"></i>
416
- </button>
417
- <br>
418
478
  <button class="fd-button fd-button--positive fd-button--menu">
419
479
  <i class="sap-icon--thumb-up"></i>
420
480
  <span class="fd-button__text">Accept</span>
@@ -428,26 +488,6 @@
428
488
  </button>
429
489
  </div>
430
490
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
431
- <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
432
- <button class="fd-button fd-button--positive" aria-label="button">
433
- <span class="fd-button__text">Split Accept</span>
434
- </button>
435
- <button class="fd-button fd-button--positive" aria-controls="t4c0o273">
436
- <i class="sap-icon--slim-arrow-down"></i>
437
- </button>
438
- <br>
439
- </div>
440
- <br>
441
- <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
442
- <button class="fd-button fd-button--positive" aria-label="button" disabled>
443
- <span class="fd-button__text">Split Accept</span>
444
- </button>
445
- <button class="fd-button fd-button--positive" aria-controls="t4c0o273" disabled>
446
- <i class="sap-icon--slim-arrow-down"></i>
447
- </button>
448
- <br>
449
- </div>
450
- <br>
451
491
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
452
492
  <button class="fd-button fd-button--positive" aria-label="button">
453
493
  <i class="sap-icon--thumb-up"></i>
@@ -471,16 +511,6 @@
471
511
  </div>
472
512
  </div>
473
513
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
474
- <button class="fd-button fd-button--negative fd-button--menu">
475
- <span class="fd-button__text">Reject</span>
476
- <i class="sap-icon--slim-arrow-down"></i>
477
- </button>
478
- <br>
479
- <button class="fd-button fd-button--negative fd-button--menu" disabled>
480
- <span class="fd-button__text">Reject</span>
481
- <i class="sap-icon--slim-arrow-down"></i>
482
- </button>
483
- <br>
484
514
  <button class="fd-button fd-button--negative fd-button--menu">
485
515
  <i class="sap-icon--thumb-up"></i>
486
516
  <span class="fd-button__text">Reject</span>
@@ -494,26 +524,6 @@
494
524
  </button>
495
525
  </div>
496
526
  <div class="fd-theming__flex fd-theming__flex-column">
497
- <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
498
- <button class="fd-button fd-button--negative" aria-label="button">
499
- <span class="fd-button__text">Split Reject</span>
500
- </button>
501
- <button class="fd-button fd-button--negative" aria-controls="t4c0o273">
502
- <i class="sap-icon--slim-arrow-down"></i>
503
- </button>
504
- <br>
505
- </div>
506
- <br>
507
- <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
508
- <button class="fd-button fd-button--negative" aria-label="button" disabled>
509
- <span class="fd-button__text">Split Reject</span>
510
- </button>
511
- <button class="fd-button fd-button--negative" aria-controls="t4c0o273" disabled>
512
- <i class="sap-icon--slim-arrow-down"></i>
513
- </button>
514
- <br>
515
- </div>
516
- <br>
517
527
  <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
518
528
  <button class="fd-button fd-button--negative" aria-label="button">
519
529
  <i class="sap-icon--thumb-up"></i>
@@ -545,118 +555,118 @@
545
555
  </div>
546
556
  <div class="fd-panel__content fd-theming__flex">
547
557
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
548
- <button class="fd-button">Unpressed</button>
558
+ <button class="fd-button" aria-pressed="false">Unpressed</button>
549
559
  <br>
550
- <button class="fd-button" disabled>Unpressed</button>
560
+ <button class="fd-button" aria-pressed="false" disabled>Unpressed</button>
551
561
  <br>
552
- <button class="fd-button">
562
+ <button class="fd-button" aria-pressed="false">
553
563
  <i class="sap-icon--home"></i>
554
564
  <span class="fd-button__text">Unpressed</span>
555
565
  </button>
556
566
  <br>
557
- <button class="fd-button" disabled>
567
+ <button class="fd-button" aria-pressed="false" disabled>
558
568
  <i class="sap-icon--home"></i>
559
569
  <span class="fd-button__text">Unpressed</span>
560
570
  </button>
561
571
  </div>
562
572
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
563
- <button class="fd-button fd-button--toggled">Pressed</button>
573
+ <button class="fd-button fd-button--toggled" aria-pressed="true">Pressed</button>
564
574
  <br>
565
- <button class="fd-button fd-button--toggled" disabled>Pressed</button>
575
+ <button class="fd-button fd-button--toggled" aria-pressed="true" disabled>Pressed</button>
566
576
  <br>
567
- <button class="fd-button fd-button--toggled">
577
+ <button class="fd-button fd-button--toggled" aria-pressed="true">
568
578
  <i class="sap-icon--home"></i>
569
579
  <span class="fd-button__text">Pressed</span>
570
580
  </button>
571
581
  <br>
572
- <button class="fd-button fd-button--toggled" disabled>
582
+ <button class="fd-button fd-button--toggled" aria-pressed="true" disabled>
573
583
  <i class="sap-icon--home"></i>
574
584
  <span class="fd-button__text">Pressed</span>
575
585
  </button>
576
586
  </div>
577
587
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
578
- <button class="fd-button fd-button--attention">Attention Unpressed</button>
588
+ <button class="fd-button fd-button--attention" aria-pressed="false">Attention Unpressed</button>
579
589
  <br>
580
- <button class="fd-button fd-button--attention" disabled> Attention Unpressed</button>
590
+ <button class="fd-button fd-button--attention" aria-pressed="false" disabled> Attention Unpressed</button>
581
591
  <br>
582
- <button class="fd-button fd-button--attention">
592
+ <button class="fd-button fd-button--attention" aria-pressed="false">
583
593
  <i class="sap-icon--home"></i>
584
594
  <span class="fd-button__text"> Attention Unpressed</span>
585
595
  </button>
586
596
  <br>
587
- <button class="fd-button fd-button--attention" disabled>
597
+ <button class="fd-button fd-button--attention" aria-pressed="false" disabled>
588
598
  <i class="sap-icon--home"></i>
589
599
  <span class="fd-button__text">Attention Unpressed</span>
590
600
  </button>
591
601
  </div>
592
602
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
593
- <button class="fd-button fd-button--attention fd-button--toggled">Attention Pressed</button>
603
+ <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true">Attention Pressed</button>
594
604
  <br>
595
- <button class="fd-button fd-button--attention fd-button--toggled" disabled>Attention Pressed</button>
605
+ <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true" disabled>Attention Pressed</button>
596
606
  <br>
597
- <button class="fd-button fd-button--attention fd-button--toggled">
607
+ <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true">
598
608
  <i class="sap-icon--home"></i>
599
609
  <span class="fd-button__text">Attention Pressed</span>
600
610
  </button>
601
611
  <br>
602
- <button class="fd-button fd-button--attention fd-button--toggled" disabled>
612
+ <button class="fd-button fd-button--attention fd-button--toggled" aria-pressed="true" disabled>
603
613
  <i class="sap-icon--home"></i>
604
614
  <span class="fd-button__text">Attention Pressed</span>
605
615
  </button>
606
616
  </div>
607
617
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
608
- <button class="fd-button fd-button--positive">Accept Unpressed</button>
618
+ <button class="fd-button fd-button--positive" aria-pressed="false">Accept Unpressed</button>
609
619
  <br>
610
- <button class="fd-button fd-button--positive" disabled>Accept Unpressed</button>
620
+ <button class="fd-button fd-button--positive" aria-pressed="false" disabled>Accept Unpressed</button>
611
621
  <br>
612
- <button class="fd-button fd-button--positive">
622
+ <button class="fd-button fd-button--positive" aria-pressed="false">
613
623
  <i class="sap-icon--thumb-up"></i>
614
624
  <span class="fd-button__text">Accept Unpressed</span>
615
625
  </button>
616
626
  <br>
617
- <button class="fd-button fd-button--positive" disabled>
627
+ <button class="fd-button fd-button--positive" aria-pressed="false" disabled>
618
628
  <i class="sap-icon--thumb-up"></i>
619
629
  <span class="fd-button__text">Accept Unpressed</span>
620
630
  </button>
621
631
  </div>
622
632
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
623
- <button class="fd-button fd-button--positive fd-button--toggled">Accept Pressed</button>
633
+ <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true">Accept Pressed</button>
624
634
  <br>
625
- <button class="fd-button fd-button--positive fd-button--toggled" disabled>Accept Pressed</button>
635
+ <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true" disabled>Accept Pressed</button>
626
636
  <br>
627
- <button class="fd-button fd-button--positive fd-button--toggled">
637
+ <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true">
628
638
  <i class="sap-icon--thumb-up"></i>
629
639
  <span class="fd-button__text">Accept Unpressed</span>
630
640
  </button>
631
641
  <br>
632
- <button class="fd-button fd-button--positive fd-button--toggled" disabled>
642
+ <button class="fd-button fd-button--positive fd-button--toggled" aria-pressed="true" disabled>
633
643
  <i class="sap-icon--thumb-up"></i>
634
644
  <span class="fd-button__text">Accept Unpressed</span>
635
645
  </button>
636
646
  </div>
637
647
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
638
- <button class="fd-button fd-button--negative">Reject Unpressed</button>
648
+ <button class="fd-button fd-button--negative" aria-pressed="false">Reject Unpressed</button>
639
649
  <br>
640
- <button class="fd-button fd-button--negative" disabled>Reject Unpressed</button>
650
+ <button class="fd-button fd-button--negative" aria-pressed="false" disabled>Reject Unpressed</button>
641
651
  <br>
642
- <button class="fd-button fd-button--negative">
652
+ <button class="fd-button fd-button--negative" aria-pressed="false">
643
653
  <i class="sap-icon--thumb-up"></i>
644
654
  <span class="fd-button__text">Reject Unpressed</span>
645
655
  </button>
646
656
  <br>
647
- <button class="fd-button fd-button--negative" disabled>
657
+ <button class="fd-button fd-button--negative" aria-pressed="false" disabled>
648
658
  <i class="sap-icon--thumb-up"></i>
649
659
  <span class="fd-button__text">Reject Unpressed</span>
650
660
  </button>
651
661
  </div>
652
662
  <div class="fd-theming__flex fd-theming__flex-column">
653
- <button class="fd-button fd-button--negative fd-button--toggled">Reject Pressed</button>
663
+ <button class="fd-button fd-button--negative fd-button--toggled" aria-pressed="true">Reject Pressed</button>
654
664
  <br>
655
- <button class="fd-button fd-button--negative fd-button--toggled" disabled>Reject Pressed</button>
665
+ <button class="fd-button fd-button--negative fd-button--toggled" aria-pressed="true" disabled>Reject Pressed</button>
656
666
  <br>
657
- <button class="fd-button fd-button--negative fd-button--toggled">
667
+ <button class="fd-button fd-button--negative fd-button--toggled" aria-pressed="true">
658
668
  <i class="sap-icon--thumb-up"></i>
659
- <span class="fd-button__text">Reject Pressed</span>
669
+ <span class="fd-button__text" aria-pressed="true">Reject Pressed</span>
660
670
  </button>
661
671
  <br>
662
672
  <button class="fd-button fd-button--negative fd-button--toggled" disabled>