@workday/canvas-kit-docs 16.2.6 → 16.2.8

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 (10) hide show
  1. package/dist/es6/lib/docs.js +73 -65
  2. package/dist/es6/lib/specs.js +44 -0
  3. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
  4. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
  5. package/dist/mdx/accessibility/Popups.mdx +1 -1
  6. package/dist/mdx/accessibility/tables/DraggableRows.mdx +39 -0
  7. package/dist/mdx/accessibility/tables/NestedRows.mdx +2 -2
  8. package/dist/mdx/accessibility/tables/Overview.mdx +7 -6
  9. package/dist/mdx/react/table/Table.mdx +28 -23
  10. package/package.json +6 -6
package/dist/es6/lib/docs.js CHANGED
@@ -32127,6 +32127,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
32127
32127
  "kind": "string",
32128
32128
  "value": "selectable-rows"
32129
32129
  },
32130
+ {
32131
+ "kind": "string",
32132
+ "value": "draggable-rows"
32133
+ },
32130
32134
  {
32131
32135
  "kind": "string",
32132
32136
  "value": "filterable-column-headers"
@@ -32211,6 +32215,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
32211
32215
  "kind": "string",
32212
32216
  "value": "selectable-rows"
32213
32217
  },
32218
+ {
32219
+ "kind": "string",
32220
+ "value": "draggable-rows"
32221
+ },
32214
32222
  {
32215
32223
  "kind": "string",
32216
32224
  "value": "filterable-column-headers"
@@ -32765,7 +32773,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
32765
32773
  "value": {
32766
32774
  "kind": "symbol",
32767
32775
  "name": "AccessibilityScenario",
32768
- "value": "\"aria-live\" | \"overview\" | \"page-structure\" | \"tables\" | \"expandable-rows\" | \"nested-rows\" | \"selectable-rows\" | \"filterable-column-headers\" | \"sortable-column-headers\" | ... 5 more ... | \"color-contrast\""
32776
+ "value": "\"aria-live\" | \"overview\" | \"page-structure\" | \"tables\" | \"expandable-rows\" | \"nested-rows\" | \"selectable-rows\" | \"draggable-rows\" | \"filterable-column-headers\" | \"sortable-column-headers\" | ... 5 more ... | \"color-contrast\""
32769
32777
  }
32770
32778
  }
32771
32779
  }
@@ -32814,7 +32822,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
32814
32822
  "type": {
32815
32823
  "kind": "symbol",
32816
32824
  "name": "AccessibilityScenario",
32817
- "value": "\"aria-live\" | \"overview\" | \"page-structure\" | \"tables\" | \"expandable-rows\" | \"nested-rows\" | \"selectable-rows\" | \"filterable-column-headers\" | \"sortable-column-headers\" | ... 5 more ... | \"color-contrast\""
32825
+ "value": "\"aria-live\" | \"overview\" | \"page-structure\" | \"tables\" | \"expandable-rows\" | \"nested-rows\" | \"selectable-rows\" | \"draggable-rows\" | \"filterable-column-headers\" | \"sortable-column-headers\" | ... 5 more ... | \"color-contrast\""
32818
32826
  },
32819
32827
  "description": "",
32820
32828
  "declarations": [
@@ -32845,7 +32853,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
32845
32853
  "value": {
32846
32854
  "kind": "symbol",
32847
32855
  "name": "AccessibilityScenario",
32848
- "value": "\"aria-live\" | \"overview\" | \"page-structure\" | \"tables\" | \"expandable-rows\" | \"nested-rows\" | \"selectable-rows\" | \"filterable-column-headers\" | \"sortable-column-headers\" | ... 5 more ... | \"color-contrast\""
32856
+ "value": "\"aria-live\" | \"overview\" | \"page-structure\" | \"tables\" | \"expandable-rows\" | \"nested-rows\" | \"selectable-rows\" | \"draggable-rows\" | \"filterable-column-headers\" | \"sortable-column-headers\" | ... 5 more ... | \"color-contrast\""
32849
32857
  }
32850
32858
  }
32851
32859
  }
@@ -108832,19 +108840,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
108832
108840
  },
108833
108841
  {
108834
108842
  "kind": "number",
108835
- "value": 10
108843
+ "value": 16
108836
108844
  },
108837
108845
  {
108838
108846
  "kind": "number",
108839
- "value": 12
108847
+ "value": 10
108840
108848
  },
108841
108849
  {
108842
108850
  "kind": "number",
108843
- "value": 14
108851
+ "value": 12
108844
108852
  },
108845
108853
  {
108846
108854
  "kind": "number",
108847
- "value": 16
108855
+ "value": 14
108848
108856
  },
108849
108857
  {
108850
108858
  "kind": "number",
@@ -121493,19 +121501,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
121493
121501
  },
121494
121502
  {
121495
121503
  "kind": "number",
121496
- "value": 10
121504
+ "value": 16
121497
121505
  },
121498
121506
  {
121499
121507
  "kind": "number",
121500
- "value": 12
121508
+ "value": 10
121501
121509
  },
121502
121510
  {
121503
121511
  "kind": "number",
121504
- "value": 14
121512
+ "value": 12
121505
121513
  },
121506
121514
  {
121507
121515
  "kind": "number",
121508
- "value": 16
121516
+ "value": 14
121509
121517
  },
121510
121518
  {
121511
121519
  "kind": "number",
@@ -162500,19 +162508,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
162500
162508
  },
162501
162509
  {
162502
162510
  "kind": "number",
162503
- "value": 10
162511
+ "value": 16
162504
162512
  },
162505
162513
  {
162506
162514
  "kind": "number",
162507
- "value": 12
162515
+ "value": 10
162508
162516
  },
162509
162517
  {
162510
162518
  "kind": "number",
162511
- "value": 14
162519
+ "value": 12
162512
162520
  },
162513
162521
  {
162514
162522
  "kind": "number",
162515
- "value": 16
162523
+ "value": 14
162516
162524
  },
162517
162525
  {
162518
162526
  "kind": "number",
@@ -301835,19 +301843,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
301835
301843
  },
301836
301844
  {
301837
301845
  "kind": "number",
301838
- "value": 10
301846
+ "value": 16
301839
301847
  },
301840
301848
  {
301841
301849
  "kind": "number",
301842
- "value": 12
301850
+ "value": 10
301843
301851
  },
301844
301852
  {
301845
301853
  "kind": "number",
301846
- "value": 14
301854
+ "value": 12
301847
301855
  },
301848
301856
  {
301849
301857
  "kind": "number",
301850
- "value": 16
301858
+ "value": 14
301851
301859
  },
301852
301860
  {
301853
301861
  "kind": "number",
@@ -303399,19 +303407,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
303399
303407
  },
303400
303408
  {
303401
303409
  "kind": "number",
303402
- "value": 10
303410
+ "value": 16
303403
303411
  },
303404
303412
  {
303405
303413
  "kind": "number",
303406
- "value": 12
303414
+ "value": 10
303407
303415
  },
303408
303416
  {
303409
303417
  "kind": "number",
303410
- "value": 14
303418
+ "value": 12
303411
303419
  },
303412
303420
  {
303413
303421
  "kind": "number",
303414
- "value": 16
303422
+ "value": 14
303415
303423
  },
303416
303424
  {
303417
303425
  "kind": "number",
@@ -308698,19 +308706,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
308698
308706
  },
308699
308707
  {
308700
308708
  "kind": "number",
308701
- "value": 10
308709
+ "value": 16
308702
308710
  },
308703
308711
  {
308704
308712
  "kind": "number",
308705
- "value": 12
308713
+ "value": 10
308706
308714
  },
308707
308715
  {
308708
308716
  "kind": "number",
308709
- "value": 14
308717
+ "value": 12
308710
308718
  },
308711
308719
  {
308712
308720
  "kind": "number",
308713
- "value": 16
308721
+ "value": 14
308714
308722
  },
308715
308723
  {
308716
308724
  "kind": "number",
@@ -320633,19 +320641,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
320633
320641
  "value": [
320634
320642
  {
320635
320643
  "kind": "number",
320636
- "value": 10
320644
+ "value": 16
320637
320645
  },
320638
320646
  {
320639
320647
  "kind": "number",
320640
- "value": 12
320648
+ "value": 10
320641
320649
  },
320642
320650
  {
320643
320651
  "kind": "number",
320644
- "value": 14
320652
+ "value": 12
320645
320653
  },
320646
320654
  {
320647
320655
  "kind": "number",
320648
- "value": 16
320656
+ "value": 14
320649
320657
  },
320650
320658
  {
320651
320659
  "kind": "number",
@@ -321581,19 +321589,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
321581
321589
  "value": [
321582
321590
  {
321583
321591
  "kind": "number",
321584
- "value": 10
321592
+ "value": 16
321585
321593
  },
321586
321594
  {
321587
321595
  "kind": "number",
321588
- "value": 12
321596
+ "value": 10
321589
321597
  },
321590
321598
  {
321591
321599
  "kind": "number",
321592
- "value": 14
321600
+ "value": 12
321593
321601
  },
321594
321602
  {
321595
321603
  "kind": "number",
321596
- "value": 16
321604
+ "value": 14
321597
321605
  },
321598
321606
  {
321599
321607
  "kind": "number",
@@ -321961,19 +321969,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
321961
321969
  },
321962
321970
  {
321963
321971
  "kind": "number",
321964
- "value": 10
321972
+ "value": 16
321965
321973
  },
321966
321974
  {
321967
321975
  "kind": "number",
321968
- "value": 12
321976
+ "value": 10
321969
321977
  },
321970
321978
  {
321971
321979
  "kind": "number",
321972
- "value": 14
321980
+ "value": 12
321973
321981
  },
321974
321982
  {
321975
321983
  "kind": "number",
321976
- "value": 16
321984
+ "value": 14
321977
321985
  },
321978
321986
  {
321979
321987
  "kind": "number",
@@ -326682,19 +326690,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
326682
326690
  },
326683
326691
  {
326684
326692
  "kind": "number",
326685
- "value": 10
326693
+ "value": 16
326686
326694
  },
326687
326695
  {
326688
326696
  "kind": "number",
326689
- "value": 12
326697
+ "value": 10
326690
326698
  },
326691
326699
  {
326692
326700
  "kind": "number",
326693
- "value": 14
326701
+ "value": 12
326694
326702
  },
326695
326703
  {
326696
326704
  "kind": "number",
326697
- "value": 16
326705
+ "value": 14
326698
326706
  },
326699
326707
  {
326700
326708
  "kind": "number",
@@ -372822,19 +372830,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
372822
372830
  },
372823
372831
  {
372824
372832
  "kind": "number",
372825
- "value": 10
372833
+ "value": 16
372826
372834
  },
372827
372835
  {
372828
372836
  "kind": "number",
372829
- "value": 12
372837
+ "value": 10
372830
372838
  },
372831
372839
  {
372832
372840
  "kind": "number",
372833
- "value": 14
372841
+ "value": 12
372834
372842
  },
372835
372843
  {
372836
372844
  "kind": "number",
372837
- "value": 16
372845
+ "value": 14
372838
372846
  },
372839
372847
  {
372840
372848
  "kind": "number",
@@ -446463,19 +446471,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
446463
446471
  },
446464
446472
  {
446465
446473
  "kind": "number",
446466
- "value": 10
446474
+ "value": 16
446467
446475
  },
446468
446476
  {
446469
446477
  "kind": "number",
446470
- "value": 12
446478
+ "value": 10
446471
446479
  },
446472
446480
  {
446473
446481
  "kind": "number",
446474
- "value": 14
446482
+ "value": 12
446475
446483
  },
446476
446484
  {
446477
446485
  "kind": "number",
446478
- "value": 16
446486
+ "value": 14
446479
446487
  },
446480
446488
  {
446481
446489
  "kind": "number",
@@ -459551,19 +459559,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
459551
459559
  },
459552
459560
  {
459553
459561
  "kind": "number",
459554
- "value": 10
459562
+ "value": 16
459555
459563
  },
459556
459564
  {
459557
459565
  "kind": "number",
459558
- "value": 12
459566
+ "value": 10
459559
459567
  },
459560
459568
  {
459561
459569
  "kind": "number",
459562
- "value": 14
459570
+ "value": 12
459563
459571
  },
459564
459572
  {
459565
459573
  "kind": "number",
459566
- "value": 16
459574
+ "value": 14
459567
459575
  },
459568
459576
  {
459569
459577
  "kind": "number",
@@ -479680,19 +479688,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
479680
479688
  },
479681
479689
  {
479682
479690
  "kind": "number",
479683
- "value": 10
479691
+ "value": 16
479684
479692
  },
479685
479693
  {
479686
479694
  "kind": "number",
479687
- "value": 12
479695
+ "value": 10
479688
479696
  },
479689
479697
  {
479690
479698
  "kind": "number",
479691
- "value": 14
479699
+ "value": 12
479692
479700
  },
479693
479701
  {
479694
479702
  "kind": "number",
479695
- "value": 16
479703
+ "value": 14
479696
479704
  },
479697
479705
  {
479698
479706
  "kind": "number",
@@ -482331,19 +482339,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
482331
482339
  },
482332
482340
  {
482333
482341
  "kind": "number",
482334
- "value": 10
482342
+ "value": 16
482335
482343
  },
482336
482344
  {
482337
482345
  "kind": "number",
482338
- "value": 12
482346
+ "value": 10
482339
482347
  },
482340
482348
  {
482341
482349
  "kind": "number",
482342
- "value": 14
482350
+ "value": 12
482343
482351
  },
482344
482352
  {
482345
482353
  "kind": "number",
482346
- "value": 16
482354
+ "value": 14
482347
482355
  },
482348
482356
  {
482349
482357
  "kind": "number",
@@ -500778,11 +500786,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
500778
500786
  },
500779
500787
  {
500780
500788
  "kind": "number",
500781
- "value": 12
500789
+ "value": 16
500782
500790
  },
500783
500791
  {
500784
500792
  "kind": "number",
500785
- "value": 16
500793
+ "value": 12
500786
500794
  },
500787
500795
  {
500788
500796
  "kind": "number",
package/dist/es6/lib/specs.js CHANGED
@@ -6417,6 +6417,50 @@ module.exports = {specifications: [
6417
6417
  }
6418
6418
  ]
6419
6419
  },
6420
+ {
6421
+ "type": "file",
6422
+ "name": "Table",
6423
+ "children": [
6424
+ {
6425
+ "type": "describe",
6426
+ "name": "Table",
6427
+ "children": [
6428
+ {
6429
+ "type": "describe",
6430
+ "name": "given the draggable rows example is rendered",
6431
+ "children": [
6432
+ {
6433
+ "type": "it",
6434
+ "name": "should not have any axe errors"
6435
+ },
6436
+ {
6437
+ "type": "it",
6438
+ "name": "should provide a drag handle for every employee"
6439
+ },
6440
+ {
6441
+ "type": "it",
6442
+ "name": "should place row actions in the last column"
6443
+ },
6444
+ {
6445
+ "type": "it",
6446
+ "name": "should show the screen reader feedback"
6447
+ },
6448
+ {
6449
+ "type": "describe",
6450
+ "name": "when a keyboard user moves the first row down",
6451
+ "children": [
6452
+ {
6453
+ "type": "it",
6454
+ "name": "should update the employee row order"
6455
+ }
6456
+ ]
6457
+ }
6458
+ ]
6459
+ }
6460
+ ]
6461
+ }
6462
+ ]
6463
+ },
6420
6464
  {
6421
6465
  "type": "file",
6422
6466
  "name": "Tabs",
package/dist/es6/lib/stackblitzFiles/packageJSONFile.js CHANGED
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
18
18
  "@emotion/react": "11.11.4",
19
19
  "@types/react": "18.2.60",
20
20
  "@types/react-dom": "18.2.19",
21
- "@workday/canvas-kit-labs-react": "16.2.6",
22
- "@workday/canvas-kit-preview-react": "16.2.6",
23
- "@workday/canvas-kit-react": "16.2.6",
24
- "@workday/canvas-kit-react-fonts": "^16.2.6",
25
- "@workday/canvas-kit-styling": "16.2.6",
21
+ "@workday/canvas-kit-labs-react": "16.2.8",
22
+ "@workday/canvas-kit-preview-react": "16.2.8",
23
+ "@workday/canvas-kit-react": "16.2.8",
24
+ "@workday/canvas-kit-react-fonts": "^16.2.8",
25
+ "@workday/canvas-kit-styling": "16.2.8",
26
26
  "@workday/canvas-system-icons-web": "^5.0.3",
27
27
  "@workday/canvas-expressive-icons-web": "1.0.1",
28
28
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts CHANGED
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
19
19
  "@emotion/react": "11.11.4",
20
20
  "@types/react": "18.2.60",
21
21
  "@types/react-dom": "18.2.19",
22
- "@workday/canvas-kit-labs-react": "16.2.6",
23
- "@workday/canvas-kit-preview-react": "16.2.6",
24
- "@workday/canvas-kit-react": "16.2.6",
25
- "@workday/canvas-kit-react-fonts": "^16.2.6",
26
- "@workday/canvas-kit-styling": "16.2.6",
22
+ "@workday/canvas-kit-labs-react": "16.2.8",
23
+ "@workday/canvas-kit-preview-react": "16.2.8",
24
+ "@workday/canvas-kit-react": "16.2.8",
25
+ "@workday/canvas-kit-react-fonts": "^16.2.8",
26
+ "@workday/canvas-kit-styling": "16.2.8",
27
27
  "@workday/canvas-system-icons-web": "^5.0.3",
28
28
  "@workday/canvas-expressive-icons-web": "1.0.1",
29
29
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
package/dist/mdx/accessibility/Popups.mdx CHANGED
@@ -63,6 +63,6 @@ that card as “owned” by the trigger for browsing and announcements.
63
63
  The Canvas Kit [**Dialog**](?path=/docs/components-popups-dialog--docs) builds this pattern in.
64
64
 
65
65
  Another `aria-owns` example:
66
- [Table Patterns > Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs).
66
+ [Table Patterns > Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs).
67
67
 
68
68
  <ExampleCodeBlock code={PopupAriaOwns} />
package/dist/mdx/accessibility/tables/DraggableRows.mdx ADDED
@@ -0,0 +1,39 @@
1
+ import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
2
+
3
+ import {DraggableRows} from '../examples/Table/WithDraggableRows';
4
+
5
+
6
+ ## Draggable Rows
7
+
8
+ Draggable Rows reorders records in a table. Pointer users drag the move handle in the first column,
9
+ or open Row actions in the last column and choose Move to top, Move up, Move down, or Move to
10
+ bottom. That menu is a single-pointer alternative to dragging
11
+ ([WCAG 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)).
12
+ Keyboard users focus the move handle, press Space or Enter to pick the row up, use the Up and Down
13
+ Arrow keys to move it, then press Space or Enter to drop it. Escape cancels the move and returns the
14
+ row to its previous position. The menu is also available from the keyboard.
15
+
16
+ This example uses `@dnd-kit` for the pointer and keyboard drag. `Table` has no reorder behavior.
17
+ Validate the screen reader and browser combinations you support. This is a research example, not a
18
+ Canvas Kit primitive.
19
+
20
+ - The first column is the move handle. Its header is the visually hidden text "Reorder" on a
21
+ `Table.Header` with `scope="col"`.
22
+ - Each handle is a `TertiaryButton` named `Move row {employee name}`. The `Tooltip` uses
23
+ `type="muted"` and the title "Move row", so hover shows that title and the accessible name stays
24
+ `Move row {employee name}`.
25
+ - The last column is the row actions menu. Its header is the visually hidden text "Actions" on a
26
+ `Table.Header` with `scope="col"`. Each control is a `TertiaryButton` named "Row actions" by a
27
+ `Tooltip` with `type="label"`. `aria-describedby` points at the row header, so the employee name
28
+ is the button's description. Move to top and Move up are disabled on the first row. Move down and
29
+ Move to bottom are disabled on the last row. A menu move is announced in a visually hidden
30
+ assertive live region. A drag is announced by `@dnd-kit`. The "Screen reader feedback" text above
31
+ the table repeats those messages and is not a live region.
32
+ - The employee name is the row header (`Table.Header` with `scope="row"`), so screen readers can
33
+ announce it with the other cells in the row.
34
+ - A picked-up row stays in the table and moves only with a transform. It uses a popover surface, a
35
+ level 5 shadow, a gray outline, and a slight tilt, and it paints above the other rows. The handle
36
+ cursor changes from grab to grabbing. Keyboard users rely on this treatment, because no pointer is
37
+ attached to the row.
38
+
39
+ <ExampleCodeBlock code={DraggableRows} />
package/dist/mdx/accessibility/tables/NestedRows.mdx CHANGED
@@ -11,7 +11,7 @@ chevron and name share the Name cell so they indent together. Collapsing a paren
11
11
  descendants even if a child was previously expanded.
12
12
 
13
13
  This is a different pattern from
14
- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs). That
14
+ [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs). That
15
15
  example inserts a `colspan` panel with extra content for a single parent row. It does **not** add
16
16
  nested table rows. Use Nested Rows when the children are themselves tabular records (same columns at
17
17
  every level). Use Expandable Rows when the extra content is not a row of the same table.
@@ -29,7 +29,7 @@ every level). Use Expandable Rows when the extra content is not a row of the sam
29
29
  - Since those button names are not unique, we added `aria-describedby` to each chevron, referencing
30
30
  the unique `id` on the name text in the same cell. That gives screen readers the specific project
31
31
  or phase the control belongs to, similar to the
32
- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
32
+ [Selectable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
33
33
  checkboxes.
34
34
  - `aria-level` is set on each `Table.Row` (`1` = project, `2` = phase, `3` = task) to describe
35
35
  depth. Support for `aria-level` on HTML table rows is uneven across screen readers and browsers.
package/dist/mdx/accessibility/tables/Overview.mdx CHANGED
@@ -20,9 +20,10 @@ The Workday Accessibility Team has researched and developed the following exampl
20
20
  how to build these accessible table patterns. We've listed the specific considerations and decisions
21
21
  we've made for each of the examples.
22
22
 
23
- - [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
24
- - [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
25
- - [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
26
- - [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
27
- - [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
28
- - [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
23
+ - [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
24
+ - [Nested Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
25
+ - [Selectable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
26
+ - [Draggable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-draggable-rows--docs)
27
+ - [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
28
+ - [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
29
+ - [With Form Fields](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
package/dist/mdx/react/table/Table.mdx CHANGED
@@ -79,15 +79,16 @@ use the `BaseTable` component.
79
79
  ### Advanced
80
80
 
81
81
  You can also find several advanced Table examples in our
82
- [Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)
82
+ [Guides > Accessibility > Table Patterns](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns--docs)
83
83
  section.
84
84
 
85
- - [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
86
- - [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
87
- - [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
88
- - [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
89
- - [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
90
- - [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
85
+ - [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
86
+ - [Nested Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
87
+ - [Selectable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
88
+ - [Draggable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-draggable-rows--docs)
89
+ - [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
90
+ - [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
91
+ - [With Form Fields](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
91
92
 
92
93
  ### Custom Styles
93
94
 
@@ -101,13 +102,13 @@ our
101
102
  `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`). Assistive technology can announce column
102
103
  and row headers as users move through cells **only when** the markup is a real data table with
103
104
  correct headers and an accessible name. `Table` does **not** include a model, roving tabindex, or
104
- built-in sort, filter, selection, or expand behavior.
105
+ built-in sort, filter, selection, expand, or reorder behavior.
105
106
 
106
107
  Use `Table` for tabular data with a relationship between rows and columns—not for page layout.
107
108
  Prefer **`Table`** (CSS Grid) unless the design needs a standard HTML table layout without Grid;
108
109
  then use **`BaseTable`**. The same accessibility requirements apply to both. For interactive table
109
110
  patterns, follow
110
- [Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)
111
+ [Guides > Accessibility > Table Patterns](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns--docs)
111
112
  instead of inventing ARIA. See also
112
113
  [Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/).
113
114
 
@@ -191,8 +192,8 @@ apply only when the situation matches—otherwise omit.
191
192
  **If no design spec is provided:** generate a simple data table with **`Table.Caption`**,
192
193
  **`Table.Head`** / **`Table.Body`**, **`scope="col"`** on column headers, and **`Table.Cell`** for
193
194
  body data. Omit **`Table.Footer`**, row headers, **`tabIndex`**, `id` / `headers` associations,
194
- **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, selection checkboxes, and filter/sort popups
195
- unless the spec calls for those patterns.
195
+ **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, selection checkboxes, filter/sort popups,
196
+ and drag handles unless the spec calls for those patterns.
196
197
 
197
198
  **Heading instead of caption** _(conditional)_:
198
199
 
@@ -212,12 +213,13 @@ heading a unique `id` and set **`aria-labelledby`** on **`Table`**. Do not also
212
213
 
213
214
  Do not invent table ARIA. Copy the matching Canvas Kit guide when the spec includes that behavior:
214
215
 
215
- - [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
216
- - [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
217
- - [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
218
- - [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
219
- - [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
220
- - [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
216
+ - [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
217
+ - [Nested Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
218
+ - [Selectable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
219
+ - [Draggable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-draggable-rows--docs)
220
+ - [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
221
+ - [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
222
+ - [With Form Fields](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
221
223
 
222
224
  | Requirement | How to satisfy |
223
225
  | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -227,8 +229,9 @@ Do not invent table ARIA. Copy the matching Canvas Kit guide when the spec inclu
227
229
  | Row headers _(conditional)_ | When the first (or identifying) column names each row, set **`scope="row"`** on **`Table.Header`** in the body, as in [Fixed Column](#fixed-column). Do not rely on `<th>` alone. |
228
230
  | Keyboard access to overflow _(conditional)_ | If the table scrolls, set **`tabIndex={0}`** on **`Table`**. Omit it when content does not overflow. |
229
231
  | Footer _(conditional)_ | **`Table.Footer`** only when the design includes summary or footer rows. |
230
- | Form controls in cells _(conditional)_ | Label every control (prefer **`FormField`**). See [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs) and [Form Field](?path=/docs/components-inputs-form-field--docs). |
231
- | Sort, filter, select, expand, or nest _(conditional)_ | Follow the matching [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) guide. **Ask the developer** which pattern the spec requires before generating `aria-sort`, `aria-expanded`, `aria-level`, `aria-owns`, live regions, or selection checkboxes. |
232
+ | Form controls in cells _(conditional)_ | Label every control (prefer **`FormField`**). See [With Form Fields](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs) and [Form Field](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs). |
233
+ | Reorder rows _(conditional)_ | Follow [Draggable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-draggable-rows--docs). **Ask the developer** before generating drag handles, reorder keyboard behavior, or move announcements. |
234
+ | Sort, filter, select, expand, or nest _(conditional)_ | Follow the matching [Table Patterns](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns--docs) guide. **Ask the developer** which pattern the spec requires before generating `aria-sort`, `aria-expanded`, `aria-level`, `aria-owns`, live regions, or selection checkboxes. |
232
235
 
233
236
  **Summary for code generation:**
234
237
 
@@ -254,14 +257,16 @@ to supply instead):
254
257
  scrollable table
255
258
  - Set **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, **`aria-owns`**, or selection
256
259
  checkboxes by default — those belong to specific
257
- [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) and need a matching design
260
+ [Table Patterns](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns--docs) and need a matching design
258
261
  spec
259
262
  - Nest a `<table>` inside a cell to fake hierarchy, or add extra **`Table.Body`** elements to fake a
260
- tree — see [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
263
+ tree — see [Nested Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
261
264
  - Put a "Select All" checkbox in a column header **`Table.Header`** without following
262
- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
265
+ [Selectable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
266
+ - Add drag handles or make rows reorderable without following
267
+ [Draggable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-draggable-rows--docs)
263
268
  - Place unlabeled inputs in cells, or rely on the column header alone without checking
264
- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
269
+ [With Form Fields](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)
265
270
  - Generate **`role="grid"`** / grid-widget keyboard behavior on **`Table`** — CSS Grid on
266
271
  **`Table.Row`** is visual layout, not an ARIA grid
267
272
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "16.2.6",
3
+ "version": "16.2.8",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -47,10 +47,10 @@
47
47
  "@stackblitz/sdk": "^1.11.0",
48
48
  "@storybook/csf": "0.0.1",
49
49
  "@workday/canvas-expressive-icons-web": "1.0.2",
50
- "@workday/canvas-kit-labs-react": "^16.2.6",
51
- "@workday/canvas-kit-preview-react": "^16.2.6",
52
- "@workday/canvas-kit-react": "^16.2.6",
53
- "@workday/canvas-kit-styling": "^16.2.6",
50
+ "@workday/canvas-kit-labs-react": "^16.2.8",
51
+ "@workday/canvas-kit-preview-react": "^16.2.8",
52
+ "@workday/canvas-kit-react": "^16.2.8",
53
+ "@workday/canvas-kit-styling": "^16.2.8",
54
54
  "@workday/canvas-system-icons-web": "^5.0.3",
55
55
  "@workday/canvas-tokens-web": "^4.4.0",
56
56
  "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
63
63
  "mkdirp": "^1.0.3",
64
64
  "typescript": "5.0"
65
65
  },
66
- "gitHead": "5b96e463029d2b42bf31d05fb76bb75882e9c4b8"
66
+ "gitHead": "2e67f235f441bd1ed8981ef483ef057181cf26df"
67
67
  }