primer_view_components 0.6.0 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (140) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +40 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar.rb +0 -8
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_menu/action_menu_element.js +8 -1
  11. data/app/components/primer/alpha/action_menu/action_menu_element.ts +10 -1
  12. data/app/components/primer/alpha/action_menu.rb +0 -269
  13. data/app/components/primer/alpha/auto_complete/item.rb +0 -12
  14. data/app/components/primer/alpha/auto_complete.css +1 -1
  15. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  16. data/app/components/primer/alpha/auto_complete.rb +0 -47
  17. data/app/components/primer/alpha/banner.css +1 -1
  18. data/app/components/primer/alpha/banner.css.map +1 -1
  19. data/app/components/primer/alpha/banner.rb +0 -31
  20. data/app/components/primer/alpha/button_marketing.rb +0 -12
  21. data/app/components/primer/alpha/dialog.css +1 -1
  22. data/app/components/primer/alpha/dialog.css.map +1 -1
  23. data/app/components/primer/alpha/dialog.rb +2 -18
  24. data/app/components/primer/alpha/dropdown.css +1 -1
  25. data/app/components/primer/alpha/dropdown.css.map +1 -1
  26. data/app/components/primer/alpha/dropdown.rb +0 -105
  27. data/app/components/primer/alpha/form_control.rb +0 -11
  28. data/app/components/primer/alpha/hellip_button.rb +0 -9
  29. data/app/components/primer/alpha/hidden_text_expander.rb +0 -9
  30. data/app/components/primer/alpha/image.rb +0 -16
  31. data/app/components/primer/alpha/image_crop.rb +0 -11
  32. data/app/components/primer/alpha/layout.css +1 -1
  33. data/app/components/primer/alpha/layout.css.map +1 -1
  34. data/app/components/primer/alpha/layout.pcss +1 -1
  35. data/app/components/primer/alpha/layout.rb +0 -118
  36. data/app/components/primer/alpha/menu.css +1 -1
  37. data/app/components/primer/alpha/menu.css.map +1 -1
  38. data/app/components/primer/alpha/menu.rb +0 -19
  39. data/app/components/primer/alpha/multi_input.rb +0 -33
  40. data/app/components/primer/alpha/nav_list.rb +0 -69
  41. data/app/components/primer/alpha/navigation/tab.rb +0 -35
  42. data/app/components/primer/alpha/octicon_symbols.rb +0 -6
  43. data/app/components/primer/alpha/overlay.rb +0 -14
  44. data/app/components/primer/alpha/segmented_control.css +1 -1
  45. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  46. data/app/components/primer/alpha/segmented_control.rb +0 -61
  47. data/app/components/primer/alpha/tab_container.rb +0 -18
  48. data/app/components/primer/alpha/tab_nav.css +1 -1
  49. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  50. data/app/components/primer/alpha/tab_nav.rb +0 -63
  51. data/app/components/primer/alpha/tab_panels.rb +0 -16
  52. data/app/components/primer/alpha/text_field.css +1 -1
  53. data/app/components/primer/alpha/text_field.css.map +1 -1
  54. data/app/components/primer/alpha/text_field.rb +0 -68
  55. data/app/components/primer/alpha/toggle_switch.css +1 -1
  56. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  57. data/app/components/primer/alpha/toggle_switch.rb +0 -18
  58. data/app/components/primer/alpha/tooltip.rb +1 -69
  59. data/app/components/primer/alpha/underline_nav.css +1 -1
  60. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  61. data/app/components/primer/alpha/underline_nav.rb +0 -61
  62. data/app/components/primer/alpha/underline_panels.rb +0 -19
  63. data/app/components/primer/beta/auto_complete/item.rb +0 -8
  64. data/app/components/primer/beta/auto_complete.rb +0 -56
  65. data/app/components/primer/beta/avatar.css +1 -1
  66. data/app/components/primer/beta/avatar.css.map +1 -1
  67. data/app/components/primer/beta/avatar.rb +0 -18
  68. data/app/components/primer/beta/avatar_stack.css +1 -1
  69. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  70. data/app/components/primer/beta/avatar_stack.rb +0 -21
  71. data/app/components/primer/beta/base_button.rb +0 -4
  72. data/app/components/primer/beta/blankslate.css +1 -1
  73. data/app/components/primer/beta/blankslate.css.map +1 -1
  74. data/app/components/primer/beta/blankslate.rb +0 -104
  75. data/app/components/primer/beta/border_box/header.rb +4 -11
  76. data/app/components/primer/beta/border_box.css +1 -1
  77. data/app/components/primer/beta/border_box.css.map +1 -1
  78. data/app/components/primer/beta/border_box.html.erb +2 -2
  79. data/app/components/primer/beta/border_box.rb +11 -55
  80. data/app/components/primer/beta/breadcrumbs.rb +0 -7
  81. data/app/components/primer/beta/button.css +1 -1
  82. data/app/components/primer/beta/button.css.map +1 -1
  83. data/app/components/primer/beta/button.pcss +2 -2
  84. data/app/components/primer/beta/button.rb +2 -43
  85. data/app/components/primer/beta/button_group.css +1 -1
  86. data/app/components/primer/beta/button_group.css.map +1 -1
  87. data/app/components/primer/beta/button_group.rb +0 -16
  88. data/app/components/primer/beta/clipboard_copy.rb +0 -12
  89. data/app/components/primer/beta/close_button.rb +0 -3
  90. data/app/components/primer/beta/counter.rb +0 -8
  91. data/app/components/primer/beta/details.rb +0 -11
  92. data/app/components/primer/beta/flash.css +1 -1
  93. data/app/components/primer/beta/flash.css.map +1 -1
  94. data/app/components/primer/beta/flash.rb +1 -23
  95. data/app/components/primer/beta/heading.rb +0 -8
  96. data/app/components/primer/beta/icon_button.rb +0 -21
  97. data/app/components/primer/beta/label.css +1 -1
  98. data/app/components/primer/beta/label.css.map +1 -1
  99. data/app/components/primer/beta/label.rb +0 -20
  100. data/app/components/primer/beta/link.rb +0 -22
  101. data/app/components/primer/beta/markdown.rb +1 -262
  102. data/app/components/primer/beta/octicon.rb +0 -10
  103. data/app/components/primer/beta/popover.css +1 -1
  104. data/app/components/primer/beta/popover.css.map +1 -1
  105. data/app/components/primer/beta/popover.rb +0 -43
  106. data/app/components/primer/beta/progress_bar.rb +1 -22
  107. data/app/components/primer/beta/relative_time.rb +0 -9
  108. data/app/components/primer/beta/spinner.rb +2 -10
  109. data/app/components/primer/beta/state.rb +0 -13
  110. data/app/components/primer/beta/subhead.rb +0 -55
  111. data/app/components/primer/beta/text.rb +0 -4
  112. data/app/components/primer/beta/timeline_item.css +1 -1
  113. data/app/components/primer/beta/timeline_item.css.map +1 -1
  114. data/app/components/primer/beta/timeline_item.rb +0 -9
  115. data/app/components/primer/beta/truncate.rb +0 -50
  116. data/app/components/primer/blankslate_component.rb +0 -76
  117. data/app/components/primer/box.rb +0 -6
  118. data/app/components/primer/button_component.rb +0 -49
  119. data/app/components/primer/conditional_wrapper.rb +2 -17
  120. data/app/components/primer/icon_button.rb +0 -30
  121. data/app/components/primer/layout_component.rb +0 -12
  122. data/app/components/primer/tooltip.rb +0 -27
  123. data/app/components/primer/truncate.rb +0 -19
  124. data/lib/primer/accessibility.rb +1 -1
  125. data/lib/primer/deprecations.yml +3 -3
  126. data/lib/primer/forms/dsl/input.rb +1 -0
  127. data/lib/primer/static/generate_info_arch.rb +1 -0
  128. data/lib/primer/view_components/linters/details_menu_migration.rb +1 -1
  129. data/lib/primer/view_components/linters/migrations/truncate_component.rb +45 -0
  130. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
  131. data/lib/primer/view_components/linters.rb +1 -0
  132. data/lib/primer/view_components/version.rb +1 -1
  133. data/lib/primer/yard.rb +8 -9
  134. data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +3 -3
  135. data/previews/primer/alpha/tooltip_preview.rb +11 -23
  136. data/static/arguments.json +12 -1
  137. data/static/info_arch.json +122 -14
  138. data/static/previews.json +0 -13
  139. metadata +3 -3
  140. data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
@@ -2,6 +2,7 @@
2
2
  {
3
3
  "fully_qualified_name": "Primer::Alpha::ActionBar",
4
4
  "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
5
+ "accessibility_docs": null,
5
6
  "is_form_component": false,
6
7
  "is_published": true,
7
8
  "requires_js": false,
@@ -127,6 +128,7 @@
127
128
  {
128
129
  "fully_qualified_name": "Primer::Alpha::ActionBar::Item",
129
130
  "description": "ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.",
131
+ "accessibility_docs": null,
130
132
  "is_form_component": false,
131
133
  "is_published": true,
132
134
  "requires_js": false,
@@ -155,6 +157,7 @@
155
157
  {
156
158
  "fully_qualified_name": "Primer::Alpha::ActionBar::Divider",
157
159
  "description": "ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.",
160
+ "accessibility_docs": null,
158
161
  "is_form_component": false,
159
162
  "is_published": true,
160
163
  "requires_js": false,
@@ -185,6 +188,7 @@
185
188
  {
186
189
  "fully_qualified_name": "Primer::Alpha::ActionList",
187
190
  "description": "An ActionList is a styled list of links. It acts as the base component for many\nother menu-type components, including `ActionMenu` and `SelectPanel`, as well as\nthe navigational component `NavList`.\n\nEach item in an action list can be augmented by specifying corresponding leading\nand/or trailing visuals.",
191
+ "accessibility_docs": null,
188
192
  "is_form_component": false,
189
193
  "is_published": true,
190
194
  "requires_js": true,
@@ -731,6 +735,7 @@
731
735
  {
732
736
  "fully_qualified_name": "Primer::Alpha::ActionList::Item",
733
737
  "description": "An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters.",
738
+ "accessibility_docs": null,
734
739
  "is_form_component": false,
735
740
  "is_published": true,
736
741
  "requires_js": false,
@@ -971,6 +976,7 @@
971
976
  {
972
977
  "fully_qualified_name": "Primer::Alpha::ActionList::Heading",
973
978
  "description": "Heading used to describe each sub list within an action list.",
979
+ "accessibility_docs": null,
974
980
  "is_form_component": false,
975
981
  "is_published": true,
976
982
  "requires_js": false,
@@ -1041,6 +1047,7 @@
1041
1047
  {
1042
1048
  "fully_qualified_name": "Primer::Alpha::ActionList::FormWrapper",
1043
1049
  "description": "Utility component for wrapping ActionLists or individual ActionList::Items in forms.",
1050
+ "accessibility_docs": null,
1044
1051
  "is_form_component": false,
1045
1052
  "is_published": true,
1046
1053
  "requires_js": false,
@@ -1069,6 +1076,7 @@
1069
1076
  {
1070
1077
  "fully_qualified_name": "Primer::Alpha::ActionList::Divider",
1071
1078
  "description": "Separator with optional text rendered above groups or between individual items.",
1079
+ "accessibility_docs": null,
1072
1080
  "is_form_component": false,
1073
1081
  "is_published": true,
1074
1082
  "requires_js": false,
@@ -1110,6 +1118,7 @@
1110
1118
  {
1111
1119
  "fully_qualified_name": "Primer::Alpha::ActionMenu",
1112
1120
  "description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.",
1121
+ "accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.\n\nAdditional information around the keyboard functionality and implementation can be found on the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).",
1113
1122
  "is_form_component": false,
1114
1123
  "is_published": true,
1115
1124
  "requires_js": true,
@@ -1645,6 +1654,7 @@
1645
1654
  {
1646
1655
  "fully_qualified_name": "Primer::Alpha::ActionMenu::List",
1647
1656
  "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1657
+ "accessibility_docs": null,
1648
1658
  "is_form_component": false,
1649
1659
  "is_published": true,
1650
1660
  "requires_js": false,
@@ -1769,6 +1779,7 @@
1769
1779
  {
1770
1780
  "fully_qualified_name": "Primer::Alpha::AutoComplete",
1771
1781
  "description": "Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the\ninput field. This list is populated by server search results.",
1782
+ "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* `label_text` is required and visible by default.\n* If you must use a non-visible label, set `is_label_visible` to `false`.\nHowever, please note that a visible label should almost always\nbe used unless there is compelling reason not to. A placeholder is not a label.",
1772
1783
  "is_form_component": false,
1773
1784
  "is_published": true,
1774
1785
  "requires_js": false,
@@ -1964,6 +1975,7 @@
1964
1975
  {
1965
1976
  "fully_qualified_name": "Primer::Alpha::AutoComplete::Item",
1966
1977
  "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
1978
+ "accessibility_docs": null,
1967
1979
  "is_form_component": false,
1968
1980
  "is_published": true,
1969
1981
  "requires_js": false,
@@ -2017,6 +2029,7 @@
2017
2029
  {
2018
2030
  "fully_qualified_name": "Primer::Alpha::Banner",
2019
2031
  "description": "Use `Banner` to highlight important information.",
2032
+ "accessibility_docs": null,
2020
2033
  "is_form_component": false,
2021
2034
  "is_published": true,
2022
2035
  "requires_js": true,
@@ -2234,6 +2247,7 @@
2234
2247
  {
2235
2248
  "fully_qualified_name": "Primer::Alpha::ButtonMarketing",
2236
2249
  "description": "Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
2250
+ "accessibility_docs": null,
2237
2251
  "is_form_component": false,
2238
2252
  "is_published": true,
2239
2253
  "requires_js": false,
@@ -2400,6 +2414,7 @@
2400
2414
  {
2401
2415
  "fully_qualified_name": "Primer::Alpha::CheckBox",
2402
2416
  "description": "Check boxes are true/false inputs rendered as `<input type=\"checkbox\">` in HTML.\n\n## Schemes\n\nCheck boxes can submit values to the server using one of two schemes, either `:array`\nor `:boolean` (the default). Check boxes with a scheme of `:boolean` function like normal\nHTML check boxes. If they are checked, a value of \"1\" is sent to the server; if they are\nunchecked, a value of \"0\" is sent to the server. The checked and unchecked values can be\ncustomized via the `:value` and `:unchecked_value` arguments respectively.\n\nWhereas `:boolean` check boxes must have unique names, `:array` check boxes all have the\nsame name. On form submission, Rails will aggregate the values of the check boxes with the\nsame name and provide them to the controller as an array. If `:scheme:` is `:array`, the\n`:value` argument must also be provided. The `:unchecked_value` argument is ignored. If a\ncheck box is checked on submit, its corresponding value will appear in the array. If it is\nnot checked, its value will not appear in the array.\n\n## Caption templates\n\nCaption templates for `:array`-type check boxes work a little differently than they do for\nother input types. Because the name must be the same for all check boxes that make up an\narray, caption template file names are comprised of both the name _and_ the value of each\ncheck box. For example, a check box with the name `foo` and value `bar` must have a caption\ntemplate named `foo_bar_caption.html.erb`.\n\n## Nested Forms\n\nCheck boxes can have \"nested\" forms that are rendered below the caption. A common use-case\nis a form that is hidden until the check box is checked. Nested forms are indented slightly\nto align with the label and caption.\n\nDefine a nested form via the `#nested_form` method, which is expected to return an instance\nof a Primer form (see the usage section below).\n\nAny fields defined in the nested form are submitted along with the parent form's fields.\n\n**NOTE**: Check boxes do not automatically show or hide nested forms. If such behavior is\ndesired, it must be done by hand.",
2417
+ "accessibility_docs": null,
2403
2418
  "is_form_component": true,
2404
2419
  "is_published": false,
2405
2420
  "requires_js": false,
@@ -2636,6 +2651,7 @@
2636
2651
  {
2637
2652
  "fully_qualified_name": "Primer::Alpha::CheckBoxGroup",
2638
2653
  "description": "Check box groups consist of one or more related check boxes.",
2654
+ "accessibility_docs": null,
2639
2655
  "is_form_component": true,
2640
2656
  "is_published": false,
2641
2657
  "requires_js": false,
@@ -2787,6 +2803,7 @@
2787
2803
  {
2788
2804
  "fully_qualified_name": "Primer::Alpha::Dialog",
2789
2805
  "description": "A `Dialog` is used to remove the user from the main application flow,\nto confirm actions, ask for disambiguation or to present small forms.",
2806
+ "accessibility_docs": "- **Dialog Accessible Name**: A dialog should have an accessible name,\nso screen readers are aware of the purpose of the dialog when it opens.\nGive an accessible name setting `:title`. The accessible name will be\nused as the main heading inside the dialog.\n- **Dialog unique id**: A dialog should be unique. Give a unique id\nsetting `:dialog_id`. If no `:dialog_id` is given, a default randomize\nhex id is generated.\n\nThe combination of both `:title` and `:dialog_id` establishes an\n`aria-labelledby` relationship between the title and the unique id of\nthe dialog.",
2790
2807
  "is_form_component": false,
2791
2808
  "is_published": true,
2792
2809
  "requires_js": false,
@@ -3046,6 +3063,7 @@
3046
3063
  {
3047
3064
  "fully_qualified_name": "Primer::Alpha::Dialog::Header",
3048
3065
  "description": "A `Dialog::Header` is a compositional component, used to render the\nHeader of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
3066
+ "accessibility_docs": null,
3049
3067
  "is_form_component": false,
3050
3068
  "is_published": true,
3051
3069
  "requires_js": false,
@@ -3103,6 +3121,7 @@
3103
3121
  {
3104
3122
  "fully_qualified_name": "Primer::Alpha::Dialog::Footer",
3105
3123
  "description": "A `Dialog::Footer` is a compositional component, used to render the\nFooter of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
3124
+ "accessibility_docs": null,
3106
3125
  "is_form_component": false,
3107
3126
  "is_published": true,
3108
3127
  "requires_js": false,
@@ -3142,6 +3161,7 @@
3142
3161
  {
3143
3162
  "fully_qualified_name": "Primer::Alpha::Dialog::Body",
3144
3163
  "description": "A `Dialog::Body` is a compositional component, used to render the\nBody of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
3164
+ "accessibility_docs": null,
3145
3165
  "is_form_component": false,
3146
3166
  "is_published": true,
3147
3167
  "requires_js": false,
@@ -3177,6 +3197,7 @@
3177
3197
  {
3178
3198
  "fully_qualified_name": "Primer::Alpha::Dropdown",
3179
3199
  "description": "`Dropdown` is a lightweight context menu for housing navigation and actions.\nThey're great for instances where you don't need the full power (and code) of the SelectMenu.",
3200
+ "accessibility_docs": null,
3180
3201
  "is_form_component": false,
3181
3202
  "is_published": true,
3182
3203
  "requires_js": true,
@@ -3455,6 +3476,7 @@
3455
3476
  {
3456
3477
  "fully_qualified_name": "Primer::Alpha::Dropdown::Menu::Item",
3457
3478
  "description": "Items to be rendered in the `Dropdown` menu.",
3479
+ "accessibility_docs": null,
3458
3480
  "is_form_component": false,
3459
3481
  "is_published": true,
3460
3482
  "requires_js": false,
@@ -3483,6 +3505,7 @@
3483
3505
  {
3484
3506
  "fully_qualified_name": "Primer::Alpha::Dropdown::Menu",
3485
3507
  "description": "This component is part of `Dropdown` and should not be\nused as a standalone component.",
3508
+ "accessibility_docs": null,
3486
3509
  "is_form_component": false,
3487
3510
  "is_published": true,
3488
3511
  "requires_js": false,
@@ -3559,6 +3582,7 @@
3559
3582
  {
3560
3583
  "fully_qualified_name": "Primer::Alpha::FormButton",
3561
3584
  "description": "A button input rendered using the HTML `<button type=\"button\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
3585
+ "accessibility_docs": null,
3562
3586
  "is_form_component": true,
3563
3587
  "is_published": false,
3564
3588
  "requires_js": false,
@@ -3634,6 +3658,7 @@
3634
3658
  {
3635
3659
  "fully_qualified_name": "Primer::Alpha::FormControl",
3636
3660
  "description": "Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.\nNOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer\nforms framework.",
3661
+ "accessibility_docs": null,
3637
3662
  "is_form_component": false,
3638
3663
  "is_published": true,
3639
3664
  "requires_js": false,
@@ -3793,6 +3818,7 @@
3793
3818
  {
3794
3819
  "fully_qualified_name": "Primer::Alpha::HellipButton",
3795
3820
  "description": "Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders.",
3821
+ "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.\n* Set the attribute `aria-label` on the system arguments. E.g. `Primer::Alpha::HellipButton.new(\"aria-label\": \"Expand next part\")`",
3796
3822
  "is_form_component": false,
3797
3823
  "is_published": true,
3798
3824
  "requires_js": false,
@@ -3863,6 +3889,7 @@
3863
3889
  {
3864
3890
  "fully_qualified_name": "Primer::Alpha::HiddenTextExpander",
3865
3891
  "description": "Use `HiddenTextExpander` to indicate and toggle hidden text.",
3892
+ "accessibility_docs": "`HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,\nif your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be\n`\"Expand 5 more comments\"` instead of `\"More\"`.",
3866
3893
  "is_form_component": false,
3867
3894
  "is_published": true,
3868
3895
  "requires_js": false,
@@ -3933,6 +3960,7 @@
3933
3960
  {
3934
3961
  "fully_qualified_name": "Primer::Alpha::Image",
3935
3962
  "description": "Use `Image` to render images.",
3963
+ "accessibility_docs": "Always provide a meaningful `alt`.",
3936
3964
  "is_form_component": false,
3937
3965
  "is_published": true,
3938
3966
  "requires_js": false,
@@ -3984,6 +4012,7 @@
3984
4012
  {
3985
4013
  "fully_qualified_name": "Primer::Alpha::ImageCrop",
3986
4014
  "description": "A client-side mechanism to crop images.",
4015
+ "accessibility_docs": null,
3987
4016
  "is_form_component": false,
3988
4017
  "is_published": true,
3989
4018
  "requires_js": true,
@@ -4078,6 +4107,7 @@
4078
4107
  {
4079
4108
  "fully_qualified_name": "Primer::Alpha::Layout",
4080
4109
  "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
4110
+ "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won’t affect the visual position.",
4081
4111
  "is_form_component": false,
4082
4112
  "is_published": true,
4083
4113
  "requires_js": false,
@@ -4445,6 +4475,7 @@
4445
4475
  {
4446
4476
  "fully_qualified_name": "Primer::Alpha::Layout::Sidebar",
4447
4477
  "description": "The layout's sidebar content.",
4478
+ "accessibility_docs": null,
4448
4479
  "is_form_component": false,
4449
4480
  "is_published": true,
4450
4481
  "requires_js": false,
@@ -4473,6 +4504,7 @@
4473
4504
  {
4474
4505
  "fully_qualified_name": "Primer::Alpha::Layout::Main",
4475
4506
  "description": "The layout's main content.",
4507
+ "accessibility_docs": null,
4476
4508
  "is_form_component": false,
4477
4509
  "is_published": true,
4478
4510
  "requires_js": false,
@@ -4514,6 +4546,7 @@
4514
4546
  {
4515
4547
  "fully_qualified_name": "Primer::Alpha::Menu",
4516
4548
  "description": "Use `Menu` to create vertical lists of navigational links.",
4549
+ "accessibility_docs": null,
4517
4550
  "is_form_component": false,
4518
4551
  "is_published": true,
4519
4552
  "requires_js": false,
@@ -4613,6 +4646,7 @@
4613
4646
  {
4614
4647
  "fully_qualified_name": "Primer::Alpha::MultiInput",
4615
4648
  "description": "Multi inputs are comprised of multiple constituent fields, only one of which is visible\nat a given time. They are designed for situations where constituent inputs are shown or\nhidden based on the value of another field. For example, consider an address form. If\nthe user chooses the USA as the country, the region input should show a list of states\nand US territories; if the user instead chooses Canada, the region input should show a\nlist of Canadian provinces, etc.\n\nUnlike everywhere else in Primer forms, constituent inputs are not directly passed a\n`name` attribute. Instead, developers pass a `name` attribute to the multi input itself.\nThe multi input then automatically assigns each constituent input the same name. This is\ndone so that the multi input looks like a single field from the server's point of view.\nUsing the address form example from earlier, this means only one value - either a US state\nor a Canadian provice - will be submitted to the server under the `region` key.\n\nActually, that's not quite true. Constituent inputs _are_ given a `name`, but it's added to\nthe input as the `data-name` attribute as a way to identify constituent inputs, and will not\nbe sent to the server.",
4649
+ "accessibility_docs": null,
4616
4650
  "is_form_component": true,
4617
4651
  "is_published": false,
4618
4652
  "requires_js": true,
@@ -4812,6 +4846,7 @@
4812
4846
  {
4813
4847
  "fully_qualified_name": "Primer::Alpha::NavList",
4814
4848
  "description": "`NavList` provides a simple way to render side navigation, i.e. navigation\nthat appears to the left or right side of some main content. Each group in a\nnav list is a list of links.\n\nNav list groups can contain sub items. Rather than navigating to a URL, groups\nwith sub items expand and collapse on click. To indicate this functionality, the\ngroup will automatically render with a trailing chevron icon that changes direction\nwhen the group expands and collapses.\n\nNav list items appear visually active when selected. Each nav item must have one\nor more ID values that determine which item will appear selected. Use the\n`selected_item_id` argument to select the appropriate item.",
4849
+ "accessibility_docs": null,
4815
4850
  "is_form_component": false,
4816
4851
  "is_published": true,
4817
4852
  "requires_js": true,
@@ -5087,6 +5122,7 @@
5087
5122
  {
5088
5123
  "fully_qualified_name": "Primer::Alpha::NavList::Heading",
5089
5124
  "description": "The heading placed above a `NavList`'s items.\n\nSee {{#link_to_component}}Primer::Alpha::NavList{{/link_to_component}} for usage examples.",
5125
+ "accessibility_docs": null,
5090
5126
  "is_form_component": false,
5091
5127
  "is_published": true,
5092
5128
  "requires_js": false,
@@ -5165,6 +5201,7 @@
5165
5201
  {
5166
5202
  "fully_qualified_name": "Primer::Alpha::NavList::Item",
5167
5203
  "description": "Items are rendered as styled links. They can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the\n`selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also\nthemselves contain sub items. Sub items are rendered collapsed by default.",
5204
+ "accessibility_docs": null,
5168
5205
  "is_form_component": false,
5169
5206
  "is_published": true,
5170
5207
  "requires_js": true,
@@ -5318,6 +5355,7 @@
5318
5355
  {
5319
5356
  "fully_qualified_name": "Primer::Alpha::NavList::Divider",
5320
5357
  "description": "Separator with optional text rendered above groups or between individual items.",
5358
+ "accessibility_docs": null,
5321
5359
  "is_form_component": false,
5322
5360
  "is_published": true,
5323
5361
  "requires_js": false,
@@ -5357,6 +5395,7 @@
5357
5395
  {
5358
5396
  "fully_qualified_name": "Primer::Alpha::NavList::Group",
5359
5397
  "description": "A logical grouping of navigation links with an optional heading.\n\nSee {{#link_to_component}}Primer::Alpha::NavList{{/link_to_component}} for usage examples.",
5398
+ "accessibility_docs": null,
5360
5399
  "is_form_component": false,
5361
5400
  "is_published": true,
5362
5401
  "requires_js": true,
@@ -5457,6 +5496,7 @@
5457
5496
  {
5458
5497
  "fully_qualified_name": "Primer::Alpha::Navigation::Tab",
5459
5498
  "description": "This component is part of navigation components such as `Primer::Alpha::TabNav`\nand `Primer::Alpha::UnderlineNav` and should not be used by itself.",
5499
+ "accessibility_docs": "`Tab` renders the selected anchor tab with `aria-current=\"page\"` by default.\n When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current=\"true\"",
5460
5500
  "is_form_component": false,
5461
5501
  "is_published": true,
5462
5502
  "requires_js": false,
@@ -5579,6 +5619,7 @@
5579
5619
  {
5580
5620
  "fully_qualified_name": "Primer::Alpha::OcticonSymbols",
5581
5621
  "description": "OcticonSymbols renders a symbol dictionary using a list of {{link_to_octicons}}.",
5622
+ "accessibility_docs": null,
5582
5623
  "is_form_component": false,
5583
5624
  "is_published": true,
5584
5625
  "requires_js": false,
@@ -5612,6 +5653,7 @@
5612
5653
  {
5613
5654
  "fully_qualified_name": "Primer::Alpha::Overlay",
5614
5655
  "description": "Overlay components codify design patterns related to floating surfaces such\nas dialogs and menus. They are private components intended to be used by\nspecialized components, and mostly contain presentational logic and\nbehavior.",
5656
+ "accessibility_docs": "- **Overlay Accessible Name**: An overlay should have an accessible name,\nso screen readers are aware of the purpose of the Overlay when it opens.\nGive an accessible name setting `:title`. The accessible name will be\nused as the main heading inside the Overlay.\n- **Overlay unique id**: A Overlay should be unique. Give a unique id\nsetting `:id`. If no `:id` is given, a default randomize hex id is\ngenerated.\n\nThe combination of both `:title` and `:id` establishes an\n`aria-labelledby` relationship between the title and the unique id\nof the Overlay.",
5615
5657
  "is_form_component": false,
5616
5658
  "is_published": true,
5617
5659
  "requires_js": true,
@@ -5886,6 +5928,7 @@
5886
5928
  {
5887
5929
  "fully_qualified_name": "Primer::Alpha::Overlay::Header",
5888
5930
  "description": "A `Overlay::Header` is a compositional component, used to render the\nHeader of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
5931
+ "accessibility_docs": null,
5889
5932
  "is_form_component": false,
5890
5933
  "is_published": true,
5891
5934
  "requires_js": false,
@@ -5955,6 +5998,7 @@
5955
5998
  {
5956
5999
  "fully_qualified_name": "Primer::Alpha::Overlay::Footer",
5957
6000
  "description": "A `Overlay::Footer` is a compositional component, used to render the\nFooter of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
6001
+ "accessibility_docs": null,
5958
6002
  "is_form_component": false,
5959
6003
  "is_published": true,
5960
6004
  "requires_js": false,
@@ -6000,6 +6044,7 @@
6000
6044
  {
6001
6045
  "fully_qualified_name": "Primer::Alpha::Overlay::Body",
6002
6046
  "description": "A `Overlay::Body` is a compositional component, used to render the\nBody of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
6047
+ "accessibility_docs": null,
6003
6048
  "is_form_component": false,
6004
6049
  "is_published": true,
6005
6050
  "requires_js": false,
@@ -6035,6 +6080,7 @@
6035
6080
  {
6036
6081
  "fully_qualified_name": "Primer::Alpha::RadioButton",
6037
6082
  "description": "Radio buttons represent one of a set of options and are rendered as `<input type=\"radio\">` in HTML.\n**NOTE**: You probably want to use the {{#link_to_component}}Primer::Alpha::RadioButtonGroup{{/link_to_component}}\ncomponent instead, as it allows rendering a group of options.",
6083
+ "accessibility_docs": null,
6038
6084
  "is_form_component": true,
6039
6085
  "is_published": false,
6040
6086
  "requires_js": false,
@@ -6247,6 +6293,7 @@
6247
6293
  {
6248
6294
  "fully_qualified_name": "Primer::Alpha::RadioButtonGroup",
6249
6295
  "description": "A group of mutually exclusive radio buttons.",
6296
+ "accessibility_docs": null,
6250
6297
  "is_form_component": true,
6251
6298
  "is_published": false,
6252
6299
  "requires_js": false,
@@ -6398,6 +6445,7 @@
6398
6445
  {
6399
6446
  "fully_qualified_name": "Primer::Alpha::SegmentedControl",
6400
6447
  "description": "Use a segmented control to let users select an option from a short list and immediately apply the selection",
6448
+ "accessibility_docs": "A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.\nSee the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.",
6401
6449
  "is_form_component": false,
6402
6450
  "is_published": true,
6403
6451
  "requires_js": false,
@@ -6677,6 +6725,7 @@
6677
6725
  {
6678
6726
  "fully_qualified_name": "Primer::Alpha::SegmentedControl::Item",
6679
6727
  "description": "SegmentedControl::Item is a private component that is only used by SegmentedControl\nIt wraps the Button and IconButton components to provide the correct styles",
6728
+ "accessibility_docs": null,
6680
6729
  "is_form_component": false,
6681
6730
  "is_published": true,
6682
6731
  "requires_js": false,
@@ -6730,6 +6779,7 @@
6730
6779
  {
6731
6780
  "fully_qualified_name": "Primer::Alpha::Select",
6732
6781
  "description": "Select lists are single-line text inputs rendered as `<select>` tags in HTML.",
6782
+ "accessibility_docs": null,
6733
6783
  "is_form_component": true,
6734
6784
  "is_published": false,
6735
6785
  "requires_js": false,
@@ -7009,6 +7059,7 @@
7009
7059
  {
7010
7060
  "fully_qualified_name": "Primer::Alpha::SubmitButton",
7011
7061
  "description": "A submit button input rendered using the HTML `<button type=\"submit\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
7062
+ "accessibility_docs": null,
7012
7063
  "is_form_component": true,
7013
7064
  "is_published": false,
7014
7065
  "requires_js": false,
@@ -7084,6 +7135,7 @@
7084
7135
  {
7085
7136
  "fully_qualified_name": "Primer::Alpha::TabContainer",
7086
7137
  "description": "Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.\nIt only provides the tab functionality. If you want styled Tabs you can look at {{#link_to_component}}Primer::Alpha::TabNav{{/link_to_component}}.\n\nThis component requires javascript.",
7138
+ "accessibility_docs": null,
7087
7139
  "is_form_component": false,
7088
7140
  "is_published": true,
7089
7141
  "requires_js": true,
@@ -7117,6 +7169,7 @@
7117
7169
  {
7118
7170
  "fully_qualified_name": "Primer::Alpha::TabNav",
7119
7171
  "description": "Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::TabPanels{{/link_to_component}} instead.",
7172
+ "accessibility_docs": "- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an\n implicit landmark role of `navigation` which should be reserved for main links.\n For all other set of links, set tag to `:div`.\n- See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional\n accessibility considerations.",
7120
7173
  "is_form_component": false,
7121
7174
  "is_published": true,
7122
7175
  "requires_js": false,
@@ -7248,6 +7301,7 @@
7248
7301
  {
7249
7302
  "fully_qualified_name": "Primer::Alpha::TabPanels",
7250
7303
  "description": "Use `TabPanels` for tabs with panel navigation.",
7304
+ "accessibility_docs": null,
7251
7305
  "is_form_component": false,
7252
7306
  "is_published": true,
7253
7307
  "requires_js": true,
@@ -7378,6 +7432,7 @@
7378
7432
  {
7379
7433
  "fully_qualified_name": "Primer::Alpha::TextArea",
7380
7434
  "description": "Text areas are multi-line text inputs rendered using the `<textarea>` tag in HTML.",
7435
+ "accessibility_docs": null,
7381
7436
  "is_form_component": true,
7382
7437
  "is_published": false,
7383
7438
  "requires_js": false,
@@ -7622,6 +7677,7 @@
7622
7677
  {
7623
7678
  "fully_qualified_name": "Primer::Alpha::TextField",
7624
7679
  "description": "Text fields are single-line text inputs rendered as `<input type=\"text\">` in HTML.",
7680
+ "accessibility_docs": null,
7625
7681
  "is_form_component": true,
7626
7682
  "is_published": true,
7627
7683
  "requires_js": false,
@@ -8057,6 +8113,7 @@
8057
8113
  {
8058
8114
  "fully_qualified_name": "Primer::Alpha::ToggleSwitch",
8059
8115
  "description": "The ToggleSwitch component is a button that toggles between two boolean states. It is meant to be used for\nsettings that should cause an immediate update. If configured with a \"src\" attribute, the component will\nmake a POST request containing data of the form \"value: 0 | 1\".",
8116
+ "accessibility_docs": null,
8060
8117
  "is_form_component": false,
8061
8118
  "is_published": true,
8062
8119
  "requires_js": true,
@@ -8279,6 +8336,7 @@
8279
8336
  {
8280
8337
  "fully_qualified_name": "Primer::Alpha::Tooltip",
8281
8338
  "description": "`Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.\nUse tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).\n\nWhen using a tooltip, follow the provided guidelines to avoid accessibility issues:\n- Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.\n- `Tooltip` should be rendered through the API of {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::IconButton{{/link_to_component}}. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n content.\n\nSemantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a\n`aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:\n- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.\nThe majority of tooltips will fall under this category.\n- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.\n`label` type is usually only appropriate for an icon-only control.",
8339
+ "accessibility_docs": null,
8282
8340
  "is_form_component": false,
8283
8341
  "is_published": true,
8284
8342
  "requires_js": true,
@@ -8353,19 +8411,6 @@
8353
8411
  ]
8354
8412
  }
8355
8413
  },
8356
- {
8357
- "preview_path": "primer/alpha/tooltip/label_tooltip_on_button_with_existing_labelledby",
8358
- "name": "label_tooltip_on_button_with_existing_labelledby",
8359
- "snapshot": "false",
8360
- "skip_rules": {
8361
- "wont_fix": [
8362
- "region"
8363
- ],
8364
- "will_fix": [
8365
- "color-contrast"
8366
- ]
8367
- }
8368
- },
8369
8414
  {
8370
8415
  "preview_path": "primer/alpha/tooltip/description_tooltip_on_button_with_existing_describedby",
8371
8416
  "name": "description_tooltip_on_button_with_existing_describedby",
@@ -8465,6 +8510,7 @@
8465
8510
  {
8466
8511
  "fully_qualified_name": "Primer::Alpha::UnderlineNav",
8467
8512
  "description": "Use `UnderlineNav` to style navigation links with a minimal\nunderlined selected state, typically placed at the top\nof the page.\n\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::UnderlinePanels{{/link_to_component}} instead.",
8513
+ "accessibility_docs": "- By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an\n implicit landmark role of `navigation` which should be reserved for main links.\n For all other set of links, set tag to `:div`.\n- See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional\n accessibility considerations.",
8468
8514
  "is_form_component": false,
8469
8515
  "is_published": true,
8470
8516
  "requires_js": false,
@@ -8595,6 +8641,7 @@
8595
8641
  {
8596
8642
  "fully_qualified_name": "Primer::Alpha::UnderlinePanels",
8597
8643
  "description": "Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.",
8644
+ "accessibility_docs": null,
8598
8645
  "is_form_component": false,
8599
8646
  "is_published": true,
8600
8647
  "requires_js": true,
@@ -8718,6 +8765,7 @@
8718
8765
  {
8719
8766
  "fully_qualified_name": "Primer::Beta::AutoComplete",
8720
8767
  "description": "Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the\ninput field. This list is populated by server search results.",
8768
+ "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* `label_text` is required and visible by default.\n* If you must hide the label, set `visually_hide_label` to `true`.\nHowever, please note that a visible label should almost always\nbe used unless there is compelling reason not to. A placeholder is not a label.",
8721
8769
  "is_form_component": false,
8722
8770
  "is_published": true,
8723
8771
  "requires_js": true,
@@ -9106,6 +9154,7 @@
9106
9154
  {
9107
9155
  "fully_qualified_name": "Primer::Beta::AutoComplete::Item",
9108
9156
  "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
9157
+ "accessibility_docs": null,
9109
9158
  "is_form_component": false,
9110
9159
  "is_published": true,
9111
9160
  "requires_js": false,
@@ -9206,6 +9255,7 @@
9206
9255
  {
9207
9256
  "fully_qualified_name": "Primer::Beta::Avatar",
9208
9257
  "description": "`Avatar` can be used to represent users and organizations on GitHub.\n\n- Use the default circle avatar for users, and the square shape\nfor organizations or any other non-human avatars.\n- By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.\n- Set `size` to update the height and width of the `Avatar` in pixels.\n- To stack multiple avatars together, use {{#link_to_component}}Primer::Beta::AvatarStack{{/link_to_component}}.",
9258
+ "accessibility_docs": "Images should have text alternatives that describe the information or function represented.\nIf the avatar functions as a link, provide alt text that helps convey the function. For instance,\nif `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`\nrather than `@kittenuser`.\n[Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)",
9209
9259
  "is_form_component": false,
9210
9260
  "is_published": true,
9211
9261
  "requires_js": false,
@@ -9424,6 +9474,7 @@
9424
9474
  {
9425
9475
  "fully_qualified_name": "Primer::Beta::AvatarStack",
9426
9476
  "description": "Use `AvatarStack` to stack multiple avatars together.",
9477
+ "accessibility_docs": null,
9427
9478
  "is_form_component": false,
9428
9479
  "is_published": true,
9429
9480
  "requires_js": false,
@@ -9608,6 +9659,7 @@
9608
9659
  {
9609
9660
  "fully_qualified_name": "Primer::Beta::BaseButton",
9610
9661
  "description": "Use `BaseButton` to render an unstyled `<button>` tag that can be customized.",
9662
+ "accessibility_docs": null,
9611
9663
  "is_form_component": false,
9612
9664
  "is_published": true,
9613
9665
  "requires_js": false,
@@ -9716,6 +9768,7 @@
9716
9768
  {
9717
9769
  "fully_qualified_name": "Primer::Beta::Blankslate",
9718
9770
  "description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
9771
+ "accessibility_docs": "- The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.\n- All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`, which will hide the visual from screen reader users.\n- The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.\n- `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, \"Learn more\" or \"Click here\".\n- The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.",
9719
9772
  "is_form_component": false,
9720
9773
  "is_published": true,
9721
9774
  "requires_js": false,
@@ -9999,6 +10052,7 @@
9999
10052
  {
10000
10053
  "fully_qualified_name": "Primer::Beta::BorderBox",
10001
10054
  "description": "`BorderBox` is a Box component with a border.",
10055
+ "accessibility_docs": null,
10002
10056
  "is_form_component": false,
10003
10057
  "is_published": true,
10004
10058
  "requires_js": false,
@@ -10178,6 +10232,7 @@
10178
10232
  {
10179
10233
  "fully_qualified_name": "Primer::Beta::BorderBox::Header",
10180
10234
  "description": "`BorderBox::Header` is used inside `BorderBox` to render its header slot.",
10235
+ "accessibility_docs": "When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>",
10181
10236
  "is_form_component": false,
10182
10237
  "is_published": true,
10183
10238
  "requires_js": false,
@@ -10216,7 +10271,13 @@
10216
10271
  }
10217
10272
  ],
10218
10273
  "methods": [
10274
+ {
10275
+ "name": "id",
10276
+ "description": "Returns the value of attribute id.",
10277
+ "parameters": [
10219
10278
 
10279
+ ]
10280
+ }
10220
10281
  ],
10221
10282
  "previews": [
10222
10283
 
@@ -10230,6 +10291,7 @@
10230
10291
  {
10231
10292
  "fully_qualified_name": "Primer::Beta::Breadcrumbs",
10232
10293
  "description": "Use `Breadcrumbs` to display page hierarchy.\n\n#### Known issues\n\n##### Responsiveness\n\n`Breadcrumbs` is not optimized for responsive designs.",
10294
+ "accessibility_docs": "`Breadcrumbs` renders a list of links within a `nav` element and has an implicit landmark role of `navigation`.\nBy default, the component labels the `nav` element with \"Breadcrumbs\" which helps distinguish the type of navigation.\nAdditionally, the component will always render the last link, which should represent the current page, with an `aria-current=\"page\"` attribute.\n\nFor more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).",
10233
10295
  "is_form_component": false,
10234
10296
  "is_published": true,
10235
10297
  "requires_js": false,
@@ -10302,6 +10364,7 @@
10302
10364
  {
10303
10365
  "fully_qualified_name": "Primer::Beta::Breadcrumbs::Item",
10304
10366
  "description": "This component is part of `Primer::Beta::Breadcrumbs` and should not be\nused as a standalone component.",
10367
+ "accessibility_docs": null,
10305
10368
  "is_form_component": false,
10306
10369
  "is_published": true,
10307
10370
  "requires_js": false,
@@ -10369,6 +10432,7 @@
10369
10432
  {
10370
10433
  "fully_qualified_name": "Primer::Beta::Button",
10371
10434
  "description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
10435
+ "accessibility_docs": null,
10372
10436
  "is_form_component": false,
10373
10437
  "is_published": true,
10374
10438
  "requires_js": false,
@@ -10691,6 +10755,7 @@
10691
10755
  {
10692
10756
  "fully_qualified_name": "Primer::Beta::ButtonGroup",
10693
10757
  "description": "Use `ButtonGroup` to render a series of buttons.",
10758
+ "accessibility_docs": null,
10694
10759
  "is_form_component": false,
10695
10760
  "is_published": true,
10696
10761
  "requires_js": false,
@@ -10811,6 +10876,7 @@
10811
10876
  {
10812
10877
  "fully_qualified_name": "Primer::Beta::ClipboardCopy",
10813
10878
  "description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.",
10879
+ "accessibility_docs": "Always set an accessible label to help the user interact with the component.",
10814
10880
  "is_form_component": false,
10815
10881
  "is_published": true,
10816
10882
  "requires_js": true,
@@ -10913,6 +10979,7 @@
10913
10979
  {
10914
10980
  "fully_qualified_name": "Primer::Beta::CloseButton",
10915
10981
  "description": "Use `CloseButton` to render an `×` without default button styles.\n\n[0]: https://primer.style/view-components/system-arguments#html-attributes",
10982
+ "accessibility_docs": "`CloseButton` has a default `aria-label` of \"Close\" to provides assistive technologies with an accessible label.\nYou may choose to override this label with something more descriptive via [system_arguments][0].",
10916
10983
  "is_form_component": false,
10917
10984
  "is_published": true,
10918
10985
  "requires_js": false,
@@ -10983,6 +11050,7 @@
10983
11050
  {
10984
11051
  "fully_qualified_name": "Primer::Beta::Counter",
10985
11052
  "description": "Use `Counter` to add a count to navigational elements and buttons.",
11053
+ "accessibility_docs": "Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`\nshould be accompanied with text such as `issues` or `pull requests`.",
10986
11054
  "is_form_component": false,
10987
11055
  "is_published": true,
10988
11056
  "requires_js": false,
@@ -11207,6 +11275,7 @@
11207
11275
  {
11208
11276
  "fully_qualified_name": "Primer::Beta::Details",
11209
11277
  "description": "Use `DetailsComponent` to reveal content after clicking a button.",
11278
+ "accessibility_docs": null,
11210
11279
  "is_form_component": false,
11211
11280
  "is_published": true,
11212
11281
  "requires_js": false,
@@ -11346,6 +11415,7 @@
11346
11415
  {
11347
11416
  "fully_qualified_name": "Primer::Beta::Flash",
11348
11417
  "description": "Use `Flash` to inform users of successful or pending actions.",
11418
+ "accessibility_docs": null,
11349
11419
  "is_form_component": false,
11350
11420
  "is_published": true,
11351
11421
  "requires_js": false,
@@ -11536,6 +11606,7 @@
11536
11606
  {
11537
11607
  "fully_qualified_name": "Primer::Beta::Heading",
11538
11608
  "description": "`Heading` should be used to communicate page organization and hierarchy.\n\n- Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.\n- Use `Heading` as the title of a section or sub section.\n- Do not use `Heading` for styling alone. For simply styling text, consider using {{#link_to_component}}Primer::Beta::Text{{/link_to_component}} with relevant {{link_to_typography_docs}}\n such as `font_size` and `font_weight`.\n- Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.",
11609
+ "accessibility_docs": "While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.\nWhen text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be\nconsistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n\nHeadings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.\n<%= link_to_heading_practices %>",
11539
11610
  "is_form_component": false,
11540
11611
  "is_published": true,
11541
11612
  "requires_js": false,
@@ -11600,6 +11671,7 @@
11600
11671
  {
11601
11672
  "fully_qualified_name": "Primer::Beta::IconButton",
11602
11673
  "description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
11674
+ "accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)",
11603
11675
  "is_form_component": false,
11604
11676
  "is_published": true,
11605
11677
  "requires_js": false,
@@ -11750,6 +11822,7 @@
11750
11822
  {
11751
11823
  "fully_qualified_name": "Primer::Beta::Label",
11752
11824
  "description": "Use `Label` to add contextual metadata to a design.",
11825
+ "accessibility_docs": "Use `aria-label` if the `Label` or the context around it don't explain the label.",
11753
11826
  "is_form_component": false,
11754
11827
  "is_published": true,
11755
11828
  "requires_js": false,
@@ -12020,6 +12093,7 @@
12020
12093
  {
12021
12094
  "fully_qualified_name": "Primer::Beta::Link",
12022
12095
  "description": "Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.",
12096
+ "accessibility_docs": null,
12023
12097
  "is_form_component": false,
12024
12098
  "is_published": true,
12025
12099
  "requires_js": true,
@@ -12197,6 +12271,7 @@
12197
12271
  {
12198
12272
  "fully_qualified_name": "Primer::Beta::Markdown",
12199
12273
  "description": "Use `Markdown` to wrap markdown content.",
12274
+ "accessibility_docs": null,
12200
12275
  "is_form_component": false,
12201
12276
  "is_published": true,
12202
12277
  "requires_js": false,
@@ -12236,6 +12311,7 @@
12236
12311
  {
12237
12312
  "fully_qualified_name": "Primer::Beta::Octicon",
12238
12313
  "description": "`Octicon` renders an {{link_to_octicons}} with {{link_to_system_arguments_docs}}.\n`Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.",
12314
+ "accessibility_docs": null,
12239
12315
  "is_form_component": false,
12240
12316
  "is_published": true,
12241
12317
  "requires_js": false,
@@ -12318,6 +12394,7 @@
12318
12394
  {
12319
12395
  "fully_qualified_name": "Primer::Beta::Popover",
12320
12396
  "description": "Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\nBy default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.",
12397
+ "accessibility_docs": null,
12321
12398
  "is_form_component": false,
12322
12399
  "is_published": true,
12323
12400
  "requires_js": false,
@@ -12482,6 +12559,7 @@
12482
12559
  {
12483
12560
  "fully_qualified_name": "Primer::Beta::ProgressBar",
12484
12561
  "description": "Use `ProgressBar` to visualize task completion.",
12562
+ "accessibility_docs": null,
12485
12563
  "is_form_component": false,
12486
12564
  "is_published": true,
12487
12565
  "requires_js": false,
@@ -12608,6 +12686,7 @@
12608
12686
  {
12609
12687
  "fully_qualified_name": "Primer::Beta::RelativeTime",
12610
12688
  "description": "Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.",
12689
+ "accessibility_docs": null,
12611
12690
  "is_form_component": false,
12612
12691
  "is_published": true,
12613
12692
  "requires_js": false,
@@ -12807,6 +12886,7 @@
12807
12886
  {
12808
12887
  "fully_qualified_name": "Primer::Beta::Spinner",
12809
12888
  "description": "Use `Spinner` to let users know that content is being loaded.",
12889
+ "accessibility_docs": null,
12810
12890
  "is_form_component": false,
12811
12891
  "is_published": true,
12812
12892
  "requires_js": false,
@@ -12877,6 +12957,7 @@
12877
12957
  {
12878
12958
  "fully_qualified_name": "Primer::Beta::State",
12879
12959
  "description": "Use `State` for rendering the status of an item.",
12960
+ "accessibility_docs": null,
12880
12961
  "is_form_component": false,
12881
12962
  "is_published": true,
12882
12963
  "requires_js": false,
@@ -13037,6 +13118,7 @@
13037
13118
  {
13038
13119
  "fully_qualified_name": "Primer::Beta::Subhead",
13039
13120
  "description": "Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.\n\n- Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.\n- Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.\n- Use the actions slot to render a related action to the right of the heading. Use {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}.",
13121
+ "accessibility_docs": "The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n<%= link_to_heading_practices %>",
13040
13122
  "is_form_component": false,
13041
13123
  "is_published": true,
13042
13124
  "requires_js": false,
@@ -13219,6 +13301,7 @@
13219
13301
  {
13220
13302
  "fully_qualified_name": "Primer::Beta::Text",
13221
13303
  "description": "`Text` is a wrapper component that will apply typography styles to the text inside.",
13304
+ "accessibility_docs": null,
13222
13305
  "is_form_component": false,
13223
13306
  "is_published": true,
13224
13307
  "requires_js": false,
@@ -13283,6 +13366,7 @@
13283
13366
  {
13284
13367
  "fully_qualified_name": "Primer::Beta::TimelineItem",
13285
13368
  "description": "Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.",
13369
+ "accessibility_docs": null,
13286
13370
  "is_form_component": false,
13287
13371
  "is_published": true,
13288
13372
  "requires_js": false,
@@ -13385,6 +13469,7 @@
13385
13469
  {
13386
13470
  "fully_qualified_name": "Primer::Beta::TimelineItem::Badge",
13387
13471
  "description": "This component is part of `Primer::Beta::TimelineItem` and should not be\nused as a standalone component.",
13472
+ "accessibility_docs": null,
13388
13473
  "is_form_component": false,
13389
13474
  "is_published": true,
13390
13475
  "requires_js": false,
@@ -13415,6 +13500,7 @@
13415
13500
  {
13416
13501
  "fully_qualified_name": "Primer::Beta::Truncate",
13417
13502
  "description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
13503
+ "accessibility_docs": null,
13418
13504
  "is_form_component": false,
13419
13505
  "is_published": true,
13420
13506
  "requires_js": false,
@@ -13538,6 +13624,7 @@
13538
13624
  {
13539
13625
  "fully_qualified_name": "Primer::Beta::Truncate::TruncateText",
13540
13626
  "description": "This component is part of `Primer::Beta::Truncate` and should not be\nused as a standalone component.",
13627
+ "accessibility_docs": null,
13541
13628
  "is_form_component": false,
13542
13629
  "is_published": true,
13543
13630
  "requires_js": false,
@@ -13568,6 +13655,7 @@
13568
13655
  {
13569
13656
  "fully_qualified_name": "Primer::BlankslateComponent",
13570
13657
  "description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
13658
+ "accessibility_docs": "`Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n<%= link_to_heading_practices %>",
13571
13659
  "is_form_component": false,
13572
13660
  "is_published": true,
13573
13661
  "requires_js": false,
@@ -13702,6 +13790,7 @@
13702
13790
  {
13703
13791
  "fully_qualified_name": "Primer::Box",
13704
13792
  "description": "`Box` is a basic wrapper component for most layout related needs.",
13793
+ "accessibility_docs": null,
13705
13794
  "is_form_component": false,
13706
13795
  "is_published": true,
13707
13796
  "requires_js": false,
@@ -13786,6 +13875,7 @@
13786
13875
  {
13787
13876
  "fully_qualified_name": "Primer::ButtonComponent",
13788
13877
  "description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
13878
+ "accessibility_docs": null,
13789
13879
  "is_form_component": false,
13790
13880
  "is_published": true,
13791
13881
  "requires_js": true,
@@ -13921,6 +14011,7 @@
13921
14011
  {
13922
14012
  "fully_qualified_name": "Primer::ConditionalWrapper",
13923
14013
  "description": "Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition\nis true, a `Primer::BaseComponent` will render around the content. If the condition is false, only\nthe content is rendered.",
14014
+ "accessibility_docs": null,
13924
14015
  "is_form_component": false,
13925
14016
  "is_published": true,
13926
14017
  "requires_js": false,
@@ -13931,7 +14022,18 @@
13931
14022
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/conditional_wrapper.rb",
13932
14023
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/conditional_wrapper/default/",
13933
14024
  "parameters": [
13934
-
14025
+ {
14026
+ "name": "condition",
14027
+ "type": "Boolean",
14028
+ "default": "N/A",
14029
+ "description": "Whether or not to wrap the content in a `Primer::BaseComponent`."
14030
+ },
14031
+ {
14032
+ "name": "base_component_arguments",
14033
+ "type": "Hash",
14034
+ "default": "N/A",
14035
+ "description": "The arguments to pass to `Primer::BaseComponent`."
14036
+ }
13935
14037
  ],
13936
14038
  "slots": [
13937
14039
 
@@ -13949,6 +14051,7 @@
13949
14051
  {
13950
14052
  "fully_qualified_name": "Primer::Content",
13951
14053
  "description": "Use `Content` as a helper to render content passed to a slot without adding any tags.",
14054
+ "accessibility_docs": null,
13952
14055
  "is_form_component": false,
13953
14056
  "is_published": true,
13954
14057
  "requires_js": false,
@@ -13977,6 +14080,7 @@
13977
14080
  {
13978
14081
  "fully_qualified_name": "Primer::IconButton",
13979
14082
  "description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
14083
+ "accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)",
13980
14084
  "is_form_component": false,
13981
14085
  "is_published": true,
13982
14086
  "requires_js": true,
@@ -14058,6 +14162,7 @@
14058
14162
  {
14059
14163
  "fully_qualified_name": "Primer::LayoutComponent",
14060
14164
  "description": "Use `Layout` to build a main/sidebar layout.",
14165
+ "accessibility_docs": null,
14061
14166
  "is_form_component": false,
14062
14167
  "is_published": true,
14063
14168
  "requires_js": false,
@@ -14132,6 +14237,7 @@
14132
14237
  {
14133
14238
  "fully_qualified_name": "Primer::Navigation::TabComponent",
14134
14239
  "description": "nodoc",
14240
+ "accessibility_docs": null,
14135
14241
  "is_form_component": false,
14136
14242
  "is_published": true,
14137
14243
  "requires_js": false,
@@ -14248,6 +14354,7 @@
14248
14354
  {
14249
14355
  "fully_qualified_name": "Primer::Tooltip",
14250
14356
  "description": "`Tooltip` is a wrapper component that will apply a tooltip to the provided content.",
14357
+ "accessibility_docs": null,
14251
14358
  "is_form_component": false,
14252
14359
  "is_published": true,
14253
14360
  "requires_js": false,
@@ -14311,6 +14418,7 @@
14311
14418
  {
14312
14419
  "fully_qualified_name": "Primer::Truncate",
14313
14420
  "description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
14421
+ "accessibility_docs": null,
14314
14422
  "is_form_component": false,
14315
14423
  "is_published": true,
14316
14424
  "requires_js": false,